<template>
	<div>
		<el-row style="width: 1364px;">
			<el-col :span="10" style="width: 600px;">
				<el-form :inline="true"  label-width="75px">
					<el-form-item label="姓名" prop="phone">
						<el-input placeholder="请输入姓名" v-model="searchInfo.nickname" type="text" style="width: 160px;" clearable></el-input>
					</el-form-item>
			
					<el-form-item label="身份证" prop="cardId">
						<el-input placeholder="请输入身份证" v-model="searchInfo.cardId" type="text"  style="width: 160px;" clearable></el-input>
					</el-form-item>
					
					<el-form-item label="选择分期" prop="plan_id">
						<DropSearch type="trainPlan" @select="okTrainPlan" style="width: 160px;"></DropSearch>
					</el-form-item>
					
					<el-form-item label="报考岗位" prop="courseName">
						<el-input placeholder="请输入报考岗位" v-model="searchInfo.courseName" type="text" style="width: 160px;"  clearable></el-input>
					</el-form-item>
					
					<el-form-item >
						<el-button type="primary" class="ml20" @click="onSubmit"> 查询</el-button>
					</el-form-item>
				</el-form>	
			</el-col>
			
			<el-col :span="2" style="width: 100px;">
				<p class="p5">
					<el-button @click="addUserToExam" type="primary" style="width: 80px;">新增 >></el-button>
				</p>
				<p class="p5">
					<el-button @click="delUserFromExam" type="primary" style="width: 80px;"><< 移除</el-button>
				</p>
										
				<p class="p5" v-if="examId==0">
					<el-button @click="addPlanExam" type="primary" style="width: 80px;">新增场次</el-button>
					
				</p>
				
			</el-col>
			
			<el-col :span="12"  style=" width: 650px;">

				<el-form :inline="true" class="demo-form-inline" label-width="90px">
					<el-form-item label="考试分期"  v-if="examId==0">
						<DropSearch type="trainPlan" @select="okFilterTrainPlan" style="width: 160px;"></DropSearch>
					</el-form-item>
					
					<el-form-item label="考试场次" v-else>
						<DropSearch type="trainExam" :param="{'planId': filterInfo.planId}" 
							style="width: 160px;" @select="okTrainExam"></DropSearch>
					</el-form-item>
					
						
					<el-form-item label="身份证" prop="cardId">
						<el-input placeholder="请输入身份证" v-model="filterInfo.cardId" type="text"  style="width: 160px;" clearable></el-input>
					</el-form-item>	
					
					<el-form-item label="姓名" prop="phone">
						<el-input placeholder="请输入姓名" v-model="filterInfo.nickname" type="text" style="width: 120px;" clearable></el-input>
					</el-form-item>	
					
					<el-form-item label="报考岗位" prop="courseName"  v-if="examId>0">
						<el-input placeholder="请输入报考岗位" v-model="filterInfo.courseName" type="text" style="width: 130px;"  clearable></el-input>
					</el-form-item>
					
					<el-form-item class="ml40" v-if="examId ==0">
						<el-button type="primary" @click="onSubmitExam()">查询</el-button>
						<el-button  type="primary" @click="startPrint">生成准考证</el-button>
						<el-button  type="primary" @click="exportUser">导出excel</el-button>
					</el-form-item>
						
					<el-form-item  v-else>
						<el-button  type="primary" @click="onSubmitUser">查询</el-button>
						<el-button @click="examId=0" type="primary">返回列表</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	
		<el-row style="width: 1364px;">
			<el-col :span="12" style="width: 650px;">
				<UnDistribution  
					:data="tableData"  
					:checkboxId="checkboxUnconfirm"
					:planName="searchInfo.planName" 
					@handleSelectAll="handleSelectAll" 
					@handleSelectNull="handleSelectNull">
				</UnDistribution>
			</el-col>
			
			<el-col :span="12"  style="margin-left:10px; min-width: 650px;">
				<div v-if="examId>0">
					<InDistribution 
					:data="userList"   	
					:checkboxId="checkboxConfirm"
					@handleSelectAll="handleSelectAll" 
					@handleSelectNull="handleSelectNull"></InDistribution>
				</div>
				<div v-else>
					<ITrainExam :data="examList" 
						:checkboxId="checkboxExam"
						@selectExam="okTrainExam" 
						:filterSeed="filterSeed" 
						:planId="filterInfo.planId"
						@handleSelectAll="handleSelectAll" 
						@handleSelectNull="handleSelectNull"
						> 
					</ITrainExam>
				</div>
			</el-col>

		</el-row>
		
		<el-dialog :title="'新增场次【'+form.planName+'】'" center :visible.sync="dialogFormVisible"  width="560px" >
		  <el-form :model="form" :rules="rules" label-width="160px" ref="elAdd">
		    <el-form-item  label="考试场次" prop="name" >
		      <el-input  v-model="form.name" type="text"  style="width:220px"></el-input>
		    </el-form-item>
			<el-form-item  label="开始时间" prop="startAt">
				<el-date-picker 
							v-model="form.startAt"
							value-format="yyyy-MM-dd HH:mm:ss"
							type="datetime"
							align="left"
				></el-date-picker>
			</el-form-item>
			
		    <el-form-item  label="结束时间" prop="endAt">
		      <el-date-picker
		      			v-model="form.endAt"
		      			value-format="yyyy-MM-dd HH:mm:ss"
		      			type="datetime"
		      			align="left"
		      ></el-date-picker>
		    </el-form-item>
			<el-form-item  label="考场地址" prop="address" >
			  <el-input v-model="form.address" style="width:220px" type="textarea"></el-input>
			</el-form-item>
		  </el-form>
		  <div class="dialog-footer" slot="footer">
		    <el-button @click="dialogFormVisible=false">取 消</el-button>
		    <el-button @click="doAddTrainPlan" type="primary">确 定</el-button>
		  </div>
		</el-dialog>
	
	</div>
</template>

<script>
	import UnDistribution from "./components/UnDistribution.vue";
	import InDistribution from "./components/InDistribution.vue";
	import ITrainExam from "./components/ITrainExam.vue";
	import infoList from "@/mixins/infoList";
	import {postData,getUserApplyUnConfirmList} from "@/api/xinpei.js";

	import DropSearch from '@/components/select/DropSearch.vue';
	export default {
		name: "Api",
		components: {
			UnDistribution,
			InDistribution,
			ITrainExam,
			DropSearch
		},
		mixins:[infoList],
		data() {
			return {
				listApi: getUserApplyUnConfirmList,
				dialogFormVisible: false,
				examId: 0,
				planId: 0,
				planName:'',
				checkboxExam:0,
				checkboxUnconfirm:0,
				checkboxConfirm:0,
				allUnconfirmList:[],
				searchInfo:{
					nickname:'',
					cardId:'',
					planId:0,
					planName:'',
					courseName:''
				},
				filterSeed:0,
				filterInfo:{
					planId:0,
					filterInfo:'',
					nickname:'',
					cardId:''
				},
				examList:[],
				allUserList:[],
				userList: [],
				seatSet: new Set(),
				form: {
				  id:0,
				  name:'',
						span:6,
						icon: "i1",
						orderId:1,
				  content:'',
				},
				rules: {
				  name: [{ required: true, message: "请输入考试场次", trigger: "blur" }],
				  address: [ { required: true, message: "请输入考试地址", trigger: "blur" }],
						startAt: [{ required: true, message: "请输入开始时间", trigger: "blur" }],
						endAt: [ { required: true, message: "请输入结束时间", trigger: "blur" }],
				}
			}
		},
		// watch: {
		// 	searchInfo:{
		// 		handler(new_value,old_value){
		// 			this.onSubmit()
		// 	    },
		// 		deep: true,
		// 	},
		// 	filterInfo:{
		// 		handler(new_value,old_value){
		// 			this.filterUserList()
		// 	    },
		// 		deep: true,
		// 	}
		// },
		methods: {
			onSubmit(){
				this.filterUnconfirmList()
			},
			onSubmitUser(){
				this.filterUserList();
			},
			addPlanExam(){
				if( !this.filterInfo.planId ){
					this.$message.errorMsg("请先选择分期", 3)
					return ;
				}
				this.form.planId = this.filterInfo.planId
				this.form.planName = this.filterInfo.name
				this.dialogFormVisible = true
			},
			doAddTrainPlan(){
				let param = {planId: this.filterInfo.planId}
				 this.$refs.elAdd.validate(async (valid) => {
					if (!valid) return;
					Object.assign( param, this.form ) 
					postData("addTrainExam", param).then( res => {
						if( res.code == 200){
						  this.$message.successMsg("新增成功", 1)
						  this.dialogFormVisible = false
						  this.getTableData()
						}
					});
				})
			},
			startPrint(){
				let examIds = []
				for( let i in this.examList){
					if( this.examList[i]._selected ){
						examIds.push( this.examList[i].examId);
					}
				}
				if( examIds.length ==0 || examIds.length > 1){
					this.$message.successMsg("一次只能生成一场", 3);
					return;
				}
				let param = {examId: examIds[0]}
				postData("makeTrainCert", param).then(res => {
					if (res.code == 200) {
						this.$message.successMsg("已经提交，生成需要时间，请先处理别的", 3);
					}
				})
			},
			doexportUser( filename, list ){
				list = list.sort( (i,j)=> {
					return 0+i.seat > 0+j.seat?1:-1;
				})
				import('@/vendor/Export2Excel').then(excel => {
					const tHeader = ['姓名', '性别', '身份证', '手机', '学历','工作单位', '岗位', '开始培训时间','培训结束时间', '学时', '座位号'];
					const data = list.map( item =>{
						return [ item.nickname,item.gender, item.cardId,item.phone, item.education,
							item.company, item.courseName, item.startDate, item.endDate, `${item.getXs/10}/${item.totalXs/10}`, item.seat
						]
					});
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: filename,
						autoWidth: true,
						bookType: "xlsx"
					})
				})
				
			},
			exportUser(){
				for( let i in this.examList){
					let exam = this.examList[i];
					if( !exam._selected ) continue;
					postData("GetVExamUserList", {examId: exam.examId}).then(res => {
						if (res.code == 200) {
							this.$message.successMsg("开始生成excel", 3);
							this.doexportUser( exam.name, res.data||[] )
						}
					})
				}
			},
			printApplyCert( row ){
				let param = {applyId: row.applyId}
				postData("makeTrainCertUser", param).then(res => {
					if (res.code == 200) {
						this.$message.successMsg("单独生成完成", 2);
						row.certificateUrl = res.data;
					}
				})
			},
			okTrainPlan(item) {
				this.searchInfo.planId = item.plan_id||0;
				this.searchInfo.planName = item.name
				this.loadUnConfirmList()
			},
			okTrainExam(item) {
				this.examId = item.examId
				this.loadData()
			},
			okFilterTrainPlan( item ){
				this.filterInfo.planId = item.plan_id||0;
				this.filterInfo.name = item.name;
				this.loadExam( );
			},
			onSubmitExam(){
				this.loadExam( );
			},
			addUserToExam(){
				let planId = this.searchInfo.planId;
				let examId = this.examId;
				if( !this.examId ){
					this.$message.errorMsg("还未选择考次", 3)
					return;
				}
				if( this.searchInfo.planId != this.filterInfo.planId ){
					this.$message.errorMsg("两个考试分期不匹配", 3)
					return;
				}
				let set = new Set();
				let list  = [];
				let count  = 0
				for( let i in this.tableData){
					let item = this.tableData[i]
					if( item._selected ){
						item.seat = this.getSeat()
						list.push( {applyId: item.applyId, seat: item.seat})
					}
				}
				postData("addTrainExamUserList", {examId, planId, list}).then(res => {
					if (res.code == 200) {
						this.loadData()
						this.getTableData()
					}
				})
			},
			delUserFromExam(){
				if( !this.examId ){
					this.$message.errorMsg("还未选择考次", 3)
					return;
				}
				let list = []
				for( let i in this.userList){
					let item = this.userList[i]
					if( item._selected ){
						list.push(item.applyId)
					}
				}
				postData("DelTrainExamUserList", {examId: this.examId, list}).then(res => {
					if (res.code == 200) {
						this.loadData()
						this.getTableData()
					}
				})
				
				
			},
			getSeat(){
				for( let i=1; ;i++){
					if( !this.seatSet.has(i)){
						this.seatSet.add(i)
						return i
					}
				}
			},

			rmUserListItem( item){
				this.allUserList = this.allUserList.filter( v=>{
					return item.applyId != v.applyId
				})
				this.filterUserList();
			},
			addUserListItem( item ){
				this.allUserList.unshift( item );
				this.userList.unshift( item );
			},
			filterUnconfirmList(){
				let {courseName, cardId, nickname} = this.searchInfo;
				this.tableData = this.allUnconfirmList.filter( item=>{
					if( nickname && item.nickname.indexOf( nickname)==-1) return false
					if( cardId && item.cardId.indexOf( cardId)==-1) return false
					if( courseName && item.courseName.indexOf( courseName)==-1) return false
					return true
				})
				this.checkboxUnconfirm = Math.random()
			},
			filterUserList(){
				let {nickname, cardId, courseName} = this.filterInfo;
				this.userList = this.allUserList.filter( item=>{
					if( nickname && item.nickname.indexOf( nickname)==-1) return false
					if( cardId && item.cardId.indexOf( cardId)==-1) return false
					if( courseName && item.courseName.indexOf( courseName)==-1) return false
					return true
				})
				this.userList = this.userList.map( v=>{
					v._selected = false;
					return v
				})
				// 初始化座位
				this.seatSet = new Set()
				for( let i in this.allUserList){
					this.seatSet.add( +this.allUserList[i].seat  )
				}
				this.checkboxConfirm = Math.random()
				
			},
			loadData() {
				let param = {
					examId: this.examId
				};
				postData("getTrainExamUserList", param).then(res => {
					if (res.code == 200) {
						this.allUserList = res.data
						this.filterUserList()
					}
				})
			},
			loadExam() {
				let param = {
					planId: this.filterInfo.planId
				};
				postData("getTrainExamList", param).then(res => {
					if (res.code == 200) {
						this.examList = res.data.map( v=>{
							v._selected = false
							return v
						})
						this.checkboxExam = Math.random()
					}
				})
				
			},
			loadUnConfirmList(){	
				let param = {
					planId: this.searchInfo.planId,
					page: 1,
					size: 1000
				};
				postData("getUserApplyUnConfirmList", param).then(res => {
					if (res.code == 200) {
						this.allUnconfirmList = res.data.list.map( v=>{
							v._selected = false
							return v
						})
						this.filterUnconfirmList()
					}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}

	.el-checkbox.returnCheck .el-checkbox__input+.el-checkbox__label,
	.el-checkbox.returnCheck .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #909399;
		font: 12px "Helvetica Neue";
		font-weight: bold;
	}

	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.1);
	}
</style>
