<template>
	<text class="w-form-input-rv" v-if="readonly">{{_value}}</text>
	<uni-data-checkbox v-else-if="formProps.expanding" v-model="_value" :disabled="readonly" :localdata="options" />
	<picker v-else @change="ok" mode="selector" @cancel="onCancel" :value="pickerIndex" :range="pickerOptions" :disabled="readonly">
		<!-- <uni-search-bar  v-if="isSearch" bgColor="#fff" v-model="searchValue" class="search" radius="5"
						placeholder="请输入" clearButton="auto" cancelButton="none" /> -->
						<!-- @input="searchChange" -->
		<click-input @click="isSearchFn()" :value="modelValue ? pickerOptions[pickerIndex] : null" :disabled="readonly"
			:placeholder="formProps.placeholder || '请选择'" />
	</picker>
</template>

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

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: String,
		readonly: Boolean
	})
	const options = computed(() => {
		return props.formProps.options.map(v => {
			return { text: v, value: v }
		})
	})
	const pickerOptions = computed(() => {
		console.log(JSON.stringify(props.formProps.options),searchValue.value,777888)
		return props.formProps.options.filter(item => item.includes(searchValue.value))
	})
	const pickerIndex = computed(() => {
		let findIndex = props.formProps.options.findIndex(item => {
			return item == props.modelValue
		})
		return findIndex != -1?findIndex:0
	})
	const index = ref(0)

	const _value = computed({
		get() {
			// console.log(props.modelValue,'单选框111')
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

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

	// 搜索查询
	const isSearch = ref(false);
	const searchValue = ref("");

	const isSearchFn = () => {
		setTimeout(() => {
			isSearch.value = true;
		}, 400)
	}
	const onCancel = () => {
		isSearch.value = false;
	}

	function ok(e) {
		index.value = e.detail.value
		_value.value = props.formProps.options[index.value]
		isSearch.value = false;
	}
</script>

<style scoped>
	.search {
		position: fixed;
		/* bottom: 465rpx; */
		/* bottom: 244rpx; */
		 bottom: 400rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		padding: 0;
	}

	.search /deep/ .uni-searchbar__box {
		width: 400rpx;
		border: 2rpx solid #f5f5f5;
	}
</style>