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

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

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

  placeholder: {
    type: String,
    default: '请选择'
  },

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

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

const show = ref(false)

const onConfirm = (value) => {
  show.value = false
  emit('update:value', value.value)
  emit('change', value)
}

const displayText = computed(() => {
  const selected = props.columns.find(x => x.value === props.value)
  return selected?.text || ''
})

const reset = () => {
  emit('update:value', undefined)
}

defineExpose({
  reset
})
</script>

<template>
  <div>
    <van-field
        :model-value="displayText"
        @click="show = true"
        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"
        safe-area-inset-bottom
    >
      <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="show = false"
          :default-index="columns.findIndex(x => x.value === value)"
          title="请选择"
          confirm-button-text="确定"
          cancel-button-text="取消"
      />
    </van-popup>
  </div>
</template>