<template>
   <d2-container class="page">
     <el-tabs value="first">
            <el-tab-pane label="学历电子认证" name="first">


       <center>
        <el-form v-if="byXueXin" label-width="120px" size="mini" style="width: 500px;">
        
           <table class="el-table" style="text-align: right;font-size: 16px;margin-top:0px;margin-bottom:5px;width:100%;border-collapse:separate; border-spacing:0px 10px;" >
                  
                    <tr class="el-table__row">
                      <td align="right" style="padding:8px;">姓名：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.xm}}</td>
                    </tr>

                     <tr class="el-table__row">
                      <td align="right" style="padding:8px;">证件号码：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.zjhm? byXueXin.zjhm.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}</td>
                    </tr>

                   <tr class="el-table__row">
                      <td align="right" style="padding:8px;">院校名称：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.yxmc}}</td>
                    </tr>

                     <tr class="el-table__row">
                      <td align="right" style="padding:8px;">专业名称：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.zymc}}</td>
                    </tr>


                     <tr class="el-table__row">
                      <td align="right" style="padding:8px;">学历层次：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.cc}}</td>
                    </tr>

                    

                   
                    <tr class="el-table__row">
                      <td align="right" style="padding:8px;">毕业年份：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.bynf}}</td>
                    </tr>

                    <tr class="el-table__row">
                      <td align="right" style="padding:8px;">毕结业结论：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.bjyjl}}</td>
                    </tr>


                    <tr class="el-table__row">
                      <td align="right" style="padding:8px;">认证时间：</td>
                       <td align="left" style="padding:8px;">{{byXueXin.create_date}}</td>
                    </tr>



              </table>

           
           
            
         
          
        </el-form>
       
        <el-button type="primary" v-if="byXueXin" @click="payDialogVisible1=true;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重新认证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        <el-button type="primary" v-if="!byXueXin" @click="payDialogVisible1=true;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学历认证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>

      </center>

      
<el-dialog width="500px" id="paymodal" title="信息提示" :visible.sync="payDialogVisible1" :show-close="false" :close-on-click-modal="false">
     
     <div style="margin:5px">
      <center>
        即将对您的学历进行认证，是否同意授权进行？
        <br>
           <el-button type="cancel" style="padding-top:10px;margin-top: 10px;margin-bottom:5px;" size="mini" @click="payDialogVisible1=false;">取消</el-button>

          <el-button type="primary" style="padding-top:10px;margin-top: 10px;margin-bottom:5px;" size="mini" @click="payDialogVisible1=false;showByApplyForBenOne();">同意</el-button>
      </center>
     </div>
     
    </el-dialog>


    <el-dialog width="500px" id="paymodal" title="学历电子认证" :visible.sync="payDialogVisible" :show-close="false" :close-on-click-modal="false">
     <table style="padding-top:0px;margin:0px auto;">
       
       <tr>
         <td align="right" style="">姓名:</td>
        <td>{{stdRegInfo.std_name}}</td>
        
      </tr>
       <tr>
        
         <td align="right">证件号码:</td>
        <td>{{stdRegInfo.cert_no}}</td>
        
        
      </tr>

       <tr>
         
         <td align="right">认证编号:</td>
         <td>{{orderNum}}</td>
        
          </tr>
     
     </table>
     <div style="margin:5px">
      <center>
          <img v-if="base64Code" :src="'data:image/*;base64,' + base64Code" alt="" style="width:300px;height:300px"><br>
      <div style="text-align:left;padding-left:20px;">
       温馨提示：
       <br>
       请您下载学信网手机APP，登录并实人验证绑定本人学历信息后，扫描以上二维码授权本人学历信息核查认定。
      </div>
         
          <el-button type="primary" style="padding-top:10px;margin-top: 10px;margin-bottom:5px;" size="mini" @click="payOk()">完成学历认证后请点击确认</el-button>
      </center>
     </div>
     

     <div style="margin:5px">
       <center>
         <el-button type="primary" size="mini" @click="payDialogVisible=false;">关闭窗口</el-button>
       </center>
     </div>
    </el-dialog>


       </el-tab-pane>
           </el-tabs> 
   </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import util from '@/libs/util.js'
import { log } from 'util';

export default {
  computed: {
    ...mapActions('d2admin/account', [
      'logout'
    ]),
    ...mapState({
      stdRegInfo: state => state.enrol.StdReg,
    })
  },
  data() {
    return {
      orderNum: "",
      payDialogVisible:false,
      payDialogVisible1:false,
      base64Code:null,
      byXueXin:null
    };
  },
  async mounted(){
      window['VM'] = this;
      this.init();
  },
  destroyed(){
      delete window['VM'];
  },
  methods: {
    async init(){
        let { data } = await this.$http.post(
                "/by/byApply/queryEdu.htm",
                this.Qs.stringify({
                  stdId: this.stdRegInfo.id,
                  edu_type:'学历'
                }),
                this.$http.headers.FORM
              );
              if(!data.success){
                this.alert(data.errorMsg);
                
              }
              
                this.byXueXin = data.entity;
             
    },

    async showByApplyForBenOne(){
     let { data } = await this.$http.post(
        "/by/byApply/queryEduXLQrcode.htm",
        this.Qs.stringify({
          stdId: this.stdRegInfo.id
        }),
        this.$http.headers.FORM
      );
      if(!data.success){
        this.alert(data.errorMsg);
        return;
      }
       //let respJson = JSON.parse(data);
        this.orderNum = data.map.bizSerialNum;
       
        this.payDialogVisible = true;
        this.base64Code = data.map.data;
        
   },
   async payOk(){
     
      let res = await this.$http.post("/by/byApply/queryEduXLIsSuccess.htm",
        this.Qs.stringify({
            bizSerialNum:this.orderNum
          }));
      if(res.data.success){
        this.$confirm("学历认证通过！", "信息提示", {
            confirmButtonText: "关闭",
            showCancelButton: false,
            type: "warning"
          })
            .then(async () => {
               this.payDialogVisible1 = false;
                this.payDialogVisible = false;
               this.init();
              
            })
            .catch(() => {});

        
      }else{
        this.$confirm("学历认证未通过（原因："+res.data.errorMsg+"）。", "信息提示", {
            confirmButtonText: "关闭",
            showCancelButton: false,
            type: "warning"
          })
            .then(async () => {
              
              
            })
            .catch(() => {});

      }
   },
  }
};
</script>

<style scoped>
</style>