<template>
  <div id="certrecord-1">
    <el-row>
      <el-col :span="24" class="main">
        <data-table :fields="fields" :opera="opera" :data="list" :usePage="false" @view="toView"> </data-table>
      </el-col>
    </el-row>
    <el-dialog class="dialog" title="发放登记详情" :visible.sync="show" width="50%" :before-close="close" :close-on-click-modal="false">
      <el-form ref="info" :model="info" label-width="130px">
        <el-col :span="24">
          <el-form-item label="保安员证编码" prop="baoan_num">
            <el-input v-model="info.baoan_num" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保安员姓名" prop="name">
            <el-input v-model="info.name" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公民身份证号" prop="card">
            <el-input v-model="info.card" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保安员等级" prop="exam_grade">
            <el-input v-model="info.exam_grade" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打印公安机关名称" prop="cert_police">
            <el-input v-model="info.cert_police" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申领原因" prop="receive_reason">
            <el-input v-model="info.receive_reason" readonly type="textarea" rows="2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打印人" prop="print_personal">
            <el-input v-model="info.print_personal" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打印时间" prop="print_date">
            <el-input v-model="info.print_date" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领取时间" prop="receive_date">
            <el-input v-model="info.receive_date" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领取姓名" prop="receive_name">
            <el-input v-model="info.receive_name" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领取人身份证号" prop="receive_card">
            <el-input v-model="info.receive_card" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领取人联系电话" prop="receive_phone">
            <el-input v-model="info.receive_phone" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记人" prop="register_personal">
            <el-input v-model="info.register_personal" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记时间" prop="register_date">
            <el-input v-model="info.register_date" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: certificates_grant } = createNamespacedHelpers('certificates_grant');

export default {
  name: 'certrecord-1',
  props: { basic_id: { type: String } },
  components: {},
  data: function () {
    return {
      fields: [
        { label: '发证日期', model: 'print_date' },
        { label: '发证公安机关', model: 'cert_police' },
        { label: '职业等级', model: 'exam_grade' },
        { label: '领取时间', model: 'receive_date' },
        { label: '领取人', model: 'receive_name' },
        { label: '申领原因', model: 'receive_reason' },
      ],
      opera: [{ label: '详情', method: 'view' }],
      list: [],
      // 详情
      show: false,
      info: {},
    };
  },
  created() {},
  methods: {
    ...certificates_grant(['query']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      info.security_guard_id = this.basic_id;
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
    // 详情
    toView({ data }) {
      this.$set(this, `info`, data);
      this.show = true;
    },
    // 关闭
    close() {
      this.show = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    basic_id: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.search();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  /deep/.el-dialog__body {
    height: 500px;
    padding: 10px;
  }
}
</style>
