<template>
	<picker @change="ok" range-key="text" mode="selector" :value="index" :range="option">
		<click-input :value="_value ? option[index].text : null" :placeholder="placeholder" />
	</picker>
</template>

<script setup>
	import { computed, ref, watch } from 'vue'
	import ClickInput from '@/components/ClickInput.vue'

	const props = defineProps({
		options: {
			type: Array,
			default: () => {
				return []
			}
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		valueKey: String,
		labelKey: String,
		modelValue: String
	})

	const option = computed(() => {
		return props.options.map(v => {
			return {
				text: props.labelKey ? v[props.labelKey] : v,
				value: props.valueKey ? v[props.valueKey] : v
			}
		})
	})

	const index = ref(0)

	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const emits = defineEmits(['update:modelValue'])

	function ok(e) {
		index.value = e.detail.value
		_value.value = option.value[index.value].value
	}
</script>

<style>
</style>