<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">
				<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="200" />
			<el-table-column label="培训类别" align="center" prop="" width="150">
				<template>
					<span>监理工程师</span>
				</template>
			</el-table-column>
			<el-table-column label="证书编号" align="center" prop="zgzsh" width="200" />
			<el-table-column label="执业单位" align="center" prop="deptName" width="230" />
			<!-- <el-table-column label="证书有效期至" align="center" prop="Yxqz" width="200" /> -->
			<el-table-column label="报名时间" align="center" prop="addDate" width="150" >
				<template slot-scope="scope">
					{{parseTime(scope.row.addDate)}}
				</template>
			</el-table-column>
			<el-table-column label="收费设置" align="center" width="150"> 
				<template slot-scope="scope">
					<el-tag :type="'danger'">已退费</el-tag>
				</template>
			</el-table-column>  
			<!-- <el-table-column label="操作">
				<template slot-scope="scope">
					<el-button 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="examDia" width="600px" :before-close=" () => { examDia = false; } ">
			<span slot="footer" class="dialog-footer">
				<el-button @click="examDia = false">取 消</el-button>
				<el-button type="primary" @click="">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// import {
	// 	listPerson
	// } from "@/api/xiehui/jxjy/onpayment";
	import { searchQici } from "@/api/xiehui/jxjy/Training"
	import {
		listTuifeisq,
	} from "@/api/xiehui/jxjy/Tuifeisq";
	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,
					shflg:1,
					UserName:null,
					UserCord:null,
					QiciYear:null,
					QiCi:null,
					DeptName:null,
					qi:null,
				},
				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]
			},
			//修改收费状态
			handleTollChangeState(row) {
				this.$confirm("您要改变当前收费状态吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				});
			},
			//设置考试截止时间
			handleExamDate() {},

			handleTableIndex,
			/** 查询VIEW列表 */
			getList() {
				this.loading = true;
				listTuifeisq(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.QiCi = null
				this.queryParams.QiciYear = null
				this.handleQuery();
			},

			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"system/person/export", {
						...this.queryParams,
					},
					`person_${new Date().getTime()}.xlsx`
				);
			},
		},
	};
</script>