<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const {t} =useI18n()
const props = defineProps({
  modelValue: {
    type: [Number, String]
  },
  columns: {
    type: Array,
    default: () => []
  },

  label: {
    type: String,
    default: ''
  },

  required: {
    type: Boolean,
    default: false
  },

  placeholder: {
    type: String,
    default: () => useI18n().t('components.form.pleaseSelect')
  },

  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const show = ref(false)

const onConfirm = (value) => {
  show.value = false
  emit('update:modelValue', value.selectedValues?.[0])
  emit('change', value.selectedValues?.[0])
}

const displayText = computed(() => {
  const selected = props.columns.find(x => x.value === props.modelValue)
  return selected?.text || ''
})
const openPopup=()=>{
  show.value=true
}
</script>

<template>
  <div>
    <van-field
        :model-value="displayText"
        @click="openPopup"
        readonly
        :disabled="disabled"
        :required="required"
        :placeholder="placeholder"
        :label="label"
        class="mb-10px"
        is-link
    />

    <van-popup
        v-model:show="show"
        destroy-on-close
        position="bottom"
        teleport="body"
        safe-area-inset-bottom
    >
      <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="show = false"
          :default-index="columns.findIndex(x => x.value === modelValue)"
          :title="t('components.form.pleaseSelect')"
          :confirm-button-text="t('components.dialog.confirm')"
          :cancel-button-text="t('components.dialog.cancel')"
      />
    </van-popup>
  </div>
</template>