<template>
	<div class="app-container">
		<el-table :data="tableData" style="width: 100%">
			<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.zhuanye === ""?scope.row.pxlb:scope.row.pxlb+"（"+scope.row.zhuanye+"）"}}
				</template>
			</el-table-column>
			<el-table-column prop="trainName" label="培训计划名称" align="center" width="400px">
			</el-table-column>
			<el-table-column prop="zxs" label="总学时" align="center">
			</el-table-column>
			<el-table-column prop="yxsj" label="已学时间(分钟)" align="center">
				<template slot-scope="scope">
					<span style="color: #F56C6C;">
						{{scope.row.yxsj}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="sysj" label="剩余时间(分钟)" align="center">
			</el-table-column>
			<el-table-column label="考试截止日期" align="center">
				<template slot-scope="scope">
					{{parseTime(scope.row.ksjzrq, '{y}-{m}-{d}')}}
				</template>
			</el-table-column>
			<el-table-column prop="surplusCount" label="剩余考试次数" align="center">
			</el-table-column>
			<el-table-column prop="address" label="状态" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.overFlg === '0' || scope.row.overFlg === '3'">
						<div v-if=" new Date(scope.row.ksjzrq) > new Date()">
							<el-button size="mini" type="text" icon="el-icon-coin" style="color:#F56C6C ;" @click="studyShow = true" v-if="scope.row.feeflg === '0'">缴费</el-button>
							<el-button size="mini" type="text" icon="el-icon-reading" @click="ksxx(scope.row)" v-else-if="scope.row.feeflg === '1' && scope.row.wanchengflg === '0' ">开始学习</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" style="color:#E6A23C;" @click="getSjInfo(scope.row)" v-else-if="scope.row.feeflg === '1' && scope.row.wanchengflg === '1'">开始考试</el-button>
						</div>
						<div v-else style="color: #909399;">
							超出考试截止日期
						</div>
					</div>
					<div v-else>
						<div v-if="scope.row.overFlg === '1'">
							完成学时|考试通过|<span style="color: #F56C6C;cursor: pointer;" @click="zsDownload(scope.row)">证书下载</span>
						</div>
						<div v-if="scope.row.overFlg === '2'" style="color: #909399;">
							考试次数上限未通过
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex;color:#F56C6C ;margin-top: 40px;">
			<div >
				备注：
			</div>
			<div>
				<div >
					1、完成学时后即可进行网上考试，请单击左侧查看成绩菜单进行成绩的查询。
				</div>
				<div >
					2、每人有3次网上考试机会，考试通过后，方可打印合格证明。
				</div>
				<div>
					3、如未交费情况下显示微信支付，请用手机微信“扫一扫”功能进行交费；如显示按照交费说明进行交费，请按照说明书进行操作。
				</div>
			</div>
		</div>
		<div style="color:#F56C6C ;margin-top: 20px;">
			<div>
				关于铁路监理工程师网上继续教育的有关注意事项：
			</div>
			<div style="padding-left: 46px;">
				<div>
					1、持铁监证在证书到期前半年可以报名学习，可持续学习至证书到期日止；
				</div>
				<div>
					2、持铁监证在证书到期前3个月 - 到期日的，报名学习时间自报名日起，为三个月；
				</div>
				<div>
					3、持铁监证过期报名的，自报名成功学习时间为3个月。以上要求是根据网络资源所限，请各单位负责培训人员督促报名人员抓紧时间学习。
				</div>
			</div> 
		</div>
		<el-dialog title="继续教育学习" :visible.sync="studyShow" fullscreen destroy-on-close :before-close="studyOver">
			<xuexi :classData="classData"></xuexi>
		</el-dialog>
		<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 >
				<zhengjuan :content="sjContent" :sjConfig="sjConfig" :personId="personId" v-if="sjTYpe == 'zj'" @subSuccess="subSuccess"></zhengjuan>
				<zhuti :content="sjContent" :sjConfig="sjConfig" :personId="personId" v-else @subSuccess="subSuccess"></zhuti>
			</el-dialog>
		</div>
		
	</div>
</template>

<script>
	import {
		getJxjy,getSjContent,submitDaan
	} from "@/api/jianliyuan/index"
	import xuexi from "../../components/xuexi/index"
	import zhengjuan from "../../components/shijuan/zhengjuan"
	import zhuti from "../../components/shijuan/zhuti"
	import { Base64 } from "js-base64";
	export default {
		name: "PeixunList",
		components:{
			xuexi,zhengjuan,zhuti
		},
		data() {
			return {
				tableData: [],
				//学习相关
				studyShow: false,
				classData:null,
				//考试相关
				ksShow:false,
				sjContent:null,
				sjConfig:null,
				personId:null,
				sjTYpe:'zj',
				zsShow:false,
				filePath:null,
				baseUrl:process.env.VUE_APP_BASE_API2,
				iframeUrl:null
			}
		},
		created() {
			this.getList()
		},
		methods: { 
			getList(){
				getJxjy().then(res=>{
					this.tableData = res.data
				})
			},
			ksxx(row){
				this.classData = row
				this.studyShow = true
			},
			studyOver(){
				this.getList()
				this.studyShow = false
			},
			//获取试卷信息
			getSjInfo(row){
				let that = this
				this.personId = row.personid
				getSjContent(row.personid).then(res=>{
					this.sjTYpe = res.data.parperConfig.ShowModal == 1? 'zj' : 'zt'
					this.sjConfig = res.data.parperConfig
					this.sjContent = res.data.parper
					this.ksShow = true 
				})
			},
			//提交成功回调
			subSuccess(data){
				this.getList()
				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>


