<template>
	<view>
		<picker mode="selector" @change="onChange" :range-key="key||'label'" :value="valueIndex" :range="data">
			<view class="picker">
				{{(data.find(e=>e.value == value)||{}).label}}
			</view>
		</picker>
	</view>
</template>

<script setup>
	import {
		computed,
	} from 'vue'
	const props = defineProps(['key', 'value', 'data'])
	const emit = defineEmits(['change'])
	const onChange = (val) => {
		let data = props.data?.[val.detail.value]?.value || ''
		emit('change', data)
	}
	const valueIndex = computed(() => {
		if (!props.data) return 0
		const index = props.data.findIndex(e => e.value === props.value)
		return index >= 0 ? index : 0
	})
</script>

<style lang="scss" scoped>
	.picker {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #333;
	}
</style>