<template>
	<view class="u-p-b-24 u-m-b-24 border-bottom">
		<view class="title font-bold"> <text v-if="required" style="color: red;">*</text>{{title}}</view>
		<!-- 	<up-popup customStyle="overflow: hidden;" @change="change" :value="value" :range="list" range-key="name" round="20" mode="bottom">
			<view class="u-m-t-16 u-flex u-row-between ">
				<view class="color-333" v-if="selText">{{selText}}</view>
				<view class="color-999" v-else>请选择</view>
				<uni-icons type="right" color="#999" size="16"></uni-icons>
			</view>
		</up-popup> -->
		<picker @change="change" range-key="name" :value="value" :range="list">
			<view class="u-m-t-16 u-flex u-row-between ">
				<view class="color-333" v-if="selText">{{selText}}</view>
				<view class="color-999" v-else>请选择</view>
				<uni-icons type="right" color="#999" size="16"></uni-icons>
			</view>
		</picker>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		title: {
			type: String,
			default: '标题'
		},
		modelValue: {
			type: String,
		},
		required: {
			type: Boolean
		}
	})
	const index = ref(props.modelValue)
	const emits = defineEmits(['update:modelValue'], )
	const selText = computed(() => {
		const item = props.list.filter(ele => ele.value == props.modelValue)[0]
		if (item) {
			return item.name
		} else {
			return ''
		}
	})

	watch(() => index.value, (newval) => {
		emits('update:modelValue', props.list[newval].value)
	})

	function change(e) {
		index.value = e.detail.value
	}
</script>

<style>
</style>