<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">
      <div class="mb10 tc mt20">
        <span class="p-ico2 worm-ico-o"></span>
        注：<span class="txt-o"></span> 完成40个学时的岗位培训才可报名考试
      </div>

      <div class="ng-scope">
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="考试分期" align="center">
            <template slot-scope="{row, $index}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>

          <el-table-column label="考试类型" align="center" width="140px">
            <template slot-scope="{row}">
              <span>施工现场专业人员</span>
            </template>
          </el-table-column>


          <el-table-column label="允许人数" align="center" prop="totalCounter">
          </el-table-column>

          <el-table-column label="已报名人数" align="center" prop="counter">
          </el-table-column>

          <el-table-column label="考试时间" align="center" prop="startAt" width="151px">
            <template slot-scope="{row}">
              <span>{{row.startAt|toDate}} 到 {{row.endAt|toDate}}</span>
            </template>

          </el-table-column>

          <el-table-column label="报名时间" align="center" prop="applyStartAt">
            <template slot-scope="{row}">
              <span>{{row.applyStartAt|toDate}}</span>
            </template>

          </el-table-column>

          <el-table-column label="截止时间" align="center" prop="applyEndAt">
            <template slot-scope="{row}">
              <span>{{row.applyEndAt|toDate}}</span>
            </template>
          </el-table-column>


          <el-table-column label="状态" fixed="right" align="center" width="100">
            <template slot-scope="{row}">
              <el-button v-if="row.isPass==1" type="text" size="small" style="color: green;">考试通过</el-button>
    <!--          <el-button v-else-if="row.isPass==2" @click="reJoinTrainPlan( row )" type="primary" size="small">立即补考</el-button>
              <el-button v-else-if="row.isApply >0" type="text" size="small" style="color: green;">已经报考</el-button> -->
              <el-button v-else @click="joinTrainPlan( row )" type="primary" size="small">报名考试</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="size" layout="total, prev,pager, next"
          :total="list.length">
        </el-pagination>

      </div>


    </div>
    <el-dialog title="报名考试确认" class="fc tc" :visible.sync="joinTrainPlanDialog"
      width="400px" :append-to-body="true"
      @close="joinTrainPlanDialog= false">

      <el-form label-position="right" label-width="100px">
        <el-form-item label="选择考试科目">
          <el-select v-model="courseId" clearable>
            <el-option v-for="(item,index) in courses"
              :value="item.courseId"
              :key="index" :label="item.courseName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试信息">
          <span  style="margin-left: 20px;float: left;">
            <el-button type="text" v-if="curCourse.isPass==1"> 已经通过 </el-button>
            <el-button type="text" v-else-if="curCourse.resitCount==0"> 首次考试</el-button>
            <div type="text" class="tl" v-else-if="curCourse.resitCount>=2">
              <p class="tl" style="color: red;">本次费用50元</p>
            </div>
            <div type="text" class="tl" v-else>
              <p class="tl">参考{{curCourse.resitCount}}次</p>
              <p class="tl" style="color: red;">备注: 前两次补考免费，之后补考50元</p>
            </div>

          </span>
        </el-form-item>
      </el-form>

      <div class="qrcode" v-if="qrcodeUrl && curCourse.isPass!=1">
        <img :src="qrcodeUrl" />
      </div>

      <div slot="footer" class="dialog-footer tc">
        <el-button @click="joinTrainPlanDialog = false" type="warning">关闭</el-button>

        <span v-if="curCourse.isPass !=1">
          <el-button type="primary" v-if="curCourse.resitCount>=2" @click="doResitTrainPlan">确 定</el-button>
          <el-button type="primary" v-else @click="doJoinTrainPlan">确 定</el-button>
        </span>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import { toDate} from "@/utils/date.js";
  import { MessageBox } from "element-ui";
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 10,
        total: 20,
        planId: 0,
        courseId: 0,
        list: [],
        courses: [],
        qrcodeUrl:'',
        tickCount:0,
        outTradeNo: "",
        timer: null,
        plans: {},
        curCourse:{},
        joinTrainPlanDialog: false,
        listLoading: false
      };
    },
    watch:{
      courseId(courseId){
        for( let i in this.courses){
          if( this.courses[i].courseId == courseId){
            this.curCourse = this.courses[i]
            this.qrcodeUrl = ""
          }
        }
      }
    },
    beforeMount() {
      this.getData()
    },
    filters: {
      toStartEnd(row) {
        let time = row.startAt.substr(0, 10) + "   ";
        time += row.startAt.substr(11, 19) + ' 到' + row.endAt.substr(11, 19)
        return time
      },
      toDate
    },
    beforeDestroy() {
      if (this.timer) window.clearInterval(this.timer);
    },
    methods: {
      initTimer() {
        if (this.timer) window.clearInterval(this.timer);
        this.tickCount = 0;
        this.timer = window.setInterval(() => {
          this.tickCount++;
          this.tickTimer();
        }, 2000);
      },
      tickTimer() {
        if (this.tickCount > 30) {
          if (this.timer) window.clearInterval(this.timer);
          this.qrcodeUrl = "";
          return
        }
        let outTradeNo = this.outTradeNo;
        httpServer("weixin.iswxPay", { outTradeNo }).then((res) => {
          if (res.code == 200) {
            if (!!res.data) {
              if (this.timer) window.clearInterval(this.timer);
              MessageBox("支付成功", "提示", {
                confirmButtonText: "确定",
                showClose: true,
                type: "sucess",
              });
              this.qrcodeUrl = "";
              this.joinTrainPlanDialog = false
              this.getData();
            }
          }
        });
      },
      getData() {
        this.listLoading = true
        httpServer('Train.GetTrainPlanList', {}).then(res => {
          if (res.code == 200) {
            this.list = res.data.plans || []
            this.courses = res.data.courses || []
            let plans = {}
            for (let i in this.courses) {
              let planId = this.courses[i].planId
              if (planId) plans[planId] = this.courses[i]
            }
            this.plans = plans
            this.list = this.list.map(v => {
              let item = plans[v.planId];
              v.resitCount = 0
              v.isPass = 0
              if( item ){
                v.isApply = 1
                v.isPass = item.isPass
                v.resitCount = item.resitCount;
              }
              return v;
            })
          }
          this.listLoading = false
        })
      },
      joinTrainPlan(row) {
        if (this.courses.length < 1) {
          this.$message.errorMsg("报考信息还未确认")
          return
        }
        this.planId = row.planId;
        this.courseId = this.courses[0].courseId;
        this.curCourse = this.courses[0];
        this.joinTrainPlanDialog = true;
      },
      reJoinTrainPlan(row) {
        if (this.courses.length < 1) {
          this.$message.errorMsg("报考信息还未确认")
          return
        }
        this.planId = row.planId;
        this.courseId = this.courses[0].courseId;
        this.joinTrainPlanDialog = true;
      },
      doResitTrainPlan(){
        let {applyId} = this.curCourse;
        let planId = this.planId;
        if( this.curCourse.isPass == 1) return;
        httpServer('Weixin.DoWxpayTrain', {planId,applyId}).then(res => {
          if (res.code == 200) {
            let { outTradeNo, showUrl,fee } = res.data;
            this.qrcode = true;
            this.qrcodeUrl = showUrl
            this.outTradeNo = outTradeNo;
            this.initTimer();
          }
        })
      },
      doJoinTrainPlan() {
        if( this.curCourse.isPass==1){
          this.$message.successMsg('考试已经通过', 2)
          return
        }
        let {applyId} = this.curCourse;
        let { planId, courseId } = this
        if (!planId || !courseId) return;
        httpServer('Train.JoinTrainPlan', {planId, courseId, applyId}).then(res => {
          if (res.code == 200) {
            this.$message.successMsg('报名成功', 1)
            this.getData()
            this.joinTrainPlanDialog = false
          }
        })
      },

      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
