<template>
  <div id="other-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-form :model="form" :rules="rules" 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" placeholder="请输入持枪证编码"></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" placeholder="持枪证枪型代码"></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-date-picker
                        v-model="form.gun_date"
                        placeholder="请选择"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        type="date"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="longlabel">
                    <el-form-item label="持枪证有效期止" prop="gun_enddate">
                      <el-date-picker
                        v-model="form.gun_enddate"
                        placeholder="请选择"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        type="date"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </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" placeholder="请输入持枪证发证机关代码"></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">
                  <template slot="btn">
                    <el-button type="primary" size="mini" @click="show = true">添加/修改</el-button>
                  </template>
                </data-table>
                <!-- <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="证件名称" prop="cert_name">
                      <el-input v-model="form.cert_name" placeholder="请输入证件名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件号码" prop="cert_num">
                      <el-input v-model="form.cert_num" placeholder="请输入证件号码"></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"> 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" placeholder="请输入采集人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="采集日期" prop="fingerprint_date">
                      <el-date-picker
                        v-model="form.fingerprint_date"
                        placeholder="请选择"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        type="date"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </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" placeholder="请输入DNA指纹采集公安机关"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog class="dialog" title="其他专业资格证信息管理" :visible.sync="show" width="30%" :before-close="close" :close-on-click-modal="false">
      <el-form :model="certForm" :rules="certRules" ref="certForm" label-width="130px">
        <el-form-item label="证件名称" prop="cert_name">
          <el-input v-model="certForm.cert_name" placeholder="请输入证件名称"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="cert_num">
          <el-input v-model="certForm.cert_num" placeholder="请输入证件号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showBtn('form')">提交</el-button>
        </el-form-item>
        <p class="remark">如您有多个其他专业资格证，请用；符号进行隔开添加。</p>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: security_guard_others } = createNamespacedHelpers('security_guard_others');
export default {
  name: 'other-1',
  props: { basic_id: { type: String } },
  components: {},
  data: function () {
    return {
      form: {},
      rules: {
        gun_num: [{ required: false, message: '请输入持枪证编码', trigger: 'blur' }],
        gun_code: [{ required: false, message: '持枪证枪型代码', trigger: 'blur' }],
        gun_date: [{ required: false, message: '请选择', trigger: 'change' }],
        gun_enddate: [{ required: false, message: '请选择', trigger: 'change' }],
        gun_office: [{ required: false, message: '请输入持枪证发证机关代码', trigger: 'blur' }],
        cert_name: [{ required: false, message: '请输入证件名称', trigger: 'blur' }],
        cert_num: [{ required: false, message: '请输入证件号码', trigger: 'blur' }],
        fingerprint_num: [{ required: false, message: '请输入指纹卡号', trigger: 'blur' }],
        fingerprint_date: [{ required: false, message: '请选择', trigger: 'change' }],
        fingerprint_personal: [{ required: false, message: '请输入采集人', trigger: 'blur' }],
        fingerprint_mech: [{ required: false, message: '请输入采集机构', trigger: 'blur' }],
        fingerprint_code: [{ required: false, message: '请输入DNA编码', trigger: 'blur' }],
        fingerprint_office: [{ required: false, message: '请输入DNA指纹采集公安机关', trigger: 'blur' }],
      },
      // 其他专业资格证
      certForm: {},
      certRules: {},
      fields: [
        { label: '证件名称', model: 'cert_name' },
        { label: '证件号', model: 'cert_num' },
      ],
      show: false,
      opera: [],
      list: [],
    };
  },
  created() {
    if (this.id) this.search();
  },
  methods: {
    ...security_guard_others(['fetch', 'create', 'update']),
    async search() {
      let res = await this.fetch({ security_guard_id: this.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 || '' };
          this.$set(this, `certForm`, data);
          if (data) this.getOther(data);
        } else {
          this.$set(this, `form`, {});
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          if (data.id) {
            let res = await this.update(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          } else {
            data.security_guard_id = this.id ? this.id : this.basic_id;
            let res = await this.create(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 提交
    async showBtn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.certForm;
          this.getOther(data);
          this.$set(this.form, `cert_name`, data.cert_name);
          this.$set(this.form, `cert_num`, data.cert_num);
          this.show = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 其他专业资格证
    close() {
      this.certForm = {};
      this.show = false;
    },
    // 整理其他专业资格证
    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']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    basic_id: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$set(this.form, `security_guard_id`, this.basic_id);
      },
    },
  },
};
</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;
      }
    }
    .btn {
      text-align: center;
    }
  }
}
.dialog {
  /deep/.el-dialog__body {
    padding: 10px;
  }
  .btn {
    text-align: center;
  }
  .remark {
    color: #ff0000;
    font-weight: bold;
  }
}
</style>
