<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="216" :title="state.pageTitle" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="true" :tabBtns="state.tabBtns" rightWidth="0rpx" @GoBack="GoBack"></nav-bar>
		<view class="page_content">
			
		</view>
		<view class="page_foot">
			<button :class="['btn','btn_reject',{'disabled':state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 2)}]" type="primary" plain="true" :loading="state.loading" @click="HandleRejectHonor">驳回</button>
			<button :class="['btn','btn_pass',{'disabled':state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 1)}]" type="primary" :loading="state.loading" @click="HandlePassHonor">通过</button>
		</view>
		<customPopupDialog ref="popupDelDialogRef" title="驳回" dialogWidth="702" :isMaskClick="false" :showDialogClose="false" @DialogConfirm="DialogConfirm">
			<view class="dialog_content_input">
				<view class="dialog_desc">请填写驳回原因方便教师修改</view>
				<uni-easyinput type="textarea" v-model="state.rejectReason" :maxlength="200" :style="state.easyinputStyle" placeholderStyle="font-weight: 400;font-size: 28rpx;color: #999999;" placeholder="请输入驳回原因…"></uni-easyinput>
			</view>
		</customPopupDialog>
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import uvUpload from '@/uni_modules/uv-upload/components/uv-upload/uv-upload.vue';
	import customPopupDialog from '@/components/customPopupDialog.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import {updateReviewStatus,ChangeReviewStatus} from '@/reqApi/notification.js';
	import {
		reactive,
		ref,
		nextTick,
		onUnmounted
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const state = reactive({
		taskStatus:'',
		reviewStatus:'',
		taskTargetId:'',
		loading:false,
		pageTitle:'',
		tabBtns:[],
		rejectReason:'',//驳回原因
		easyinputStyle:{
			color: '#303133',
			borderColor: '#E9E9E9'
		}
	})
	const popupDelDialogRef = ref(null);
	onLoad((option) => {
		state.taskStatus = Number(option.taskStatus);//任务状态
		uni.removeStorageSync('isLoadReviewMaterialDetailList');//是否更新列表
		const detailData = uni.getStorageSync('reviewMaterialDetailData');//数据
		state.pageTitle = detailData?.targetName || '';
		state.reviewStatus = detailData?.reviewStatus || '';//审核状态
		state.taskTargetId = detailData?.taskTargetId || '';
		const fileList = detailData?.taskTargetFileVos || [];
		state.tabBtns = fileList.map(item=>({
			...item,
			label:item.fileName,
			value:item.id,
		}))
		console.log(detailData,32323)
		
	})
	onUnmounted(()=>{
		uni.removeStorageSync('reviewMaterialDetailData');//删除缓存数据
	})
	//通过
	const HandlePassHonor = () => {
		if(state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 1)){
			return false
		}
		HandleRejectOrPass(1)
	}
	//驳回
	const HandleRejectHonor = () => {
		if(state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 2)){
			return false
		}
		popupDelDialogRef.value.OpenDialog();
	}
	//驳回 确定按钮
	const DialogConfirm = () => {
		if(state.rejectReason == '' || state.rejectReason == null){
			uni.showToast({
				title: '请填写驳回原因！',
				icon: 'none'
			})
			return false
		}
		HandleRejectOrPass(2)
	}
	const HandleRejectOrPass = (status) => {
		const params = {
			taskTargetId: state.taskTargetId,
			reviewStatus: status
		}
		if(status == 2){
			params.reviewContent = state.rejectReason;
		}
		const apiFn = state.reviewStatus === 0 ? updateReviewStatus : ChangeReviewStatus;
		apiFn(params).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title: status == 2?'驳回成功！':'审核通过！',
					icon: 'none'
				})
				uni.setStorageSync('isLoadReviewMaterialDetailList', true);//刷新荣誉审核列表
				GoBack();
			}
		})
	}
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
	}
	.page_content{
		height: calc(100% - 390rpx);
		overflow: auto;
	}
	.page_foot{
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		padding: 40rpx 24rpx 38rpx 24rpx;
		box-shadow: inset 0px 2rpx 0px 0px #F3F3F3;
		background-color:#FFFFFF;
		gap: 30rpx;
		display: flex;
		.btn{
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			font-weight: 500;
			font-size: 28rpx;
			flex: 1;
			box-sizing: border-box;
		}
		.btn_reject{
			border: 2rpx solid #F56C6C;
			color: #F56C6C;
			&.disabled{
				border: 2rpx solid #C0C4CC;
				color: #C0C4CC;
			}
		}
		.btn_pass{
			background-color: #2E64FA !important;
			color: #FFFFFF;
			&.disabled{
				background-color: #F3F3F3 !important;
				color: #C0C4CC;
			}
		}
	}
	.dialog_content_input{
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.dialog_desc{
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
		}
		:deep(.uni-easyinput){
			margin-top: 20rpx;
			font-size: 28rpx;
			.is-input-border{
				border-radius: 8rpx;
				border-color: #E9E9E9 !important;
			}
			.uni-easyinput__content-textarea{
				height: 400rpx;
				min-height: 400rpx;
				font-size: 28rpx;
				margin:20rpx 24rpx 20rpx 14rpx;
			}
			.input-padding{
				padding-left: 10rpx;
			}
		}
	}
</style>