<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" :title="state.title" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<view class="page_content">
			<uni-forms ref="valiForm" class="forms_style" :model="state.formData" border labelWidth="140rpx" label-align="right">
				<uni-forms-item label="类型名称：">
					<uni-easyinput v-model="state.formData.honorTypeName" :maxlength="30" placeholder="请输入类型名称" />
				</uni-forms-item>
				<uni-forms-item label="审核机制：" style="align-items: center;">
					<uni-data-checkbox v-model="state.formData.reviewStatus" selectedColor="#2E64FA" selectedTextColor="#333333" :localdata="state.radioList"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="审核人：" v-if="state.formData.reviewStatus===0">
					<zxz-uni-data-select v-model="state.formData.auditPeople" collapse-tags :collapse-tags-num="1" filterable multiple dataKey="dataKey" dataValue="dataValue" :clear="false" :localdata="state.teacherData"></zxz-uni-data-select>
				</uni-forms-item>
				<uni-forms-item label-width="0px">
					<view class="forms_item_title">选择提交信息：</view>
					<view class="checkbox_list_scroll">
						<scroll-view scroll-y="true" scroll-top="0" :show-scrollbar="false" style="height: 100%;">
							<view class="checkbox_list_item" v-for="item in state.dictionaryData" :key="item.id">
								<view :class="['checkbx', {'is_checked':item.isChecked,'disabled':item.disabled}]" @click="checkedDictionary(item,item.isChecked,item.disabled)">
									<uni-icons v-if="item.isChecked" class="checkbx_icon" type="checkmarkempty"></uni-icons>
								</view>
								<view class="checkbx_content">
									<view class="label_type">
										<view class="checkbx_label">{{item.dictName}}</view>
										<view class="checkbx_type">{{DictTypeNumToName(item.dictType)}}</view>
									</view>
									<view class="checkbx_desc">{{item.dictContent}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="page_foot"><button class="btn_submit" type="primary" :loading="state.loading" @click="honorTypeConfirm">确认</button></view>
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import uniDataCheckbox from '@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue';
	import zxzUniDataSelect from '@/uni_modules/zxz-uni-data-select/components/zxz-uni-data-select/zxz-uni-data-select.vue';
	import {querySchoolAllTeacherData,baseDictLibListData,queryHonorDetailData,addHonorData,updateHonorData} from '@/reqApi/teacherHonor.js';
	import {
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const state = reactive({
		id:'',//荣誉类型id
		title:'',
		formData: {
			honorTypeName: '',//荣誉类型
			reviewStatus: 0,//审核机制
			auditPeople:[],//审核人
		},
		radioList:[{//审核机制
			text:'需审核',
			value:0
		},{
			text:'无审核',
			value:1
		}],
		teacherData:[],//审核人
		dictionaryData:[],//字典库
		loading:false
	})
	onLoad((option) => {
		state.id = option.id;
		state.title = state.id?'修改荣誉类型':'新建荣誉类型';
		uni.setStorageSync('isLoadHonorOverview', false);//返回列表页是否重新加载荣誉类型列表
		getSchoolAllTeacherData();//查询审核教师接口
		if(state.id){
			state.radioList = [{//审核机制
				text:'需审核',
				value:0,
				disable:true
			},{
				text:'无审核',
				value:1,
				disable:true
			}]
			getHonorDetailData()
		}else{
			state.radioList = [{//审核机制
				text:'需审核',
				value:0,
				disable:false
			},{
				text:'无审核',
				value:1,
				disable:false
			}]
			getBaseDictLibListData();//字典库
		}
	})
	//查询审核教师接口
	const getSchoolAllTeacherData = () => {
		querySchoolAllTeacherData({
			teacherName:''
		}).then(res=>{
			if(res.code == 200){
				const dataList = res?.data || [];
				state.teacherData = dataList.map(item=>({
					...item,
					dataKey:`${item.teacherName}（${item.userAccount}）`,
					dataValue:`${item.teacherId}——${item.teacherName}`
				}))
			}else{
				state.teacherData = [];
			}
		})
	}
	//字典库
	const getBaseDictLibListData = () => {
		baseDictLibListData().then(res=>{
			if(res.code == 200){
				const dataList = res?.data || [];
				state.dictionaryData = dataList.map(item=>({
					...item,
					isChecked:item.defaultStatus===0 && item.dictType!=2,//默认选中
					disabled:item.defaultStatus===0 && item.dictType!=2//默认不可取消勾选
				}))
			}else{
				state.dictionaryData = [];
			}
		})
	}
	//查询当前荣誉详情
	const getHonorDetailData = () => {
		queryHonorDetailData(state.id).then(res=>{
			if(res.code == 200){
				state.formData.honorTypeName = res?.data?.honorTypeName || '';
				state.formData.reviewStatus = res?.data?.reviewStatus || 0;
				const auditPeopleList = res?.data?.reviewTeacherData || [];
				state.formData.auditPeople = auditPeopleList.map(item=>`${item.reviewTeacherId}——${item.reviewTeacherName}`);//审核人
				//提交信息
				const selectDictData = res?.data?.selectDictData || [];//勾选的字典库
				state.dictionaryData = selectDictData.map(item=>{
					return {
						...item,
						isChecked:true,//默认选中
						disabled:true
					}
				})
			}
		})
	}
	// 类型切换
	const DictTypeNumToName = (num) => {
	    switch(Number(num)){
	        case 0:
	            return '日期'
	        case 1:
	            return '输入框'
	        case 2:
	            return '单选'
			default:
			    return ''	
	    }
	}
	//勾选提交信息
	const checkedDictionary = (item,isChecked,disabled) => {
		if(disabled) return false;
		item.isChecked = !isChecked;//选中状态
	}
	//提交
	const honorTypeConfirm = () => {
		let rulesList = {}
		if(state.formData.reviewStatus===0){
			rulesList = {
				honorTypeName: { rules: [{ required: true, errorMessage: '请输入类型名称' }] },
				auditPeople: { rules: [{ required: true, errorMessage: '请选择审核人' }] },
			}
		}else{
			rulesList = {
				honorTypeName: { rules: [{ required: true, errorMessage: '请输入类型名称' }] },
			}
		}
		for (const key in rulesList) {
			if (state.formData?.[key] === "" || state.formData?.[key] === null || state.formData?.[key]&&state.formData?.[key]?.length === 0) {
				const errorMessage = rulesList[key].rules[0].errorMessage;
				uni.showToast({
					title: errorMessage,
					icon: 'none'
				})
				return false
			}
		}
		state.loading = true;
		const selectData = state.dictionaryData.filter(item=>item.isChecked).map((items,index)=>({
			dictId: items.id,
			sortCode: index + 1
		}))
		const auditPeopleData = state.formData.auditPeople.map(item=>{
			const teacherData = item?.split('——') || [];
			return {
				reviewTeacherId: teacherData?.[0] || '',
				reviewTeacherName: teacherData?.[1] || ''
			}
		})
		let params =  {
			selectData: selectData,
			honorTypeName: state.formData.honorTypeName,
			reviewStatus:state.formData.reviewStatus,//审核机制
			reviewTeacherData: auditPeopleData
		}
		console.log(params,2323)
		if(state.id){
			params.id = state.id;
			updateHonorData(params).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '修改成功！',
						icon: 'none'
					})
					uni.setStorageSync('isLoadHonorOverview', true);//刷新荣誉列表
					GoBack();
				}
			}).finally(()=>{
				state.loading = false;
			})
		}else{//新建
			addHonorData(params).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '新建成功！',
						icon: 'none'
					})
					uni.setStorageSync('isLoadHonorOverview', true);//刷新荣誉列表
					GoBack();
				}else{
					
				}
			}).finally(()=>{
				state.loading = false;
			})
		}
	}
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
	}
	.page_content{
		height: calc(100% - 230rpx);
		overflow: hidden;
	}
	.forms_style{
		height: 100%;
		:deep(uni-form){
			height: 100%;
			overflow: hidden;
			> span{
				height: 100%;
				display: flex;
				width: 100%;
				flex-direction: column;
				overflow: hidden;
			}
		}
		:deep(.uni-forms-item){
			&:nth-child(2){
				.uni-forms-item__label{
					height: 56rpx;
				}
			}
				
			&:nth-child(4){
				flex:1;
				overflow: hidden;
				padding: 24rpx 0 0;
				.uni-forms-item__content{
					display: flex;
					overflow: hidden;
				}
			}
			.forms_item_title{
				width: 100%;
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.checkbox_list_scroll{
				flex: 1;
				height: calc(100% - 30rpx);;
			}
			.checkbox_list_item{
				display: flex;
				width: 100%;
				padding: 24rpx 0;
				border-bottom: 2rpx solid #F3F3F3;
				.checkbx{
					width: 32rpx;
					height: 32rpx;
					margin-top: 4rpx;
					background-color: #FFFFFF;
					border-radius: 4rpx;
					border: 2rpx solid #DCDFE6;
					margin-right: 16rpx;
					flex-shrink: 0;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					&.is_checked{
						background-color: #2E64FA;
						.checkbx_icon{
							color: #FFFFFF !important;
							font-size: 28rpx !important;
						}
					}
					&.disabled{//必选不可取消
						background-color: #F2F6FC;
						.checkbx_icon{
							color: #C0C4CC !important;
						}
					}
				}
				.checkbx_content{
					flex:1;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.label_type{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 40rpx;
						width: 100%;
						.checkbx_label{
							flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.checkbx_type{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.checkbx_desc{
						display: flex;
						width: 100%;
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
	.page_foot{
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		background-color:#FFFFFF;
		.btn_submit{
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #2E64FA !important;
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>