<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<text class="title">作业详情</text>
		</view>

		<!-- 作业详情表单 -->
		<view class="form-container">
			<view class="form-item">
				<text class="label">学生姓名</text>
				<input v-model="homeworkDetail.studentUsername" class="input disabled" disabled />
			</view>

			<view class="form-item">
				<text class="label">作业标题</text>
				<input v-model="homeworkDetail.homeworkTitle" class="input disabled" disabled />
			</view>

			<view class="form-item">
				<text class="label">作业内容</text>
				<textarea v-model="homeworkDetail.homeworkContent" class="textarea" :disabled="!canUpdate"></textarea>
			</view>

			<view class="form-item">
				<text class="label">作业评语</text>
				<textarea v-model="homeworkDetail.comment" class="textarea disabled" disabled></textarea>
			</view>

			<view class="form-item">
				<text class="label">作业分数</text>
				<input v-model="homeworkDetail.grade" class="input disabled" type="number" disabled />
			</view>

			<!-- 更新按钮 -->
			<button class="update-button" :class="{ disabled: !canUpdate }" @click="updateHomework"
				:disabled="!canUpdate">
				更新作业
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeworkId: null, // 作业 ID
				homeworkDetail: {
					studentUsername: '',
					homeworkTitle: '',
					homeworkContent: '',
					comment: '',
					grade: ''
				}, // 作业详情数据
				canUpdate: false // 是否允许更新
			};
		},
		onLoad(options) {
			this.homeworkId = options.id; // 接收传递过来的作业 ID
			this.fetchHomeworkDetail(); // 获取作业详情
		},
		methods: {
			// 获取作业详情
			fetchHomeworkDetail() {
				const token = uni.getStorageSync('token'); // 获取 token
				if (!token) {
					uni.showToast({
						title: '未登录，请重新登录',
						icon: 'none'
					});
					return;
				}

				uni.request({
					url: `${this.$baseUrl}/homework/studentHomework/${this.homeworkId}`, // 动态路径传递 ID
					method: 'GET',
					header: {
						Authorization: `Bearer ${token}`
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.homeworkDetail = res.data.data; // 假设返回的详情在 res.data.data
							this.canUpdate =
								this.homeworkDetail.comment === '未批阅' && this.homeworkDetail.grade === -
								1; // 设置是否允许更新
						} else {
							uni.showToast({
								title: res.data.message || '获取作业详情失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},

			// 更新作业
			updateHomework() {
				if (!this.canUpdate) {
					uni.showToast({
						title: '当前作业无法更新',
						icon: 'none'
					});
					return;
				}

				const token = uni.getStorageSync('token'); // 获取 token
				if (!token) {
					uni.showToast({
						title: '未登录，请重新登录',
						icon: 'none'
					});
					return;
				}

				uni.request({
					url: `${this.$baseUrl}/homework/studentHomework`, // 更新接口地址
					method: 'PUT',
					header: {
						Authorization: `Bearer ${token}`
					},
					data: {
						id: this.homeworkId,
						homeworkContent: this.homeworkDetail.homeworkContent // 仅发送作业内容
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '更新成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.message || '更新失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f9fa;
		height: 100vh;
	}

	.header {
		background-color: #007bff;
		padding: 15px;
		text-align: center;
	}

	.title {
		color: #fff;
		font-size: 24px;
		font-weight: bold;
	}

	.form-container {
		padding: 20px;
		background-color: #fff;
		margin: 15px;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

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

	.label {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
		color: #333;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.textarea {
		height: 100px;
		resize: none;
	}

	.input.disabled,
	.textarea.disabled {
		background-color: #f5f5f5;
		/* 灰色背景 */
		color: #999;
		/* 灰色字体 */
		cursor: not-allowed;
	}

	.update-button {
		width: 100%;
		padding: 15px;
		background-color: #007bff;
		color: #fff;
		font-size: 18px;
		border: none;
		border-radius: 5px;
		text-align: center;
	}

	.update-button.disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.update-button:hover:not(.disabled) {
		background-color: #0056b3;
	}
</style>