<template>
	<view class="li-message-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<text class="li-text-42  li-ml-25">消息</text>
			</template>
			<!-- #ifdef MP-WEIXIN -->
			<template #title>
				<view class="li-flex-center li-ml-200">
					<text class="ri-brush-3-line li-text-46 li-mr-30"></text>
					<text class="ri-search-eye-line li-text-46 li-pt-2"></text>
				</view>
			</template>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-25">
					<text class="ri-brush-3-line li-text-46 li-mr-30"></text>
					<text class="ri-search-eye-line li-text-46 li-pt-2"></text>
				</view>
			</template>
			<!-- #endif -->
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 通知栏 -->
		<wd-notice-bar class="li-mt-20" :scrollable="false" color="#37A5FF"
			background-color="rgba(217, 237, 255, 0.35)">
			<template #prefix>
				<text class="ri-volume-up-fill li-text-35 li-mr-10 li-ml-20"></text>
			</template>
			向左滑动可删除消息，删除后无法恢复。
			<template #suffix>
				<text class="ri-close-line li-text-38 li-mr-10 li-text-#B1B0B0"></text>
			</template>
		</wd-notice-bar>

		<!-- list -->
		<view>
			<wd-swipe-action v-for="(item,index) in 6">
				<view class="li-bg-white li-px-30">
					<view class="li-flex li-items-center li-bottom-border1  li-py-20">
						<wd-badge modelValue="12" top='10' right="2" :max='99'>
							<image class="li-w-100 li-h-100 li-rd-50%" src="/static/logo.png" mode=""></image>
						</wd-badge>
						<view class=" li-ml-30 li-w-80%">
							<view class="li-flex li-justify-between li-items-center">
								<text class="li-text-30 li-single-line">订单提醒</text>
								<text class="li-text-26 li-text-#B1B0B0">2025/12/12</text>
							</view>
							<view class="li-single-line li-text-25 li-text-#B1B0B0 li-mt-10">
								1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录
							</view>
						</view>
					</view>
				</view>

				<template #right>
					<view class="action">
						<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">删除</view>
					</view>
				</template>

			</wd-swipe-action>
		</view>
	</view>
</template>

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


	const handleAction = (action : string) => {
		console.log(action);
	}
</script>

<style lang="scss">
	.li-message-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.9) 0%,
				rgba(255, 255, 255, 1) 20%,
				rgba(255, 255, 255, 1) 40%,
				rgba(255, 255, 255, 1) 60%,
				rgba(255, 255, 255, 1) 80%,
				rgba(255, 255, 255, 1) 100%);
		background-attachment: fixed;
	}


	// 导航栏背景层
	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--window-top);
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.95),
				rgba(217, 237, 255, 0.85));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 998;
	}

	::v-deep .wd-navbar {
		z-index: 999;
	}

	.action {
		height: 100%;
		border-radius: 4rpx 0 0 4rpx;
		overflow: hidden;
	}

	.button {
		display: inline-block;
		padding: 0 30rpx;
		height: 100%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
</style>