<template>
	<view class="container">
		<view class="header" @click="openSelect">
			<view class="label">{{checkedInfo.text}}</view>
			<u-icon v-if="!rotate" size="36" name="arrow-down" color="#D5AC66" />
			<u-icon v-if="rotate" size="36" name="arrow-up" color="#D5AC66" />
		</view>
		<view v-if="show" class="body">
			<view class="item" @click="select(item)" v-for="(item, index) in options" :key="item.value">
				<text>{{item.text}}</text>
				<u-icon style="transform: rotate(180deg);" v-if="checkedInfo.value === item.value" size="36" name="checkmark" color="#ee0a24" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Array,
				default: [],
				required: true,
			},
		},
		data() {
			return {
				checkedInfo: this.options[0],
				show: false,
				rotate: false,
			}
		},
		methods: {
			openSelect() {
				this.show = !this.show;
				this.rotate = !this.rotate;
			},
			select(item) {
				console.log('11231', item);
				this.checkedInfo = item;
				this.show = false;
				this.rotate = false;
				this.$emit('change2', item);
			},
		},
		onShow() {
			console.log("滚动距离为：");
		},
		
	}
</script>

<style>
	@import url("dropdown.css");
</style>