<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="120px">
			<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="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 label="订单号" prop="ZNum">
				<el-input v-model="queryParams.ZNum" placeholder="请输入订单号" clearable />
			</el-form-item>
			<el-form-item label="交易号" prop="transactionId">
				<el-input v-model="queryParams.transactionId" placeholder="请输入交易号" clearable />
			</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="150">
				<template>
					<span>监理工程师</span>
				</template>
			</el-table-column>
			<el-table-column label="证书编号" align="center" prop="zgzsh" width="120" />
			<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="FeeShenheTime" width="120" />
			<el-table-column label="考试截止" align="center" width="150"> 
				<template slot-scope="scope">
					<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 >
						已交费
					</span>
					<span>
						[
							<el-button @click="handleTollChangeState(scope.row)" size="mini" type="text" >设置</el-button>
						]
					</span>
				</template>
			</el-table-column>
			<el-table-column label="订单号" align="center" prop="ZNum" width="200" />
			<el-table-column label="交易号" align="center" prop="transactionId" width="200" />
			<el-table-column label="交费总额" align="center" prop="TotalFee" >
				<template slot-scope="scope">
					{{scope.row.TotalFee/100}}
				</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="500px" >
			<span>
				<el-form ref="form" :model="activeExam" label-width="160px">
					<el-form-item label="考试截止时间" prop="ksjzTime" :rules="{required:true,message:'请选择考试截止时间',trigger: ['blur', 'change']}">
						<el-date-picker clearable v-model="activeExam.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="examDia = false">取 消</el-button>
				<el-button type="primary" @click="handleExamDate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listPerson,
		settingExamDate,
		changeFeeFlg,
	} from "@/api/xiehui/jxjy/onpayment"; 
	import { searchQici } from "@/api/xiehui/jxjy/Training"
	import {
		handleTableIndex
	} from "@/utils/index";
	export default {
		name: "Person",
		data() {
			return {
				examDia: false,
				activeExam: {},
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// VIEW表格数据
				personList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					FeeFlg: 1,
					UserName:null,
					UserCord:null,
					QiciYear:null,
					QiCi:null,
					ZNum:null,
					transactionId:null,
					qi:null
					// orderByColumn: "PersonId",
					// isAsc: "desc",
				},
				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]
			},
			handleTableIndex,
			//考试截止日期设置
			handleExamDate(row) {
				settingExamDate({
					PersonId: this.activeExam.PersonId,
					ksjzTime: this.activeExam.ksjzTime,
				}).then((res) => {
					this.$message({
						type: "success",
						message: "修改成功",
					});
					this.examDia = false;
					this.getList();
				});
			}, 
			handleTollChangeState(row){ 
				this.$confirm("您要改变当前收费状态吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then((res) => {
					changeFeeFlg({
						PersonId: row.PersonId,
						FeeFlg: 0,
					}).then((res) => {
						this.$message({
							type: "success",
							message: "修改成功",
						});
						this.getList();
					});
				}); 
			},
			/** 查询VIEW列表 */
			getList() {
				this.loading = true;
				listPerson(this.queryParams).then((response) => {
					this.personList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 表单重置
			reset() {
				this.activeExam = {
					ksjzTime:null,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			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`
				);
			},
			timeSetting(row){
				this.reset()
				this.activeExam = {...row}
				this.examDia = true
			},
			changeYear(){
				if(this.queryParams.QiciYear == null){
					this.queryParams.QiCi = null
				}
			}
		},
	};
</script>