<script setup lang="ts">
import { ref } from 'vue'
const {t} = useI18n();
const emit = defineEmits(['confirm'])

const show = ref(false)
const stateList = ref<Record<string, any>>([])
const stateListValue = ref('')

const handleClickStatePicker = () => {
  show.value = false
  emit('confirm', {
    id: stateListValue.value,
    name: stateList.value.find(item => item.id === stateListValue.value)?.name || ''
  })
}

function init(data: any, id: any) {
  stateList.value = data
  stateListValue.value = id
  show.value = true
}

defineExpose({
  init
})
</script>

<template>
  <wd-popup v-model="show" :safe-area-inset-bottom="true" custom-style="border-radius:20rpx 20rpx 0 0;"
            position="bottom">
    <view class="px-30rpx">
      <view class="flex-center-sb h-102rpx">
        <view class="text-30rpx text-#999" @click="show = false">{{ t('common.cancel') }}</view>
        <view class="text-34rpx text-#333">{{ t('common.select') }}</view>
        <view class="text-30rpx text-#FF6106" @click="handleClickStatePicker">{{ t('common.confirm') }}</view>
      </view>

      <wd-picker-view v-model="stateListValue" :columns="stateList" label-key="name" value-key="id"/>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>