<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
			label-width="68px"> 
			<el-form-item label="期次" prop="QiciYear">
				<div class="flex-ac">
					<el-input v-model="queryParams.QiciYear" placeholder="" clearable style="width: 120px;"
						@keyup.enter.native="handleQuery"  />
					<span class="p-l-10 p-r-10">年</span>
					<el-input v-model="queryParams.QiCi" placeholder="" clearable style="width: 120px;"
						@keyup.enter.native="handleQuery" />
					<span class="p-l-10">期</span>
				</div>
			</el-form-item>
			<el-form-item label="状态" prop="PassState">
				<el-select v-model="queryParams.PassState" placeholder="请选择是否及格" clearable>
					<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   label="期次" align="center">
				<template slot-scope="scope">
					{{scope.row.qiciYear+"第"+scope.row.qiCi+"期"}}
				</template>
			</el-table-column>
			<el-table-column prop="pxlb" label="培训类别" align="center">
				<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" >
			</el-table-column>
			<el-table-column prop="EndTime" label="答卷结束时间" align="center" >
			</el-table-column>
			<el-table-column prop="TotalMark" label="考试分数" align="center">
			</el-table-column>
			<el-table-column prop="zxs" label="总分/及格" align="center">
				<template slot-scope="scope">
					{{scope.row.paperMark+" / "+ scope.row.passMark}}
				</template>
			</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.repeatExamNum+" / "+ 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>
					<el-button type="text" style="color: #F56C6C;" icon="el-icon-printer" @click="zsDownload(scope.row)" v-if="scope.row.PassState == 1">证书下载</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="证书下载" width="60vw"  :visible.sync="zsShow" >
			 <div style="height: 60vh;">
			 	<iframe :src="iframeUrl" style="width: 100%;height: 100%;"></iframe>
			 </div>
			 <div slot="footer" class="dialog-footer">
			  	<el-button type="danger" @click="xiazai">下 载</el-button> 
			 </div>
		</el-dialog>
		<div class="shijuan">
			<el-dialog title="继续教育考试" :visible.sync="ksShow" :show-close="false" fullscreen destroy-on-close >
				<finishSj :content="sjContent" :config="sjConfig" :title="title" @back="back"></finishSj> 
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		getKsList,getFinishSjInfo
	} from "@/api/jianliyuan/index"
	import finishSj from "../../components/shijuan/finishSj" 
	import { Base64 } from "js-base64";
	export default {
		name: "Chengji",
		components:{
			finishSj
		},
		data() {
			return {
				tableData: [],
				queryParams:{ 
					QiciYear:null,
					QiCi:null, 
					PassState:null,
				},
				loading:false,
				ksShow:false, 
				sjContent:null,
				sjConfig:null,
				title:null,
				zsShow:false,
				filePath:null,
				baseUrl:process.env.VUE_APP_BASE_API2,
				iframeUrl:null
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList(){
				this.loading = true
				getKsList(this.queryParams).then(res=>{
					this.loading = false
					this.tableData = res.data
				})
			},
			//搜索
			handleQuery(){  
				this.getList()
			},
			//重置
			resetQuery(){
				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
			},
			zsDownload(row){
				this.iframeUrl =  `http://192.168.1.56:8201/onlinePreview?url=` +
					encodeURIComponent(
						Base64.encode(this.baseUrl+'/profile'+row.pdfpath)
					) 
				this.filePath =row.pdfpath
				this.zsShow = true
			},
			//下载
			xiazai(){
				this.download('common/download', {
					fileName:this.filePath,delete:false
				}, `资格证书.pdf`)
			}
		}
	}
</script>

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