<template>
	<div class="app-container"> 
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
			label-width="90px">
			<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="PassState">
				<el-select v-model="queryParams.PassState" placeholder="请选择是否及格" >
					<el-option  label="不及格" value="2" />
					<el-option  label="及格" value="1" />
				</el-select>
			</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 :data="tableData" style="width: 100%" v-loading="loading">
			<el-table-column type="index" label="序号" align="center" :index="indexMethod"></el-table-column>
			<el-table-column   label="期次" align="center" width="120">
				<template slot-scope="scope">
					{{scope.row.qiciYear+"第"+scope.row.qiCi+"期"}}
				</template>
			</el-table-column>
			<el-table-column prop="pxlb" label="培训类别" align="center" width="160">
				<template slot-scope="scope">
					{{scope.row.zhuanYeType === ""?scope.row.zcsZhuanYe:scope.row.zcsZhuanYe+"（"+scope.row.zhuanYeType+"）"}}
				</template>
			</el-table-column>
			<el-table-column prop="StartTime" label="答卷开始时间" align="center" width="160" >
			</el-table-column>
			<el-table-column prop="EndTime" label="答卷结束时间" align="center" width="160" >
			</el-table-column>
			<el-table-column prop="UserName" label="姓名" align="center" >
			</el-table-column>
			<el-table-column prop="UserCord" label="身份证号" align="center" width="200">
			</el-table-column>
			<el-table-column prop="TotalMark" label="考试分数" align="center" >
			</el-table-column>
			<el-table-column prop="passMark" label="及格分数" align="center">
			</el-table-column>
			<el-table-column prop="zxs" label="是否及格" align="center">
				<template slot-scope="scope">
					<span :style="{color:scope.row.PassState == 0?'#F56C6C':'#606266'}">
						{{scope.row.PassState == 0?'不及格':'及格'}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="zxs" label="考试次数" align="center">
				<template slot-scope="scope">
					{{ "第"+scope.row.currentCount+"次"}}
				</template>
			</el-table-column>
			<el-table-column prop="yxsj" label="操作" align="center">
				<template slot-scope="scope">
					<!-- <span style="color: #F56C6C;">
						{{scope.row.yxsj}}
					</span> -->
					<el-button type="text" icon="el-icon-view" @click="getInfo(scope.row)">查卷</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" />
		<div class="shijuan">
			<el-dialog title="" :visible.sync="ksShow" :show-close="false" fullscreen destroy-on-close >
				<finishSj :content="sjContent" :title="title" :config="sjConfig" @back="back"></finishSj> 
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { searchQici } from "@/api/xiehui/jxjy/Training"
	import {
		getCjList
	} from "@/api/xiehui/jxjy/kaoshiGl"
	import {
		getFinishSjInfo
	} from "@/api/jianliyuan/index"
	import finishSj from "../../../components/shijuan/finishSj" 
	export default {
		name: "Chengji",
		components:{
			finishSj
		},
		data() {
			return {
				tableData: [],
				queryParams:{
					pageSize:10,
					pageNum:1,
					UserName:null,
					UserCord:null,
					QiciYear:null,
					QiCi:null,
					PassState:null,
					qi:null
				},
				total:0,
				loading:false,
				ksShow:false, 
				sjContent:null,
				sjConfig:null,
				title: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]
			},
			getList(){
				this.loading = true
				getCjList(this.queryParams).then(res=>{
					this.loading = false
					this.total = res.total
					this.tableData = res.rows
				})
			},
			//搜索
			handleQuery(){ 
				this.queryParams.pageNum = 1
				this.getList()
			},
			//重置
			resetQuery(){
				this.queryParams.QiciYear = null
				this.queryParams.QiCi = null
				this.resetForm("queryForm");
				this.handleQuery(); 
			},
			//查询试卷详情
			getInfo(row){
				this.loading = true
				this.title = row.TrainName
				this.sjConfig = row
				getFinishSjInfo(row.UserScoreID).then(res=>{
					this.loading = false
					this.sjContent = res.data
					this.ksShow = true
				})
			},
			back(){
				this.ksShow = false
			},
			changeYear(){
				if(this.queryParams.QiciYear == null){
					this.queryParams.QiCi = null
				}
			},
			indexMethod(index){
				return ((this.queryParams.pageNum - 1) * this.queryParams.pageSize) + (index + 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .shijuan .el-dialog__body{
		padding: 0 20px;
	}
	::v-deep .shijuan .el-dialog__header{
		display: none!important;
	}
</style>