<template>
	<view class="page">
		<!-- 顶部导航 -->
		<view class="nav">
			<view class="back" @click="onBack">
				<uni-icons type="left" color="#8B2316" size="24"></uni-icons>
			</view>
			<view class="title">群发消息</view>
			<view class="right"></view>
		</view>

		<!-- 时间展示 -->
		<view class="time-row">{{ currentTime }}</view>

		<!-- 卡片区域 -->
		<view class="card">
			<view class="card-header">
				<text class="label">{{ patientCount }}位患者：</text>
				<view class="close" @click="onClear">
					<text>×</text>
				</view>
			</view>
			<view class="card-body">
				<view class="line">{{ patientName }}</view>
				<view class="line phone">{{ patientPhone }}</view>
			</view>
			<view class="card-footer">
				<view class="btn-outline" @click="onResend">再发一条</view>
			</view>
		</view>

		<!-- 占位滚动区域 -->
		<view class="spacer" />

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<view class="btn-primary" @click="onSendGroup">群发消息</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentTime = ref('')
const patientCount = ref(1)
const patientName = ref('测试')
const patientPhone = ref('155555555')

const pad = (n) => (n < 10 ? `0${n}` : `${n}`)
const updateTime = () => {
	const d = new Date()
	currentTime.value = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

onMounted(() => {
	updateTime()
	// 每秒刷新一次时间（如不需要可删除）
	setInterval(updateTime, 1000)
})

const onBack = () => {
	uni.navigateBack()
}
const onClear = () => {
	// 清空选择的患者（占位）
	patientCount.value = 0
	patientName.value = ''
	patientPhone.value = ''
}
const onResend = () => {
	uni.showToast({ title: '已触发再发一条', icon: 'none' })
}
const onSendGroup = () => {
	uni.showToast({ title: '已触发群发', icon: 'none' })
}
</script>

<style lang="scss" scoped>
$page-bg: #f5f5f5;
$brand: #8B2316;
$brand-deep: #8B2316;
$primary: #00cbc0;
$red: #D32F2F;

.page {
	background: $page-bg;
	min-height: 100vh;
	position: relative;
}

.nav {
	height: 88rpx;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	.back { width: 80rpx; display: flex; align-items: center; }
	.title { flex: 1; text-align: center; font-size: 34rpx; color: $red; font-weight: 600; }
	.right { width: 80rpx; }
}

.time-row {
	text-align: center;
	font-size: 32rpx;
	padding: 32rpx 0;
	color: #333;
	background: #fff;
}

.card {
	margin: 24rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
	overflow: hidden;
	.card-header {
		position: relative;
		padding: 28rpx 28rpx 12rpx 28rpx;
		.border { height: 2rpx; background: #eee; }
		.label { font-size: 32rpx; color: #333; }
		.close {
			position: absolute;
			right: 0;
			top: 0;
			width: 100rpx;
			height: 100rpx;
			border-bottom-left-radius: 100rpx;
			background: #8B2316;
			display: flex; align-items: center; justify-content: center;
			text { color: #fff; font-size: 40rpx; font-weight: 500; }
		}
	}
	.card-body {
		padding: 20rpx 28rpx 8rpx 28rpx;
		.line { font-size: 32rpx; color: #333; padding: 16rpx 0; }
		.phone { font-size: 36rpx; }
	}
	.card-footer {
		display: flex;
		justify-content: flex-end;
		padding: 16rpx 28rpx 28rpx 28rpx;
		.btn-outline {
			border: 2rpx solid $red;
			color: $red;
			padding: 10rpx 24rpx;
			border-radius: 28rpx;
			font-size: 28rpx;
		}
	}
}

.spacer { height: 200rpx; }

.bottom-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: #00cbc0;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.btn-primary {
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
	}
}
</style>
