<template>
  <div id="zkz-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1"> 准考证号 </el-col>
          <el-col :span="24" class="one_2">
            <el-col :span="24" class="one_2one">
              <el-col :span="20" class="left">
                <p>
                  <span>准考证号</span><span>{{ info.exam_num }}</span>
                </p>
                <p>
                  <span>姓名</span><span>{{ info.name }}</span>
                </p>
                <p>
                  <span>身份证号</span><span>{{ info.card }}</span>
                </p>
                <p>
                  <span>考试等级</span><span>{{ info.exam_grade }}</span>
                </p>
              </el-col>
              <el-col :span="4" class="right">
                <el-image :src="info.head">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i></div
                ></el-image>
              </el-col>
            </el-col>
            <el-col :span="24" class="one_2two">
              <p>
                <span>考点编号</span>
                <span>{{ info.testsite_num }}</span>
              </p>
              <p>
                <span>座位号</span>
                <span>{{ info.seat_num }}</span>
              </p>
              <p>
                <span>公安机关</span>
                <span>{{ info.police_office }}</span>
              </p>
              <p>
                <span>考试地点</span>
                <span>{{ info.exam_addr }}</span>
              </p>
              <p style="text-align: center; font-weight: bold">考试时间表</p>
              <p>
                <span>考试日期</span>
                <span>{{ info.exam_date }}</span>
              </p>
              <p>
                <span>考试时间</span>
                <span>{{ info.exam_time }}</span>
              </p>
              <p>
                <span>考试类型</span>
                <span>{{ info.exam_type }}</span>
              </p>
            </el-col>
            <el-col :span="24" class="one_2thr">
              <el-col :span="24" class="left"><img :src="qc" /></el-col>
              <el-col :span="24" class="right">
                <p>1.考生持准考证和有效证件（居民身份证，护照，港，澳，台回乡证），方可进入考场</p>
                <p>2.考试时间以北京时间为准，考生凭准考证和有效证件（居民身份证，护照，港，澳，台回乡证）入场，考试正式开始前十五分钟入场迟到考生责任自负。</p>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import QRCode from 'qrcode';
export default {
  name: 'zkz-1',
  props: {
    info: { type: Object },
  },
  components: {},
  data: function () {
    return {
      qc: '',
    };
  },
  created() {},
  methods: {
    async creatQrCode(data) {
      if (data) {
        let url = `${process.env.VUE_APP_HOST}?id=${data.id}`; // 需要转换为二维码的内容
        this.qc = await QRCode.toDataURL(url, { height: 130, width: 130 });
      }
    },
  },
  mounted() {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.creatQrCode(val);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      text-align: center;
      margin: 10px 0;
    }
    .one_2 {
      .one_2one {
        .left {
          border: 1px solid #000;
          border-bottom: none;
          p {
            height: 40px;
            overflow: hidden;
            line-height: 40px;
            border-bottom: 1px solid #000;
            font-size: 18px;
            span {
              display: inline-block;
              padding: 0 10px;
              text-align: center;
              border-right: 1px solid #000;
            }
            span:first-child {
              width: 20%;
            }
            span:last-child {
              width: 73%;
              border-right: none;
            }
          }
        }
        .right {
          border: 1px solid #000;
          height: 166px;
          overflow: hidden;
          .el-image {
            width: 100%;
            /deep/.el-image__inner {
              height: 165px;
              overflow: hidden;
            }
          }
        }
      }
      .one_2two {
        border: 1px solid #000;
        p {
          height: 40px;
          overflow: hidden;
          line-height: 40px;
          border-bottom: 1px solid #000;
          font-size: 18px;
          span {
            display: inline-block;
            padding: 0 10px;
            border-right: 1px solid #000;
            text-align: center;
          }
          span:first-child {
            width: 16.7%;
          }
          span:last-child {
            width: 77%;
            border-right: none;
          }
        }
      }
      .one_2thr {
        margin: 10px 0;
        .left {
          text-align: center;
        }
        .right {
          padding: 0 10px;
          p {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
