<template>
  <div class="content">
    <div class="navigation">
      <router-link to="/">首页</router-link>
      <span>&gt; </span>
      学时验证
    </div>

    <div class="p-wrap-full white-bg mb20">
      <div class="w840 margin-auto">
        <div class="tabheadtow clear">
          <h2 class="title">学时验证</h2>
        </div>

        <div class="tips-box mt20">请填写正确的证件号和姓名进行查询。</div>
        <div class="learning-time-panel white-bg clear">
          <div class="tc mt30">

            <input type="text" style="line-height: 1;padding: 9px" class="ui-ipt iptform ml50" v-model="cardId"
              placeholder="证件号（支持大陆/港澳台）">

             <input type="text" style="line-height: 1;padding: 9px" v-model="name"
              class="ui-ipt iptform ml10" placeholder="请输入姓名">
              <button class="ui-btn btn-r ml10" @click="getData()" type="button">立即验证</button>
          </div>
        </div>


        <div class="learning-result-box ng-scope" v-if="total">
          <p>姓名：<span class="ng-binding">{{name}}</span></p>
          <p>证件号：<span  class="ng-binding">{{cardId}}</span></p>
          <el-table v-loading="listLoading" :data="list"  highlight-current-row border fit class="mt30">
            <el-table-column align="center" label="培训内容">
              <template slot-scope="{row}">
                <span>[{{row.type}}]{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="学习年度">
              <template slot-scope="{row}">
                <span>{{ row.nd  }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="学时">
              <template slot-scope="{row}">
                <span>{{ row.xs  }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="考核结果">
              <template slot-scope="{row}">
                <span>{{ row.score>=60?'合格':(row.score==-1)?'还未考试':'不合格'}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="m-no-data tc ng-scope" v-else>
          <img src="../../../assets/images/no-data_hash5abcd2ef62.png" alt="空数据">
          <p class="txt">当前还没有数据哦</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  export default {
   name: 'verify',
   data() {
     return {
       name: this.$route.query.name,
       cardId:this.$route.query.cardId,
       list:[],
       total:0,
     }
   },
   beforeMount(){
     this.getData()
   },
   methods:{
     getData(){
      let param={name: this.name, cardId:this.cardId}
      if( !param.name || !param.cardId ){
         return
      }
      httpServer( "course.GetVerifyList", param).then(res=>{
        this.list = res.data||[];
        this.total = this.list.length;
      })
     }
   }
  }
</script>

<style>
  @import url("./index.css");
</style>
