<template>
	<view class="demo-block">
		<text class="demo-block__title-text ultra">Popup 弹出层</text>
		<text class="demo-block__desc-text">弹出层容器，用于展示弹窗、信息提示等内容</text>
		<view class="demo-block__body">

			<view class="demo-block">
				<text class="demo-block__title-text">基础类型</text>
				<view class="demo-block__body">
					<button class="button" type="primary" v-for="item in placement" @click="onClick(item.value)"
						:key="item.value">{{item.text}}</button>
					<l-popup v-model="visible" :position="currentPlacement" :closeable="true">
						<view style="padding: 100px;"></view>
					</l-popup>
				</view>
			</view>

			<view class="demo-block">
				<text class="demo-block__title-text">其它</text>
				<view class="demo-block__body">

					<button type="primary" class="button" @click="visible1 = true">底部弹出层-带标题及操作</button>
					<l-popup v-model="visible1" position="bottom" lStyle="height: 258px">
						<view class="header">
							<text class="btn btn--cancel" aria-role="button" @click="onHide">取消</text>
							<text class="title">标题文字</text>
							<text class="btn btn--confirm" aria-role="button" @click="onHide">确定</text>
						</view>
					</l-popup>

					<button type="primary" class="button" @click="visible2 = true">居中弹出层-带自定义关闭按钮</button>
					<l-popup v-model="visible2" position="center" @change="change" closeable>
						<view style="width: 240px; height: 240px; overflow: visible;"></view>
						<view class="close-btn">
							<l-icon name="close-circle" size="32" color="white" @click="onClose" />
						</view>
					</l-popup>
				</view>
			</view>

		</view>
	</view>
</template>
<script lang="uts" setup>
	type Placement = {
		value : string
		text : string
	}
	const top = ref(10)
	const placement = [
		{ value: 'top', text: '顶部弹出' },
		{ value: 'left', text: '左侧弹出' },
		{ value: 'center', text: '中间弹出' },
		{ value: 'bottom', text: '底部弹出' },
		{ value: 'right', text: '右侧弹出' },
	] as Placement[]

	const visible = ref(false)
	const visible1 = ref(false)
	const visible2 = ref(false)
	const currentPlacement = ref('top')
	const onClick = (value : string) => {
		console.log('value', value)
		visible.value = true
		currentPlacement.value = value
	}
	const change = () => { }
	const onHide = () => {
		visible1.value = false
	}
	const onClose = () => {
		visible2.value = false
	}
</script>
<style lang="scss">
	$card-bg-color: var(--doc-card-bg-color, white);
	// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
	$title-color: var(--doc-title-color, #000000E6);
	$summary-color: var(--doc-summary-color, #00000099);

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 116rpx;
	}

	.title {
		flex: 1;
		text-align: center;
		// font-weight: 600;
		font-size: 18px;
		color: $title-color;
	}

	.button {
		margin-bottom: 10rpx;
	}

	.btn {
		font-size: 16px;
		padding: 16px;
	}

	.btn--cancel {
		color: $summary-color;
	}

	.btn--confirm {
		color: #0052d9;
	}

	.close-btn {
		overflow: visible;
		position: absolute;
		// background-color: aqua;
		left: 50%;
		transform: translateX(-50%);
		z-index: 11501;
		// margin-left: -32rpx;
		bottom: -50px;
		// bottom: -112rpx // calc(-1 * (48rpx + 64rpx));
	}

	.demo-block {
		// margin: 32px 20px 0;
		padding: 32px 10px 0;
		// background-color: $page-bg-color;
		transition-property: background-color;
		transition-duration: 300ms;
		overflow: visible;

		&__title {
			margin: 0;
			margin-top: 8px;

			&-text {
				color: $summary-color;
				font-weight: 400;
				font-size: 14px;
				line-height: 16px;

				&.large {
					color: $title-color;
					font-size: 18px;
					font-weight: 700;
					line-height: 26px;
				}

				&.ultra {
					color: $title-color;
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
				}
			}
		}

		&__desc-text {
			color: $summary-color;
			margin: 8px 16px 0 0;
			font-size: 14px;
			line-height: 22px;
		}

		&__body {
			margin: 16px 0;
			overflow: visible;

			.demo-block {
				// margin-top: 0px;
				margin: 0;
			}
		}
	}
</style>