<template>
	<div class="app-container">
		<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" width="180">
				<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">
					<!-- <el-button size="mini" type="text" icon="el-icon-edit" style="color:#E6A23C;" @click="getSjInfo(scope.row)" >开始考试</el-button> -->


					<div v-if="scope.row.overFlg == '0'">
						<el-button size="mini" type="text" icon="el-icon-coin" style="color:#F56C6C ;"
							@click="jiaofei(scope.row)" v-if="scope.row.feeflg === '0'">交费</el-button>
						<div
							v-else-if="scope.row.feeflg === '1' && (scope.row.shflg == '' || scope.row.shflg == null || scope.row.shflg == 2)">
							<el-button size="mini" type="text" icon="el-icon-reading" @click="ksxx(scope.row)"
								v-if="scope.row.sysj != 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.sysj == 0 && scope.row.examState == null">开始考试</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" style="color:#E6A23C;"
								@click="getSjInfo(scope.row)"
								v-else-if="scope.row.sysj == 0 && scope.row.examState == 0">继续考试</el-button>
						</div>
						<div v-else-if="scope.row.shflg == 0">
							<el-button size="mini" type="text" icon="el-icon-refresh-left" style="color: #F56C6C ;"
								@click="chexiao(scope.row)">撤销退费</el-button>
						</div>
						<div v-else-if="scope.row.shflg == 1" style="color: #F56C6C;">
							已退费
						</div>
					</div>
					<div v-else-if="scope.row.overFlg === '3'" style="color: #909399;">
						超出考试截止日期
					</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-column prop="address" label="退费" align="center">
				<template slot-scope="scope">
					<div
						v-if="scope.row.overFlg === '0' && scope.row.feeflg == 1 && (scope.row.shflg == '' || scope.row.shflg == null) && scope.row.yxsj == 0 ">
						<el-button size="mini" type="text" icon="el-icon-refresh-left" @click="tuifei(scope.row)"
							style="color: #F56C6C ;">退费</el-button>
					</div>
					<el-popover v-if="scope.row.shflg == 2" placement="top-start" title="原因" width="200" trigger="hover"
						:content="scope.row.shyy">
						<el-button type="text" slot="reference" style="color:#F56C6C ">审核不通过</el-button>
					</el-popover>
				</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" v-if="studyShow"></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>
				<div v-if="ksShow">
					<zhengjuan :content="sjContent" :sjConfig="sjConfig" :personId="personId" :userScore="userScore"
						v-if="sjTYpe == 'zj'" @subSuccess="subSuccess"></zhengjuan>
					<zhuti :content="sjContent" :sjConfig="sjConfig" :personId="personId" :userScore="userScore" v-else
						@subSuccess="subSuccess"></zhuti>
				</div>
			</el-dialog>
		</div>
		<el-dialog title="交费" :visible.sync="jiaofeiShow" width="40vw" destroy-on-close :before-close="jiaofeiOver">
			<div class="flex-jc" style="flex-direction: column;align-items: center;">
				<img :src="jiaofeiUrl" alt="" width="50%" />
				<div style="display: flex;align-items: center;">
					<!-- 支持微信、支付宝支付 -->
					<div style="font-size: 16px;">
						支付方式：
					</div>
					<img src="../../../assets/images/wx.png" style="width: 40px;margin-left: 8px;" alt="" />
					<img src="../../../assets/images/zfb.png" style="width: 44px;margin-left: 10px;" alt="" />
				</div>
			</div>
		</el-dialog>
		<el-dialog title="" :visible.sync="zyShow" width="40vw" >
			<span>
				<el-descriptions class="margin-top" title="考试信息" :column="1" :size="size" border :labelStyle="{width:'120px'}"> 
					<el-descriptions-item>
						<template slot="label"> 
							考试名称
						</template>
						{{ksForm.trainName}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"> 
							考试总分
						</template>
						{{ksForm.paperMark}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							及格分数
						</template>
						{{ksForm.passMark}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"> 
							考试时长(分钟)
						</template>
						{{ksForm.examTime}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"> 
							自动保存
						</template>
						{{ksForm.autoSave == '0'?'不支持自动报错':ksForm.autoSave<1?`每${ksForm.autoSave*60}秒保存一次`:`每${ksForm.autoSave}分钟自动保存一次`}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"> 
							考试类型
						</template>
						{{ksForm.zhuanye === ""?ksForm.pxlb:ksForm.pxlb+"（"+ksForm.zhuanye+"）"}}
					</el-descriptions-item>
				</el-descriptions>
				<div style="padding: 10px;border:2px dashed #F56C6C;margin-top:10px;">
					<!-- <div>
						1、开始考试后请在规定时间内进行答题，到达考试结束时间后请交卷禁止继续答题。
					</div>
					<div style="margin-top: 10px;">
						2、支持自动保存的考试，每过规定时间就会自动保存一次，非交卷退出考试后，再考试结束时间前可继续答卷，所保存的内容为最后一次自动保存的答题内容。
					</div>
					<div style="margin-top: 10px;">
						3、不支持自动保存的考试，非交卷退出考试后，将重新进行考试。
					</div> -->
					<!-- <div>
						1、开始考试后请在规定时间内进行答题，到达考试结束时间后将禁止继续答题。
					</div>
					<div style="margin-top: 10px;">
						2、支持自动保存的考试，每过规定时间就会自动保存一次，非交卷退出考试后，再考试结束时间前可继续答卷，所保存的内容为最后一次自动保存的答题内容。
					</div>
					<div style="margin-top: 10px;">
						3、开始考试后就算为一次答卷，请勿关闭、刷新页面，答题期间谨慎操作。
					</div> -->
					<div>
						1、考试开始后请不要关闭网页，关闭后将记录一次考试次数。
					</div>
				</div>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="ksks(ksForm)">开始考试</el-button>
				<el-button @click="zyShow = false">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getJxjy,
		getSjContent,
		submitDaan,
		getImg,
		getStatus,
		tuifeiShenqing,
		chexiaoTuifei
	} 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,
				userScore: null,
				personId: null,
				sjTYpe: 'zj',
				zsShow: false,
				filePath: null,
				baseUrl: process.env.VUE_APP_BASE_API,
				iframeUrl: null,
				jiaofeiShow: false,
				jiaofeiUrl: null,
				ti: null,
				loading: false,
				zyShow: false,
				ksForm:{}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.loading = true
				getJxjy().then(res => {
					this.tableData = res.data
					this.loading = false
				})
			},
			ksxx(row) {
				this.classData = row
				this.studyShow = true
			},
			studyOver() {
				this.getList()
				this.studyShow = false
			},
			//获取试卷信息
			getSjInfo(row) {
				let that = this
				if(row.sysj == 0 && row.examState == 0){
					this.personId = row.personid
					let userScoreId = row.userScoreId == null || row.userScoreId == '' ? "" : row.userScoreId
					getSjContent(row.personid,userScoreId).then(res => {
						this.sjTYpe = res.data.parperConfig.ShowModal == 1 ? 'zj' : 'zt'
						this.sjConfig = res.data.parperConfig
						this.sjContent = res.data.parper
						this.userScore = res.data.userScore
						this.ksShow = true
					})
				}else{
					this.ksForm = {...row}
					
					this.zyShow = true
				} 
			},
			ksks(row){
				let that = this
				this.personId = row.personid
				let userScoreId = row.userScoreId == null || row.userScoreId == '' ? "" : row.userScoreId  
				getSjContent(row.personid,userScoreId).then(res => {
					this.sjTYpe = res.data.parperConfig.ShowModal == 1 ? 'zj' : 'zt'
					this.sjConfig = res.data.parperConfig
					this.sjContent = res.data.parper
					this.userScore = res.data.userScore
					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.iframeUrl = this.baseUrl + '/profile' + row.pdfpath
				this.filePath = row.pdfpath
				this.zsShow = true
			},
			//下载
			xiazai() {
				this.download('common/download', {
					fileName: this.filePath,
					delete: false
				}, `资格证书.pdf`)
			},
			jiaofei(row) {
				getImg(row.personid).then(res => {
					this.jiaofeiUrl = res.data.codeImgUrl
					this.jiaofeiShow = true
					this.getJfStatus(row.personid)
				})
			},
			//查询交费状态
			getJfStatus(id) {
				this.ti = setInterval(() => {
					getStatus(id).then(res => {
						if (res.data == 0) {
							clearInterval(this.ti)
							this.jiaofeiShow = false
							this.jiaofeiUrl = null
							this.getList()
							this.$message({
								type: "success",
								message: "交费成功"
							})
						} else {

						}
					})
				}, 5000)
			},
			jiaofeiOver() {
				clearInterval(this.ti)
				this.jiaofeiShow = false
				this.jiaofeiUrl = null
			},
			tuifei(row) {
				this.$prompt('退费原因', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S/,
					inputErrorMessage: '请输入退费原因'
				}).then(({
					value
				}) => {
					tuifeiShenqing({
						pid: row.personid,
						yy: value,
						trainId: row.trainId
					}).then(res => {
						this.$message({
							type: "success",
							message: "申请成功"
						})
						this.getList()
					})
				}).catch(() => {

				});
			},
			//撤销退费申请
			chexiao(row) {
				const h = this.$createElement;
				this.$msgbox({
					title: '提示',
					message: h('p', null, [
						h('span', null, '是否撤销退费申请？'),
					]),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							chexiaoTuifei({
								id: row.id
							}).then(res => {
								this.$message({
									type: "success",
									message: "撤销成功"
								})
								this.getList()
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}).catch(error => {
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							})
						} else {
							if (instance.confirmButtonLoading == false) {
								done();
							}
						}
					}
				}).then(action => {

				});
			}


		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .shijuan .el-dialog__body {
		padding: 0 20px;
	}

	::v-deep .shijuan .el-dialog__header {
		display: none !important;
	}

	::v-deep .el-dialog__body {
		padding: 0 20px !important;
	}
</style>