<template>
	<view class="page-container">

		<!-- 表单区域 -->
		<view class="form-section">
			<view class="form-item">
				<text class="form-label">补卡时间</text>
				<picker mode="date" :value="form.date" @change="onDateChange">
					<view class="picker">{{ form.date }} {{ form.time }}</view>
				</picker>
			</view>

			<view class="tip-text">
				<text>本月已补卡{{ usedTimes }}次，剩余{{ remainTimes }}次。</text>
			</view>

			<view class="form-item">
				<text class="form-label">补卡说明</text>
				<textarea v-model="form.remark" placeholder="请输入" class="textarea" />
			</view>

			<view class="form-item">
				<text class="form-label">附件</text>
				<!-- 如果没有图片，显示上传按钮 -->
				<view class="custom-upload-btn" @click="chooseImage" v-if="!selectedImage">
					<image class="image" src="/static/ic_camera.png"></image>
					<text class="text">上传图片</text>
				</view>

				<!-- 已选图片预览 -->
				<view class="preview-item" v-else>
					<image class="preview-img" :src="selectedImage" mode="aspectFill" @click="previewImage"></image>
					<view class="delete-btn" @click.stop="deletePic">✕</view>
				</view>
			</view>
		</view>

		<!-- 审批记录 -->
		<view class="record-section">
			<text class="section-title">审批记录</text>
			<view class="timeline">
				<view v-for="(item, index) in records" :key="index" class="timeline-item">
					<!-- 点 -->
					<view class="timeline-dot"></view>

					<!-- 节点内容 -->
					<view class="timeline-content">
						<text class="end-text">{{ item.node }}</text>

						<view class="record-row" v-if="item.status !== '结束'">
							<image class="avatar" :src="item.avatar" mode="aspectFill" />
							<view class="name-node-container">
								<text class="name">{{ item.name }}</text>
								<text class="status" :class="statusClass(item.status)">{{ item.status }}</text>
							</view>
							<text class="time2">{{ item.time }}</text>
						</view>
						<text v-else class="time">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="footer">
			<button class="submit-btn" type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usedTimes: 0,
				remainTimes: 5,
				selectedImage: '',
				form: {
					date: '2025-07-13',
					time: '09:00',
					remark: ''
				},
				records: [{
						node: '提交',
						name: '于永乐',
						status: '已提交',
						time: '07-12 18:28:22',
						avatar: '/static/avatar1.png'
					},
					{
						node: '审批',
						name: '张桂花',
						status: '已同意',
						time: '07-12 18:30:12',
						avatar: '/static/avatar2.png'
					},
					{
						node: '审批',
						name: '张桂花',
						status: '已拒绝',
						time: '07-12 19:12:45',
						avatar: '/static/avatar2.png'
					},
					{
						node: '结束',
						name: '',
						status: '结束',
						time: '07-12 20:00:00',
						avatar: ''
					}
				]
			}
		},
		methods: {
			onDateChange(e) {
				this.form.date = e.detail.value
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.selectedImage = res.tempFilePaths[0]
					}
				})
			},
			// 预览图片
			previewImage() {
				uni.previewImage({
					current: this.selectedImage,
					urls: [this.selectedImage]
				})
			},
			// 删除图片
			deletePic(event) {
				this.selectedImage = ''
			},

			submit() {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
			},
			statusClass(status) {
				if (status === '已提交') return 'blue'
				if (status === '已同意') return 'green'
				if (status === '已拒绝') return 'orange'
				if (status === '结束') return 'gray'
				return ''
			}
		}
	}
</script>

<style scoped>
	.page-container {
		background: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.form-section {
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.form-item {
		margin-bottom: 20rpx;
	}

	.form-label {
		font-size: 24rpx;
		color: #737373;
		margin-bottom: 10rpx;
		display: block;
	}

	.tip-text {
		height: 73rpx;
		line-height: 73rpx;
		background: #F7F7F7;
		color: #808080;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding-left: 16rpx;
	}

	.textarea {
		width: 100%;
		height: 160rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		padding: 12rpx;
		font-size: 24rpx;
	}

	.upload-box {
		border: 2rpx dashed #aaa;
		border-radius: 12rpx;
		padding: 40rpx;
		text-align: center;
		color: #888;
	}

	.upload-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 12rpx;
	}

	/* 审批记录 */
	.record-section {
		background: #fff;
		border-radius: 25rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		padding: 35rpx 25rpx 35rpx 25rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	/* timeline 方法二：每个节点自己画线 */
	.timeline {
		position: relative;
		margin-left: 12rpx;
		margin-top: 45rpx;
	}

	.timeline-item {
		position: relative;
		padding-left: 40rpx;
		padding-bottom: 50rpx;
	}

	.timeline-item::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -2rpx;
		width: 2rpx;
		background: #ddd;
	}

	/* 第一个节点：去掉上半段 */
	.timeline-item:first-child::before {
		top: 20rpx;
	}

	/* 最后一个节点：去掉下半段 */
	.timeline-item:last-child::before {
		bottom: auto;
		height: 20rpx;
	}

	/* 状态点 */
	.timeline-dot {
		position: absolute;
		left: -12rpx;
		top: 10rpx;
		width: 20rpx;
		height: 20rpx;
		border: 1rpx solid #10AF7F;
		border-radius: 50%;
		background: #fff;
	}

	.timeline-content {
		margin-left: -20rpx;
	}

	.record-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.avatar {
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		background: #688CFF;
	}

	.name-node-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.name {
		font-size: 28rpx;
		color: #000;
	}

	.status {
		font-size: 22rpx;
		font-weight: 500;
	}

	.status.blue {
		color: #007aff;
	}

	.status.green {
		color: #4caf50;
	}

	.status.orange {
		color: #ff6b35;
	}

	.status.gray {
		color: #999;
	}

	.end-text {
		font-size: 24rpx;
		color: #000;
		font-weight: bold;
	}

	.time {
		font-size: 24rpx;
		color: #626262;
		float: right;
		margin-right: 40rpx;
	}

	.time2 {
		font-size: 24rpx;
		color: #626262;
		position: absolute;
		right: 40rpx;
		bottom: 70rpx;
	}

	.footer {
		padding: 20rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		background: #007aff;
		color: #fff;
		font-size: 32rpx;
	}

	.text {
		color: #000000;
		font-size: 24rpx;
		margin-left: 10rpx;
		font-weight: 400;
	}

	.image {
		width: 55rpx;
		height: 42rpx;
	}

	.custom-upload-btn {
		width: auto;
		margin-left: 0rpx;
		margin-right: 0rpx;
		margin-top: 24rpx;
		height: 244rpx;
		background: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
	}

	.preview-item {
		position: relative;
		width: auto;
		/* 宽度自动 */
		margin-left: 40rpx;
		margin-right: 40rpx;
		height: 244rpx;
		margin-top: 24rpx;
		/* 固定高度 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		overflow: hidden;
		/* 裁剪超出部分 */
		border-radius: 10rpx;
		/* 可选：圆角 */
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 24rpx;
	}
</style>