<template>
  <a-card :bordered="false" title="证书类型">
    <template slot="extra">
      <a-button size="small" @click="close">返回</a-button>
    </template>

    <div class="table-page-search-wrapper">
      <div style="width: 100%; height: 32px; margin-bottom: 8px;">
        <a-button type="primary" @click="addCertificateType()">新增证书类型</a-button>
      </div>
    </div>

    <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData" :showPagination="false">
      <template slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="edit(record)">编辑</a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a-popconfirm title="确定要删除该证书类型?" ok-text="确认" cancel-text="取消" @confirm="del(record)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </s-table>

    <a-modal v-model="isAdd" :width="700" title="新增证书类型" ok-text="确认" cancel-text="取消" @ok="addCertificateTypeQR">
      <a-form-model :model="addForm" :label-col="{span: 5}" :wrapper-col="{span: 19}">
        <a-form-model-item label="证书类型名称" :rules="{ required: true, message: '请输入证书类型名称！' }">
          <a-input v-model="addForm.name" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getCertificateTypeList, getCertificateType, getCertificateTypeMaxValue, addCertificateType, delCertificateType, editCertificateType } from '@/api/archives/certificate'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { STable },
  props: {},
  data() {
    // 这里存放数据
    return {
      isAdd: false,
      addForm: {
        name: ''
      },
      editForm: {},
      queryParam: { dictionaryCode: '0001' },
      columns: [
        { title: '证书类型', width: 'auto', align: 'center', dataIndex: 'name', key: 'name' },
        { title: '操作', width: '170px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      loadData: parameter => { return getCertificateTypeList(Object.assign(parameter, this.queryParam)).then((res) => { return res.data; }); },
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 返回 按钮
    close() {
      this.$router.push({
        path: '/archives/certificate/Index', query: {

        }
      });
    },

    // 新增证书类型
    addCertificateType() {
      this.addForm.name = "";
      this.isAdd = true;
    },
    addCertificateTypeQR() {
      if (!this.addForm.name || this.addForm.name === '') {
        this.$message.error("请输入证书类型名称!");
        return;
      }

      // 如果修改form内有值 则走修改
      if (this.editForm.id) {
        if (this.editForm.name === this.addForm.name) {
          this.$message.success("证书类型名称与之前一致，不需要发起修改");
          this.isAdd = false;
          return;
        }

        this.editForm.name = this.addForm.name;
        editCertificateType(this.editForm).then(res => {
          this.$message.success("修改成功!");
          this.editForm = {};
          this.isAdd = false;
          this.$refs.table.refresh(true);
        });
        return;
      }

      let certificateType = {};
      certificateType.dictionaryCode = '0001';
      certificateType.name = this.addForm.name;
      certificateType.parentid = 0;

      // 先获取该词典项下最大value
      getCertificateTypeMaxValue(certificateType).then(res => {
        certificateType.value = res.data;

        // 再发起新增
        addCertificateType(certificateType).then(res => {
          this.$message.success("新增成功!");
          this.isAdd = false;
          this.$refs.table.refresh(true);
        });
      });
    },

    // 编辑词典项
    edit(record) {
      getCertificateType({ id: record.id }).then(res => {
        this.isAdd = true;
        this.addForm.name = res.data.name;
        this.editForm = res.data;
      });
    },

    // 删除证书类型
    del(record) {
      delCertificateType({ ids: record.id, deleteReason: '' }).then(res => { this.$refs.table.refresh(true); });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
};

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