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

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


</template>

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

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

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

	defineExpose({ isShowPullDownBox, handleShowPullDown })
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	.PullDownBox {
		background: #fff;
		border-radius: 15upx;
	}

	.Pulldown-title-container {
		display: flex;
		padding: 15upx;
	}

	.Pulldown-title {
		flex: 1;
	}

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

	.Pulldown_content {
		padding: 10upx;
	}

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

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