<template>
	<text class="w-form-input-rv" v-if="readonly">{{(_value || []).join('、')}}</text>
	<uni-data-checkbox v-else-if="formProps.expanding" multiple v-model="_value" :localdata="options" />
	<multiple-picker v-slot="{show}" v-else v-model="_value" :options="options">
		<click-input :value="props.modelValue"
			:placeholder="props.formProps.placeholder || '请选择'" @click="show"/>
	</multiple-picker>
</template>

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

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: Array,
		readonly: Boolean
	})

	const options = computed(() => {
		return props.formProps.options.map(v => {
			return { text: v, value: 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 = props.formProps.options[index.value]
	}
</script>

<style>
</style>