<template>
	<picker @change="ok" range-key="text" mode="selector" :value="index" :range="option">
		<ClickInput :value="valueText ? option[index].text : null" :placeholder="$props.placeholder" />
	</picker>
</template>
<script>
	import ClickInput from './ClickInput.vue'
	export default {
		props: {
			options: {
				type: Array,
				default: () => {
					return []
				}
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			valueKey: String,
			labelKey: String,
			modelValue: String
		},
		components: {ClickInput},
		data() {
			return {
				index: 0,
				valueText: "",
			}
		},
		computed: {
			option() {
				return this.$props.options.map(v => {
					return {
						text: this.$props.labelKey ? v[this.$props.labelKey] : v,
						value: this.$props.valueKey ? v[this.$props.valueKey] : v
					}
				})
			},
			_value: {
				get() {
					this.valueText = this.$props.modelValue;
					return this.$props.modelValue
				},
				set(val) {
					this.$emit('update:modelValue', val)
					// this.valueText = val;
				}
			}
		},
		onLoad() {

		},
		mounted() {

		},
		onShow() {

		},
		methods: {
			ok(e) {
				this.index = e.detail.value
				this._value = this.option[this.index].value
				this.valueText = this.option[this.index].value;
			}
		}
	}
</script>


<style>
</style>