<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>拥有证书编号才能打印证书
      </div>

      <div  class="ng-scope">

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="培训内容" >
            <template slot-scope="{row, $index}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>

          <el-table-column label="证书类型">
            <template slot-scope="{row, $index}">
              <span>{{row.type}}</span>
            </template>
          </el-table-column>

          <el-table-column label="证书编号">
            <template slot-scope="{row, $index}">
              <template v-if="row.edit">
                <el-input v-model="row.rzCode" class="edit-input" size="small" />
              </template>
              <span v-else>{{row.rzCode||'---'}}</span>
            </template>
          </el-table-column>

          <el-table-column label="学时">
            <template slot-scope="{row, $index}">
              <span>{{row.totalXs/10}}</span>
            </template>
          </el-table-column>


          <el-table-column label="课程费用(元)">
            <template slot-scope="{row}">
              <span>￥{{ row.fee/100 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="学习时间" min-width="135">
            <template slot-scope="{row}">
              <span>{{ row.startDate }} 到 {{ row.endDate }}</span>
            </template>
          </el-table-column>


          <el-table-column label="操作" fixed="right" align="center" width="200">
            <template slot-scope="{row}">
              <el-button v-if="!row.rzCode && !row.edit" @click="initEdit(row )" type="primary" size="small">填写证书编号</el-button>
              <el-button  v-if="row.edit"  type="success"
                size="small" icon="el-icon-circle-check"@click="confirmEdit(row)" >
                  提交
              </el-button>

              <el-button  v-if="row.edit"  class="cancel-btn" size="small" icon="el-icon-refresh"  type="warning"   @click="cancelEdit(row)" >
                 取消
              </el-button>

              <el-button v-if="!row.edit&&row.rzCode && row.signUrl" @click="showSign(row.signUrl )" type="primary" size="small">学时证明</el-button>
              <el-button v-if="!row.edit&&row.rzCode"  @click="printCert( row )" type="warning" 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="total">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        list: [],
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    methods: {
      getData() {
        let param = {from: (this.page - 1) * this.size,size:this.size}
        httpServer('Cert.getCertList', param).then(({
          data,
          code
        }) => {
          if( code != 200 ) return;
          this.list = data.list.map(v => {
            this.$set(v, 'edit', false)
            return v
          });
          this.total = data.total || 0;
        })
      },
      initEdit( row ) {
        row.temp = Object.assign({}, row);
        row.edit = true;
      },
      cancelEdit(row) {
       row = Object.assign(row, row.temp);
       row.edit = false;
      },
      printCert( row  ){
        httpServer('Cert.printCert', {id:row.id}).then( res => {
          if( res.code != 200 ) return;
          row.signUrl = res.data.url
          this.showSign( row.signUrl )
          this.$message.success("录入成功")
        })
      },
      showSign( url ){
        window.open( url )
      },
      confirmEdit(row) {
       let {rzCode, id} = row
       httpServer('Cert.addRzCode', {rzCode, id}).then( res => {
         if( res.code != 200 ) return;
         this.showSign( res.data.url );
       })
      },
      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
