<template>
  <div id="other-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-form :model="form" ref="form" label-width="160px">
            <el-col :span="24" class="second_1">
              <el-col :span="24" class="second_1text"> 公务用枪情况: </el-col>
              <el-col :span="24" class="second_1info">
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="持枪证编码" prop="gun_num">
                      <el-input v-model="form.gun_num" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="longlabel">
                    <el-form-item label="持枪证枪型代码" prop="gun_code">
                      <el-input v-model="form.gun_code" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="12" class="longlabel">
                    <el-form-item label="持枪证发证日期" prop="gun_date">
                      <el-input v-model="form.gun_date" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="longlabel">
                    <el-form-item label="持枪证有效期止" prop="gun_enddate">
                      <el-input v-model="form.gun_enddate" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="24" class="longlabel">
                    <el-form-item label="持枪证发证机关代码" prop="gun_office">
                      <el-input v-model="form.gun_office" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="second_1">
              <el-col :span="24" class="second_1text"> 其他专业资格证: </el-col>
              <el-col :span="24" class="second_1info">
                <data-table :fields="fields" :opera="opera" :data="list" :usePage="false"> </data-table>
              </el-col>
            </el-col>
            <el-col :span="24" class="second_1">
              <el-col :span="24" class="second_1text"> DNA指纹采集情况: </el-col>
              <el-col :span="24" class="second_1info">
                <el-col :span="24">
                  <el-col :span="8">
                    <el-form-item label="采集人" prop="fingerprint_personal">
                      <el-input v-model="form.fingerprint_personal" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="采集日期" prop="fingerprint_date">
                      <el-input v-model="form.fingerprint_date" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="longlabel">
                    <el-form-item label="DNA指纹采集公安机关" prop="fingerprint_office">
                      <el-input v-model="form.fingerprint_office" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { mapActions: security_guard_others } = createNamespacedHelpers('security_guard_others');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'other-1',
  props: { basic_id: { type: String } },
  components: {},
  data: function () {
    return {
      form: {},
      fields: [
        { label: '证件名称', model: 'cert_name' },
        { label: '证件号', model: 'cert_num' },
      ],
      opera: [],
      list: [],
    };
  },
  created() {
    if (this.basic_id) this.search();
  },
  methods: {
    ...security_guard_others(['fetch']),
    async search() {
      let res = await this.fetch({ security_guard_id: this.basic_id });
      if (this.$checkRes(res)) {
        if (res.data) {
          this.$set(this, `form`, res.data);
          let data = { cert_name: res.data.cert_name || '', cert_num: res.data.cert_num || '' };
          if (data) this.getOther(data);
        }
      }
    },
    // 整理其他专业资格证
    getOther(data) {
      let p1 = data.cert_name.split('；').map((i) => ({ cert_name: i }));
      let p2 = data.cert_num.split('；').map((i) => ({ cert_num: i }));
      var obj = p1.map((item, index) => {
        return { ...item, ...p2[index] };
      });
      this.$set(this, `list`, obj);
    },
  },
  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 {
    .second_1 {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      margin: 0 0 10px 0;
      .second_1text {
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #ccc;
        margin: 0 0 8px 0;
      }
    }
  }
}
</style>
