<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">
      <div class="ng-scope" v-if="planId==0">

        <div class="mb10 tc mt20">
          <span class="p-ico2 worm-ico-o"></span>
          注：<span class="txt-o"></span> 完成40个学时的岗位培训才可报名考试
        </div>
        <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 @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 v-else >
        <div class="mb10 mt20">
          <el-button type="primary" class="ml30" @click="planId=0"> 返回考试计划</el-button>
        </div>
        <el-form label-position="right" label-width="100px" width="500"  >
          <el-form-item label="考试科目">
            <el-select v-model="courseId" clearable style="width: 220px;">
              <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="考试计划">
            <el-select v-model="planId" clearable>
              <el-option v-for="(item,index) in list"
                :value="item.planId"
                :key="index"
                :label="item.name"></el-option>
            </el-select>
          </el-form-item>



          <el-form-item label="支付凭证" v-if="payLog.status>=2">
            <vue-viewer class="preview" width="200px" height="200px" :thumb="payLog.buyImg"
            :full="payLog.buyImg">
            </vue-viewer>

            <do-upload v-if="payLog.status==2" @onFinish="(img)=>{payLog.buyImg=img;}" imgType="buyImg" placeholder="上传凭证">

            </do-upload>
          </el-form-item>

          <el-form-item label="备注信息">
            <el-input type="textarea" v-model="payLog.marks" style="width: 220px;"> </el-input>
          </el-form-item>

          <el-form-item label="温馨提示" v-if="payLog.status==0">
            <div>
              <div type="text" class="tl">
                <p class="tl" style="color: red;">第{{curCourse.resitCount}}次参考</p>
                <p class="tl" style="color: red;">首次免费，补考费用60元</p>
                <p class="tl" style="color: red;">补考流程：报名 》审核 》缴费 》确认</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label-width="100px">
            <el-button type="primary"  v-if="payLog.status==1" :disabled="true" class="confirmImg">等待审核</el-button>
            <el-button type="primary" @click="buyPayLog()" v-else-if="payLog.status==2" class="confirmImg">确认支付</el-button>
            <el-button type="warning"   v-else-if="payLog.status==3" class="confirmImg">
              等待财务确认
            </el-button>
            <el-button type="success" :disabled="true"  v-else-if="payLog.status==4" class="confirmImg" >
              报名完成，等待安排考试
            </el-button>
            <el-button type="primary" @click="applyPayLog()" v-else class="confirmImg">确定报考</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import { toDate} from "@/utils/date.js";
  import DoUpload from '@/components/upload/bigImg.vue'
  import { MessageBox } from "element-ui";
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 10,
        total: 20,
        planId: 0,
        applyId: 0,
        courseId: '',
        list: [],
        courses: [],
        qrcodeUrl:'',
        tickCount:0,
        outTradeNo: "",
        timer: null,
        plans: {},
        payLogs:{ },
        payLog:{ marks:'', replyMarks:'', buyImg:'', status:2},
        curCourse:{},
        curPlan:{},
        joinTrainPlanDialog: false,
        listLoading: false
      };
    },
    components:{DoUpload},
    watch:{
      courseId(courseId){
        for( let i in this.courses){
          if( this.courses[i].courseId == courseId){
            this.curCourse = this.courses[i]
            this.applyId = this.curCourse.applyId;
            this.loadPayLog();
          }
        }
      }
    },
    beforeMount() {
      this.getData()
      this.loadPayLog();
    },
    filters: {
      toStartEnd(row) {
        let time = row.startAt.substr(0, 10) + "   ";
        time += row.startAt.substr(11, 19) + ' 到' + row.endAt.substr(11, 19)
        return time
      },
      toDate
    },
    methods: {
      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
        })
      },
      buyPayLog(){
        let {planId, applyId} = this
        let param = {planId, applyId}
        let uuid = `${planId}_${applyId}`;
        param.marks = this.payLog.marks||'';
        param.buyImg = this.payLog.buyImg||'';
        httpServer('User.buyPayLog', param).then(res => {
          if (res.code == 200) {
            Object.assign( this.payLog, res.data );
            this.payLogs[uuid] = this.payLog;
            this.$message.successMsg("报名成功")
          }
        })
      },
      applyPayLog(){
        let {planId, applyId} = this
        let uuid = `${planId}_${applyId}`;
        let param = {planId, applyId}
        param.marks = this.payLog.marks||'';
        httpServer('User.ApplyPayLog', param).then(res => {
          if (res.code == 200) {
            Object.assign( this.payLog, res.data );
            this.payLogs[uuid] = this.payLog;
            this.$message.successMsg("支付成功");
          }
        })
      },
      loadPayLog(  ){
        let {planId, applyId} = this;
        let uuid = `${planId}_${applyId}`;
        if( this.payLogs[uuid]){
          this.payLog = this.payLogs[uuid];
          return
        }
        httpServer('Train.GetPlanPayLog', {planId,applyId}).then(res => {
          if (res.code == 200) {
            this.payLogs[uuid] = res.data||{};
            this.payLog = res.data||{};
          }
        })
      },
      joinTrainPlan(row) {
        if ( this.courses.length < 1 ) {
          this.$message.errorMsg("报考信息还未确认")
          return
        }
        this.planId = row.planId;
      },

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

<style>
  .confirmImg{
    width: 220px;
  }
</style>
