<template>
	<view class="page">
		<view class="hero-card">
			<text class="hero-title">请假申请</text>
			<text class="hero-subtitle">请选择本次申请入口，系统会按不同类型展示对应规则与可用额度。</text>
			<view class="flow-tip" :class="flowId ? 'flow-tip--ok' : 'flow-tip--warn'">
				{{ flowId ? '已带入流程ID，进入对应页面后可直接提交。' : '当前未携带流程ID，请从流程中心进入后再发起申请。' }}
			</view>
		</view>

		<view class="entry-list">
			<view v-for="item in entryList" :key="item.key" class="entry-card" @tap="goEntry(item)">
				<view class="entry-card__head">
					<view>
						<text class="entry-card__title">{{ item.title }}</text>
						<text class="entry-card__tag">{{ item.tag }}</text>
					</view>
					<text class="entry-card__arrow">→</text>
				</view>
				<text class="entry-card__desc">{{ item.desc }}</text>
				<view class="entry-card__points">
					<text v-for="point in item.points" :key="point" class="entry-card__point">• {{ point }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flowId: '',
			entryList: [
				{
					key: 'rest',
					title: '休假申请',
					tag: '月应休入口',
					desc: '用于每月应休天数的休假申请，会显示本月还能休多少天、还能拆分多少半天。',
					url: '/pagesA/rest-leave-apply/rest-leave-apply',
					points: ['自动读取当前考勤分组额度', '展示本月剩余休假天数', '校验半天拆分剩余额度']
				},
				{
					key: 'personal',
					title: '事假申请',
					tag: '事假 / 病假',
					desc: '用于发起事假、病假申请，按实际开始结束时间填写。',
					url: '/pagesA/personal-leave-apply/personal-leave-apply',
					points: ['包含事假、病假两类', '保留原有时长计算方式', '适合临时个人请假场景']
				},
				{
					key: 'paid',
					title: '带薪休假',
					tag: '婚假 / 丧假 / 年假 / 产假',
					desc: '用于发起婚假、丧假、年假、产假，会按后台规则展示可用天数。',
					url: '/pagesA/paid-leave-apply/paid-leave-apply',
					points: ['展示婚假、丧假、年假、产假规则', '年假显示本年剩余额度', '产假按后台规则限制天数']
				}
			]
		}
	},
	onLoad(options) {
		this.flowId = options.id || options.flowId || ''
	},
	methods: {
		goEntry(item) {
			const joinChar = item.url.includes('?') ? '&' : '?'
			const flowQuery = this.flowId ? `${joinChar}id=${encodeURIComponent(this.flowId)}` : ''
			uni.navigateTo({ url: `${item.url}${flowQuery}` })
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	padding: 28rpx 24rpx 40rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, #e8f5e9 0%, #f6fff7 100%);
}

.hero-card,
.entry-card {
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(67, 160, 71, 0.08);
}

.hero-card {
	padding: 32rpx 28rpx;
	margin-bottom: 24rpx;
}

.hero-title {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #2e7d32;
}

.hero-subtitle {
	display: block;
	margin-top: 16rpx;
	font-size: 26rpx;
	line-height: 1.7;
	color: #4f7d52;
}

.flow-tip {
	margin-top: 22rpx;
	padding: 18rpx 20rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
	line-height: 1.6;
}

.flow-tip--ok {
	background: #edf9ee;
	color: #2e7d32;
}

.flow-tip--warn {
	background: #fff7e8;
	color: #c57b00;
}

.entry-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.entry-card {
	padding: 28rpx;
}

.entry-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20rpx;
}

.entry-card__title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #2f3a2f;
}

.entry-card__tag {
	display: inline-block;
	margin-top: 12rpx;
	padding: 8rpx 18rpx;
	border-radius: 999rpx;
	font-size: 22rpx;
	color: #2e7d32;
	background: #eef8ef;
}

.entry-card__arrow {
	font-size: 34rpx;
	font-weight: 700;
	color: #43a047;
}

.entry-card__desc {
	display: block;
	margin-top: 18rpx;
	font-size: 25rpx;
	line-height: 1.7;
	color: #5f6b5f;
}

.entry-card__points {
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.entry-card__point {
	font-size: 23rpx;
	color: #8c9b8d;
	line-height: 1.6;
}
</style>
