<template>
  <a-card :bordered="false" :title="pageName">
    <template slot="extra">
      <a-button size="small" @click="save" type="primary">保存</a-button>
      <a-button size="small" @click="close">返回</a-button>
    </template>

    <a-form-model :model="form">
      <a-form-model-item label="证书名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-input v-model="form.name" placeholder="证书名称" />
      </a-form-model-item>
      <a-form-model-item label="证书注册日期" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-date-picker v-model="form.registerDate" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="证书注册日期" />
      </a-form-model-item>
      <a-form-model-item label="证书有效期" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-date-picker v-model="form.validityStartDate" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="证书有效期开始日期" />
        -
        <a-date-picker v-model="form.validityEndDate" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" placeholder="证书有效期结束日期" />
      </a-form-model-item>
      <a-form-model-item label="证书类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-select v-model="form.type" placeholder="请选择证书类型" :allowClear="true">
          <a-select-option v-for="(item, index) in certificateType" :key="index" :value="item.value">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- <a-form-model-item label="证书状态" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-select v-model="form.state" placeholder="请选择证书状态" :allowClear="true">
          <a-select-option v-for="(item, index) in certificateState" :key="index" :value="item.value">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item> -->
      <a-form-model-item label="证书照片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <db-upload v-model="fileList"></db-upload>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import DbUpload from '@/components/DbUpload/DbUpload.vue'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { addPersonCertificate, findPersonCertificateDetail } from '@/api/archives/certificate'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { DbUpload },
  props: {},
  data() {
    // 这里存放数据
    return {
      pageName: this.$route.query.certificateId ? '证书编辑' : '证书新增',
      fileList: [],
      form: {},
      certificateType: [], // 证书类型
      certificateState: [], // 证书状态
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 返回 按钮
    close() {
      if (this.$route.query.certificateId) this.$router.push({ path: '/archives/certificate/Index', query: {} });
      else this.$router.push({ path: '/personList', query: {} });
    },

    // 加载证书信息
    loadCertificateInfo() {
      if (!this.$route.query.certificateId) return;

      findPersonCertificateDetail({ id: this.$route.query.certificateId }).then(res => {
        this.form = res.data;
        this.fileList = JSON.parse(res.data.file);
      })

    },

    // 获取词典项
    dictionaryDropDown() {
      // 获取证书类型
      dictionaryDropDown({ dictionaryCode: '0001' }).then((res) => {
        this.certificateType = res.data;
      })
      // 获取证书状态
      dictionaryDropDown({ dictionaryCode: '0010' }).then((res) => {
        this.certificateState = res.data;
      })
    },

    // 保存 按钮
    save() {
      let personCertificate = this.form;

      console.log(this.fileList)

      if (!personCertificate.id) personCertificate.personId = parseInt(this.$route.query.personId);
      personCertificate.file = JSON.stringify(this.fileList);
      console.log('save---', this.form)

      addPersonCertificate(personCertificate).then(res => {
        this.$message.success(this.pageName + "成功!");
        this.close();
      });

    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 加载词典项
    this.dictionaryDropDown();

    // 加载证书数据
    this.loadCertificateInfo();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
};

</script>
<style scoped>
</style>