<template>
	<div class="app-container"> 
		<div v-if="title != null" style="font-size: 18px;text-align: center;margin-bottom: 10px;font-weight: bold;">
			{{title}}
		</div>
		<el-form :model="peoForm" ref="peoForm" size="small" :inline="true"   label-width="68px"> 
			<el-form-item label="执业单位" prop="DeptName">
				<el-input v-model="peoForm.DeptName" placeholder="请输入执业单位" clearable  />
			</el-form-item>
			<el-form-item label="姓名" prop="UserName">
				<el-input v-model="peoForm.UserName" placeholder="请输入姓名" clearable  />
			</el-form-item>
			<el-form-item label="收费状态" prop="FeeFlg">
				<el-select v-model="peoForm.FeeFlg" placeholder="请选择审核状态" clearable>
					<el-option  label="未交费" value="0" />
					<el-option  label="已交费" value="1" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="peoHandleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="peoResetQuery">重置</el-button>
				<el-button icon="el-icon-download" type="warning" size="mini" @click="handleExport">导出</el-button>
				<!-- <el-button icon="el-icon-plus" type="success" size="mini" @click="peoResetQuery">新增</el-button> -->
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%" v-loading="peoLoading">
			<el-table-column type="index" label="序号" align="center" ></el-table-column>
			<el-table-column prop="UserName" label="姓名"  align="center"></el-table-column>
			<el-table-column prop="UserSex" label="性别"  align="center"></el-table-column>
			<el-table-column prop="UserCord" label="身份证号" align="center" width="170px"></el-table-column>
			<el-table-column prop="UserPhone" label="手机号码" align="center"></el-table-column>
			<el-table-column prop="address" label="培训类别" align="center">
				<template>
					<span>监理工程师</span>
				</template>
			</el-table-column>
			<el-table-column prop="Undef1" label="证书编号" align="center"></el-table-column>
			<el-table-column prop="DeptName" label="执业单位" align="center" width="300px"></el-table-column>
			<el-table-column prop="Yxqz" label="证书有效期" align="center"></el-table-column>
			<el-table-column prop="AddDate" label="报名时间" align="center"></el-table-column>
			<el-table-column prop="address" label="收费状态" align="center">
				<template slot-scope="scope">
					<el-tag :type="scope.row.FeeFlg == 0 ? 'danger' : 'success'" >{{ scope.row.FeeFlg == 0 ? "未交费" : "已交费" }}</el-tag>  
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" >
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.FeeFlg == 0?false:true" @click="seePeople(scope.row)"
						>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="peoTotal>0" :total="peoTotal" :page.sync="peoForm.pageNum" :limit.sync="peoForm.pageSize" @pagination="getPeoList" /> 
		
		<el-dialog title="添加报名人员" :visible.sync="peoOpen">
			<el-form :model="form" ref="form" label-width="68px">
				
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listTraining,
		getTraining,
		delTraining,
		addTraining,
		updateTraining
	} from "@/api/xiehui/jxjy/Training";
	import {
		listPerson
	} from "@/api/xiehui/jxjy/onpayment";
	import {
		listClass
	} from "@/api/xiehui/jxjy/kcgl";
	import {
		listPaperInfo
	} from "@/api/xiehui/jxjy/PaperInfo";
	export default {
		name: "Training",
		dicts: ['jxjy_zhuanye','jxjy_pxzy','jxjy_kclx'],
		data() {
			let this_ = this
			return {
				tableData:[],//报名人员列表
				peoOpen:false,
				peoForm:{
					pageNum: 1,
					pageSize: 10,
					TrainId:null,
					UserName:null,
					FeeFlg:null,
					DeptName:null
				},
				peoTotal:0,
				peoLoading:false,  
				title:null,
				form:{},//报名表单
				rules:{
					
				}
			};
		},
		created() {
			this.peoForm.TrainId = this.$route.query.TrainId
			this.title = this.$route.query.title
			this.getPeoList()
		},
		methods: { 
			/** 导出按钮操作 */
			handleExport() {
				this.download('jxjy/Person/exportCostlist', {
					...this.peoForm
				}, `${this.title}报名人员.xlsx`)
			}, 
			//获取人员列表
			getPeoList(){
				this.peoLoading = true
				listPerson(this.peoForm).then(res=>{
					this.tableData = res.rows
					this.peoTotal = res.total
					this.peoLoading = false
				})
			},
			peoHandleQuery(){
				this.peoForm.pageNum = 1;
				this.getPeoList()
			},
			peoResetQuery(){
				this.resetForm("peoForm");
				this.peoHandleQuery()
			}, 
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-input.is-disabled .el-input__inner {
		background-color: #fff !important;
		color: #303133 !important
	}
	::v-deep .el-upload{
		display: block !important;
	}
</style>