<template>
	<view class="PullDownBox">
		<view @click="handleShowPullDown" class="Pulldown-title-container">
			<!-- 标题显示内容 -->
			<view class="Pulldown-title">
				<slot name="title"></slot>
			</view>
			<u-icon :class="{'icon': true,'normal':isShowPullDownBox, 'active': !isShowPullDownBox}" name="arrow-down"
				color="#2979ff" size="28"></u-icon>
		</view>

		<view class="">
			<template v-if="isShowPullDownBox">
				<slot name="content"></slot>
			</template>
		</view>
	</view>


</template>

<script setup lang="ts">
	import { ref } from 'vue';

	/** 是否显示下拉框 */
	const isShowPullDownBox = ref(false)

	/** 是否显示下拉内容 */
	const handleShowPullDown = () => {
		isShowPullDownBox.value = !isShowPullDownBox.value
	}
</script>

<style lang="scss" scoped>
	.PullDownBox {
		background: #fff;
		margin-bottom: 10upx;
		padding: 10upx;
	}

	.Pulldown-title-container {
		display: flex;
	}

	.Pulldown-title {
		flex: 1;
	}

	.icon {
		padding: 0 10upx;
		flex: none;
		transition: all 0.2s;
	}

	.normal {
		transform: rotate(0deg);
	}

	.active {
		transform: rotate(180deg);
	}
</style>