<template>
  <div id="card-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-form ref="info" :model="info" label-width="120px">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="info.name" readonly></el-input>
              </el-form-item>
              <el-form-item label="公民身份号码">
                <el-input v-model="info.card" readonly></el-input>
              </el-form-item>
              <el-form-item label="准考证号">
                <el-input v-model="info.exam_num" readonly></el-input>
              </el-form-item>
              <el-form-item label="考试等级">
                <el-input v-model="info.exam_grade" readonly></el-input>
              </el-form-item>
              <el-form-item label="考试日期">
                <el-input v-model="info.exam_date" readonly></el-input>
              </el-form-item>
              <el-form-item label="考试时间">
                <el-input v-model="info.exam_time" readonly></el-input>
              </el-form-item>
              <el-form-item label="考试地点">
                <el-input v-model="info.exam_addr" readonly></el-input>
              </el-form-item>
              <el-form-item label="准考证打印时间">
                <el-input v-model="info.exam_printdate" readonly></el-input>
              </el-form-item>
              <el-form-item label="考试成绩">
                <el-input v-model="info.exam_achieve" readonly></el-input>
              </el-form-item>
              <el-form-item label="成绩登记时间">
                <el-input v-model="info.exam_register" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="right">
              <el-col :span="24" class="image">
                <el-image :src="head">
                  <div slot="error" class="image-slot">暂无图片</div>
                </el-image>
              </el-col>
              <el-col :span="24">
                <el-form-item label="考试类型">
                  <el-input v-model="info.exam_type" readonly></el-input>
                </el-form-item>
                <el-form-item label="准考证打印人">
                  <el-input v-model="info.exam_printper" readonly></el-input>
                </el-form-item>
                <el-form-item label="发证公安机关">
                  <el-input v-model="info.exam_cardpolice" readonly></el-input>
                </el-form-item>
                <el-form-item label="登记人">
                  <el-input v-model="info.exam_registerper" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: security_guard_collect } = createNamespacedHelpers('security_guard_collect');
export default {
  name: 'card-1',
  props: {
    info: { type: Object },
  },
  components: {},
  data: function () {
    return {
      head: '',
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...security_guard_collect(['query']),
    async search() {
      let res = await this.query({ security_guard_id: this.info.security_guard_id, type: '人像' });
      if (this.$checkRes(res)) {
        let data = res.data[0];
        if (data) this.$set(this, `head`, data.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    /deep/.el-form-item {
      margin: 0 0 10px 0;
    }
    .right {
      .image {
        text-align: center;
        height: 305px;
        padding: 10% 0;
        /deep/.el-image__inner {
          width: 130px;
          height: 140px;
        }
        /deep/.image-slot {
          width: 130px;
          height: 140px;
          line-height: 140px;
          text-align: center;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
