<script setup lang="ts">

const props = defineProps<{
  modelValue: string
}>()

const emits = defineEmits<{
  'update:modelValue': [value: string]
}>()

interface AreaCode {
  title: string
  value: string
}

const isFilterShow = ref(false)
const areaCodeList = ref<AreaCode[]>([{
  title: 'Singapore',
  value: '+65',
}])


function handleChooseCode(item: AreaCode) {
  close()
  emits('update:modelValue', item.value)
}

function close() {
  isFilterShow.value = false
}

defineExpose({
  close
})
</script>

<template>
  <view class="relative">
    <view class="center" @click.stop="isFilterShow = !isFilterShow">
      <text class="text-28rpx text-primary font-bold">{{ props.modelValue }}</text>
      <image class="shrink-0 ml-6rpx w-16rpx h-16rpx transition-all"
             :class="{'rotate-180':isFilterShow}"
             src="@img/2134@2x.png"></image>
    </view>
    <wd-transition :show="isFilterShow" name="fade" :duration="100">
      <view
          class="absolute z-99 top-100% left-[-50%] mt-10rpx py-20rpx px-20rpx bg-white rounded-12rpx shadow-[0rpx_6rpx_36rpx_rgba(0,0,0,0.16)]">
        <view
            class="center py-16rpx px-48rpx rounded-12rpx transition-all"
            :class="{ 'bg-common': props.modelValue === item.value }"
            v-for="(item, index) in areaCodeList"
            :key="item.value"
            @click="handleChooseCode(item)"
        >
          <text class="text-28rpx text-primary font-bold">{{ item.value }}</text>
        </view>
      </view>
    </wd-transition>
  </view>
</template>

<style scoped lang="scss">

</style>