<template>
  <div>
    <navbar></navbar>
    <div class="p-wrap-full" style="width: 1200px;margin: 20px auto;">
      <el-card>
        <el-form :inline="true" :model="periodObj" class="search-form">
          <el-form-item label="证件号">
            <el-input v-model="periodObj.cardId" placeholder="请输入证件号" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="periodObj.nickname" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goVerify()">立即查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="p-wrap-full" style="width: 1200px;margin: 20px auto;min-height: 500px">
      <el-card class="cert-card" v-for="(item, index) in recodeList" :key="index">
        <div slot="header" class="cert-card-header">
          <span>证书【{{ index + 1 }}】</span>
        </div>
        <div class="cert-card-body">
          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">姓名</span>
              <span class="cert-value">{{ item.userName }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">身份证</span>
              <span class="cert-value">{{ item.cardId }}</span>
            </div>
          </div>
          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">证书编号</span>
              <span class="cert-value">{{ item.certificateNum }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">岗位名称</span>
              <span class="cert-value">{{ item.positionName }}</span>
            </div>
          </div>
          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">证书状态</span>
              <span class="cert-value">{{ item.certificateStatus }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">证书类型</span>
              <span class="cert-value">{{ item.certificateType }}</span>
            </div>
          </div>
          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">岗位编码</span>
              <span class="cert-value">{{ item.careerCode }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">发证机关</span>
              <span class="cert-value">{{ item.certificateOrgan }}</span>
            </div>
          </div>
          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">发证时间</span>
              <span class="cert-value">{{ item.startTime }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">生日</span>
              <span class="cert-value">{{ item.birthday }}</span>
            </div>
          </div>

          <div class="cert-row">
            <div class="cert-item">
              <span class="cert-label">工作单位</span>
              <span class="cert-value">{{ item.workUnit }}</span>
            </div>
            <div class="cert-item">
              <span class="cert-label">复核时间</span>
              <span class="cert-value">{{ item.reviewTime }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
  import navbar from "@/components/nav/navbar.vue";
  import {httpServer} from "@/components/httpServer/httpServer.js";
  export default {
    components: { navbar },
    data(){
      return {
        activeTab: 1,
        periodObj:{
          nickname:'',
          cardId:'',
        },
        recodeList:[] ,
      }
    },
    methods: {
      goVerify(){
        let {nickname,cardId} = this.periodObj;
        if( !nickname || cardId.length <15 || cardId.length> 18){
          this.$message({message:'请输入大陆身份证（15-18位）'})
          return
        }
        httpServer("User.ReLoadRzCode", {nickname,cardId}).then( res=>{
          if( res.code == 200){
            this.recodeList = res.data;
          }
        })
      },
      goSign(){
        this.$router.push({name:'nd-sign'})
      }
    }
  }
</script>

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