<template>
	<view>
		<!-- 遮罩层 -->
		<view v-if="isVisible" class="overlay" @click="closeDrawer"></view>
		<!-- 抽屉 -->
		<view :class="['drawer', { 'drawer-open': isVisible }]">
			<view class="drawer-content">
				<!-- 抽屉中间的半圆 -->
				<view class="drawer-content-circle" @click="closeDrawer">
					<image class="drawer-img" src="/static/index/zuoyuan.png" />
				</view>
				<!-- 抽屉内容 -->
				<slot />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const isVisible = ref(false);

	// 打开抽屉
	const openDrawer = () => {
		isVisible.value = true;
	};

	// 关闭抽屉
	const closeDrawer = () => {
		isVisible.value = false;
	};

	// 暴露方法供父组件调用
	defineExpose({
		openDrawer,
		closeDrawer,
	});
</script>

<style lang="less" scoped>
	/* 遮罩层样式 */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		/* 确保遮罩层在抽屉下方 */
	}

	/* 抽屉样式 */
	.drawer {
		position: fixed;
		top: 0;
		right: -90%;
		width: 85%;
		height: 100vh;
		background: #fff;
		z-index: 1000;
		/* 确保抽屉在遮罩层上方 */
		transition: right 0.5s ease;
		border-top-left-radius: 80rpx;
		/* 设置左上角的圆角半径 */
		border-bottom-left-radius: 80rpx;
		/* overflow: hidden; */
		/* 设置左下角的圆角半径 */
	}

	/* 抽屉打开时的样式 */
	.drawer-open {
		right: 0;
	}

	/* 抽屉内容样式 */
	.drawer-content {
		position: relative;

		.drawer-content-circle {
			position: absolute;
			top: calc(50% - 55rpx);
			left: -40rpx;
			width: 100rpx;
			height: 110rpx;
			// background-color: #f00;
			/* border-radius 的两个值分别代表水平和垂直半径 */
			border-radius: 50% ;
			z-index: -1;
			background: linear-gradient(to bottom, #dfecfa, #c9dbee);
			display: flex;
			align-items: center;
			clip-path: inset(0 60% 0 0); /* 上 右 下 左，裁掉右半边 */
			.drawer-img {
				width: 25rpx;
				height: 25rpx;
				margin-left: 10rpx;
				transform: rotate(180deg);
			}
		}
	}
</style>