<script setup>
import { imgLocal  } from '@/utils/common.js';
	import wmWatermark from "@/components/wm-watermark/wm-watermark.vue"
	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
	import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
	import {
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue';

	const CACHE_KEY = 'score_guandong_info';

	const data = reactive({
		bgImg:'',
		form: {
			subject: '文科',
			avatar: '',
			name: '大王',
			idNumber: '',
			examNumber: '123456789',
			chinese: '116',
			math: '104',
			english: '104',
			history: '104',
			politics: '104',
			geography: '104',
			total: '104',
			undergraduateTotal: '104',
			ranking: '104',
			technicalTotal: '104',
			technicalRanking: '1455',
			time: '2025-6-25'
		}
	});

	const total = computed(() => {
		const sum = Number(data.form.chinese || 0) + Number(data.form.math || 0) + Number(data.form.english || 0) +
			Number(data.form.history || 0) + Number(data.form.politics || 0) + Number(data.form.geography || 0);
		return sum || '';
	});

	function getSubjectLabels(subject) {
		const isScience = subject === '理科'
		return {
			subject3: isScience ? '物理' : '历史',
			subject4: isScience ? '化学' : '思想政治',
			subject5: isScience ? '生物学' : '地理',
			trackName: isScience ? '物理' : '历史',
		}
	}

	const subjectLabels = computed(() => getSubjectLabels(data.form.subject || '文科'))

	const editDialog = reactive({
		show: false,
		data: {}
	});

	const editSubjectLabels = computed(() => getSubjectLabels(editDialog.data.subject || '文科'))

	onMounted(async() => {
		
		data.bgImg= await imgLocal.getLocalImage('other/score/guandong/guandongbg.png');
		loadCache();
	});

	function loadCache() {
		const cache = uni.getStorageSync(CACHE_KEY);
		if (cache) {
			data.form = {
				...data.form,
				...cache,
				subject: cache.subject || '文科'
			};
		}
	}

	function saveCache() {
		uni.setStorageSync(CACHE_KEY, data.form);
	}

	function openEditDialog() {
		editDialog.data = JSON.parse(JSON.stringify(data.form));
		if (!editDialog.data.subject) {
			editDialog.data.subject = '文科';
		}
		editDialog.show = true;
	}

	function saveEdit() {
		data.form = {
			...data.form,
			...editDialog.data
		};
		saveCache();
		editDialog.show = false;
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
	}

	const editTotal = computed(() => {
		const sum = Number(editDialog.data.chinese || 0) + Number(editDialog.data.math || 0) + Number(editDialog.data
			.english || 0) + Number(editDialog.data.history || 0) + Number(editDialog.data.politics || 0) + Number(
			editDialog.data.geography || 0);
		return sum || '';
	});
	function back(){
		uni.navigateBack()
	}
	function onChangeStartDate(e){
		editDialog.data.time=e
		console.log(e)
	}
	function getTime(times,status){
		let list=times.split('-')
		if(status){
			return list[0]+'年'
		}else{
			return list[0]+'年'+list[1]+'月'
		}
	}
</script>

<template>
	<wmWatermark :text="'广东省教育考试院'+data.form.time"/>
		<view v-if="$isVip()" >
			<watermark dark="light" source="uni_alipay_other_score" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_score')">
				<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
			</liu-drag-button>
		</view>
	<view class="container">
		<view class="headerBox" :style="{'padding-top':$systemInfo.statusBarHeight*2+'rpx'}">
			<view class="header" >
				<view class="left" @click="back()">
					<image src="/static/image/other/score/guandong/leftIcon.png" mode=""></image>
				</view>
				<view class="center">
					考试成绩结果
				</view>
				<view class="right">
					<image src="/static/image/other/score/guandong/rightIcon.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<view class="" :style="{height:$systemInfo.statusBarHeight*2+88+'rpx'}">
			
		</view>
		<view class="content">
			<view class="title">
				{{ getTime(data.form.time,0) }}
			</view>
			<view class="dec">
				{{ getTime(data.form.time,1) }}广东省普通高等学校招生全国统一考试
			</view>
		</view>
		<image class="bgimg" :src="data.bgImg" mode="widthFix"></image>
		<view class="list" @click="openEditDialog">
			<view class="item">
				<view class="text1">
					姓名
				</view>
				<view class="text2">
					{{data.form.name}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					考生号
				</view>
				<view class="text2">
					{{data.form.examNumber}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					语文
				</view>
				<view class="text2">
					{{data.form.chinese}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					数学
				</view>
				<view class="text2">
					{{data.form.math}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					英语
				</view>
				<view class="text2">
					{{data.form.english}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					{{ subjectLabels.subject3 }}
				</view>
				<view class="text2">
					{{data.form.history}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					{{ subjectLabels.subject4 }}
				</view>
				<view class="text2">
					{{data.form.politics}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					{{ subjectLabels.subject5 }}
				</view>
				<view class="text2">
					{{data.form.geography}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					普通类 ({{ subjectLabels.trackName }})总分
				</view>
				<view class="text2">
					{{data.form.total}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					本科普通类 ({{ subjectLabels.trackName }})总分 (含加分)
				</view>
				<view class="text2">
					{{data.form.undergraduateTotal}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					排位
				</view>
				<view class="text2">
					{{data.form.ranking}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					专科普通类 ({{ subjectLabels.trackName }})总分 (含加分)
				</view>
				<view class="text2">
					{{data.form.technicalTotal}}
				</view>
			</view>
			<view class="item">
				<view class="text1">
					排位
				</view>
				<view class="text2">
					{{data.form.technicalRanking}}
				</view>
			</view>
		</view>
	</view>

	<safeBottom bgColor="#F3F8FB" />

	<!-- 编辑弹窗 -->
	<view v-if="editDialog.show" class="editDialog">
		<view class="editDialog_bg">
			<view class="editDialog_header">
				<text class="title">编辑成绩信息</text>
			</view>
			<view class="editDialog_body">
				<view class="formItem">
					<text>科目</text>
					<view class="subject-options">
						<view class="subject-option" :class="{ active: editDialog.data.subject === '文科' }"
							@click="editDialog.data.subject = '文科'">文科</view>
						<view class="subject-option" :class="{ active: editDialog.data.subject === '理科' }"
							@click="editDialog.data.subject = '理科'">理科</view>
					</view>
				</view>
				<view class="formItem">
					<text>姓名</text>
					<input v-model="editDialog.data.name" placeholder="请输入姓名" />
				</view>
				<view class="formItem">
					<text>证件号</text>
					<input v-model="editDialog.data.idNumber" placeholder="请输入证件号" />
				</view>
				<view class="formItem">
					<text>考生号</text>
					<input v-model="editDialog.data.examNumber" placeholder="请输入考生号" />
				</view>
				<view class="formItem">
					<text>语文</text>
					<input v-model="editDialog.data.chinese" type="digit" placeholder="请输入语文成绩" />
				</view>
				<view class="formItem">
					<text>数学</text>
					<input v-model="editDialog.data.math" type="digit" placeholder="请输入数学成绩" />
				</view>
				<view class="formItem">
					<text>英语</text>
					<input v-model="editDialog.data.english" type="digit" placeholder="请输入英语成绩" />
				</view>
				<view class="formItem">
					<text>{{ editSubjectLabels.subject3 }}</text>
					<input v-model="editDialog.data.history" type="digit" :placeholder="'请输入' + editSubjectLabels.subject3 + '成绩'" />
				</view>
				<view class="formItem">
					<text>{{ editSubjectLabels.subject4 }}</text>
					<input v-model="editDialog.data.politics" type="digit" :placeholder="'请输入' + editSubjectLabels.subject4 + '成绩'" />
				</view>
				<view class="formItem">
					<text>{{ editSubjectLabels.subject5 }}</text>
					<input v-model="editDialog.data.geography" type="digit" :placeholder="'请输入' + editSubjectLabels.subject5 + '成绩'" />
				</view>
				<view class="formItem">
					<text>普通类 ({{ editSubjectLabels.trackName }})总分</text>
					<text style="flex:1;text-align:right;font-size:28rpx;color:#333;">{{editTotal}}</text>
				</view>
				<view class="formItem">
					<text>本科普通类 ({{ editSubjectLabels.trackName }})总分 (含加分)</text>
					<input v-model="editDialog.data.undergraduateTotal" type="digit" placeholder="请输入本科总分" />
				</view>
				<view class="formItem">
					<text>排位</text>
					<input v-model="editDialog.data.ranking" type="digit" placeholder="请输入排位" />
				</view>
				<view class="formItem">
					<text>专科普通类 ({{ editSubjectLabels.trackName }})总分 (含加分)</text>
					<input v-model="editDialog.data.technicalTotal" type="digit" placeholder="请输入专科总分" />
				</view>
				<view class="formItem">
					<text>排位</text>
					<input v-model="editDialog.data.technicalRanking" type="digit" placeholder="请输入排位" />
				</view>
				<view class="formItem">
					<text>时间</text>
					<view style="width:100%;">
						<DateTimePicker :defaultDate="editDialog.data.time"  :mode="1" @onChange="onChangeStartDate" />
					</view>
				</view>
			</view>
			<view class="popup-footer">
				<view class="btn-cancel" @click="editDialog.show=false">取消</view>
				<view class="btn-save" @click="saveEdit">保存</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	page{
		background-color: #F3F8FB;
	}
	* {
		box-sizing: border-box;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.items-start {
		display: flex;
		align-items: flex-start;
	}

	.items-end {
		display: flex;
		align-items: flex-end;
	}

	.items-center {
		display: flex;
		align-items: center;
	}

	.no-shrink {
		flex-shrink: 0;
	}

	/* 编辑弹窗样式 */
	.editDialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.editDialog_bg {
		width: 680rpx;
		max-height: 80vh;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.editDialog_header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.editDialog_body {
		padding: 20rpx 30rpx;
		overflow-y: auto;
		max-height: 60vh;
	}

	.formItem {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		text {
			width: 200rpx;
			font-size: 28rpx;
			color: #666;
			flex-shrink: 0;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			text-align: right;
		}

		.subject-options {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			gap: 20rpx;
		}

		.subject-option {
			padding: 8rpx 32rpx;
			font-size: 26rpx;
			color: #666;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;

			&.active {
				color: #187AFF;
				border-color: #187AFF;
				background-color: rgba(24, 122, 255, 0.08);
			}
		}
	}

	.popup-footer {
		display: flex;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		gap: 20rpx;

		.btn-cancel,
		.btn-save {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			font-size: 28rpx;
		}

		.btn-cancel {
			background-color: #f5f5f5;
			color: #666;
		}

		.btn-save {
			background-color: #187AFF;
			color: #fff;
		}
	}
</style>
<style lang="scss" scoped>
	.headerBox{
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
	.header{
		
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left{
			width: 216rpx;
		height: 88rpx;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 30rpx;
				margin-top:46rpx;
			}
		}
		.center{
			font-weight: 400;
			font-size: 19px;
			color: #FFFFFF;
			padding-top: 30rpx;
		}
		
		.right{
			width: 216rpx;
			display: flex;
			align-items: center;
			image{
				width: 200rpx;
				height: 64rpx;
			}
		}
	}
	.bgimg{
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
	}
	.content{
		position: relative;
		z-index: 9;
		padding-left: 40rpx;
		margin-top: 100rpx;
		.title{
			font-weight: 400;
			font-size: 25px;
			color: #FFFFFF;
		}
		.dec{
			font-weight: 400;
			font-size: 16px;
			color: #FFFFFF;
			white-space: nowrap;
		}
	}
	.list{
		
		position: relative;
		z-index: 9;
		margin: 72rpx 40rpx 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
		border-radius: 12px 12px 12px 12px;
		padding-left: 32rpx;
		.item{
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F2F2F2;
			.text1{
				font-weight: 400;
				font-size: 12px;
				color: #898D96;
			}
			.text2{
				font-weight: 400;
				font-size: 12px;
				color: #1A1A1A;
				margin-right: 28rpx;
			}
		}
	}
</style>