<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="100px">
			<el-form-item label="期次" prop="qi">
				<el-cascader v-model="queryParams.qi" placeholder="请选择期次" :props="prop" :options="options" @change="handleChange">
					<template slot-scope="{ node, data }">
					    <span v-if="data.children != null">{{ data.year+'年' }}</span>
					    <span v-else> {{ '第 '+data.year+' 期' }} </span>
					</template>
				</el-cascader>
			</el-form-item>
			<el-form-item label="执业单位" prop="DeptName">
				<el-input v-model="queryParams.DeptName" placeholder="请输入执业单位" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="姓名" prop="UserName">
				<el-input v-model="queryParams.UserName" placeholder="请输入姓名" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item label="身份证" prop="UserCord">
				<el-input v-model="queryParams.UserCord" placeholder="请输入身份证" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			
			
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="personList">
			<el-table-column label="序号" align="center">
				<template slot-scope="scope">
					<span>{{ handleTableIndex(scope.$index, queryParams) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="期次" align="center" prop="QiciYear" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.QiciYear }}年{{ ` 第${scope.row.QiCi}期` }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名" align="center" prop="UserName" />
			<el-table-column label="性别" align="center" prop="UserSex" />
			<el-table-column label="身份证号" align="center" prop="UserCord" width="170" />
			<el-table-column label="培训类别" align="center" prop="" width="100">
				<template>
					<span>监理工程师</span>
				</template>
			</el-table-column>
			<el-table-column label="证书编号" align="center" prop="Undef1" width="150" />
			<el-table-column label="执业单位" align="center" prop="DeptName" width="230" />
			<el-table-column label="证书有效期至" align="center" prop="Yxqz" width="120" />
			<el-table-column label="报名时间" align="center" prop="AddDate" width="120" />
			<el-table-column label="考试截止设置" align="center" prop="ksjzTime" width="170">
				<template slot-scope="scope">
					<!-- <el-tag :type="scope.row.FeeFlg == 0 ? 'danger' : 'success'" >{{
		  scope.row.FeeFlg == 0 ? "未收费" : "已收费"
		}}</el-tag> -->
					<span>
						{{scope.row.ksjzTime}}
					</span>
					<span>
						[
							<el-button @click="timeSetting(scope.row)" size="mini" type="text">设置</el-button>
						]
					</span>
					
				</template>
			</el-table-column>
			<el-table-column label="收费状态" align="center" width="150">
				<template slot-scope="scope">
					<span style="color: #F56C6C;">
						未交费
					</span>
					<span>
						[
							<el-button @click="handleTollChangeState(scope.row)" size="mini" type="text" >设置</el-button>
						]
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="handleDelectPerson(scope.row)" size="mini" type="text">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		
		<el-dialog title="设置" :visible.sync="timeShow" width="500px" >
			<span>
				<el-form ref="form" :model="form" label-width="160px">
					<el-form-item label="考试截止时间" prop="ksjzTime" :rules="{required:true,message:'请选择考试截止时间',trigger: ['blur', 'change']}">
						<el-date-picker clearable v-model="form.ksjzTime" type="date" value-format="yyyy-MM-dd"
							placeholder="请选择考试截止时间">
						</el-date-picker>
					</el-form-item>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="timeShow = false">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		listPerson,
		delectPerson,
		changeFeeFlg,
		settingExamDate
	} from "@/api/xiehui/jxjy/onpayment";
	import { searchQici } from "@/api/xiehui/jxjy/Training"
	
	import {
		handleTableIndex
	} from "@/utils/index";
	export default {
		name: "Person",
		data() {
			return {
				//当前选中的考试日期
				activeExam: null,
				examDia: false,
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// VIEW表格数据
				personList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					FeeFlg: 0,
					UserCord:null,
					UserName:null,
					QiciYear:null,
					QiCi:null,
					DeptName:null,
					qi:null
					// orderByColumn: "PersonId",
					// isAsc: "desc",
				},
				timeShow:false,
				form:{},
				options:[],
				prop:{
					label:"year",
					value:"year"
				}
				
			};
		},
		created() {
			this.qiciSearch()
			this.getList();
		},
		methods: {
			qiciSearch(){
				searchQici().then(res=>{
					this.options = res.data
				})
			},
			//选择期次
			handleChange(e){ 
				this.queryParams.QiciYear = e[0]
				this.queryParams.QiCi = e[1]
			},
			//删除人员
			handleDelectPerson(row) {
				this.$confirm("是否确定删除该条数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
				}).then((res) => {
					delectPerson(row.PersonId).then((res) => {
						this.$message({
							type: "success",
							message: "删除成功",
						});
						this.getList();
					});
				});
			},
			// 表单重置
			reset() {
				this.form = {
					ksjzTime:null,
				};
				this.resetForm("form");
			},
			//修改收费状态
			handleTollChangeState(row) {
				this.$confirm("您要改变当前收费状态吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then((res) => {
					changeFeeFlg({
						PersonId: row.PersonId,
						FeeFlg: 1,
					}).then((res) => {
						this.$message({
							type: "success",
							message: "修改成功",
						});
						this.getList();
					});
				});
			},

			handleTableIndex,
			/** 查询VIEW列表 */
			getList() {
				this.loading = true;
				listPerson(this.queryParams).then((response) => {
					this.personList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},

			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryParams.QiciYear = null
				this.queryParams.QiCi = null
				this.handleQuery();
			},

			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"system/person/export", {
						...this.queryParams,
					},
					`person_${new Date().getTime()}.xlsx`
				);
			},
			//考试截止时间设置
			timeSetting(row){
				this.reset()
				this.form = {...row}
				this.timeShow = true
			},
			//收费设置
			sfSetting(row){
				
			},
			confirm(){
				this.$refs["form"].validate(valid => {
					if (valid) {
						settingExamDate(this.form).then(res=>{
							this.$modal.msgSuccess("设置成功");
							this.timeShow = false;
							this.getList();
						})
					}
				});
			},
			changeYear(){
				if(this.queryParams.QiciYear == null){
					this.queryParams.QiCi = null
				}
			},
			
		},
	};
</script>