<template>
  <div class='main-content'>
    <baseTable
      ref='dictTable'
      :tableHeader='tableHeader'
      :tableData='tableData'
      :tableOperate='tableOperate'
      :searchParams='searchParams'
      :importBtn='false'
      @searchFn='searchFn'
      @importFn='importFn'
      @resetFn='resetFn'
      @addFn='addFn'
      @batchDelFn='batchDelFn'
      @refreshDictFn='refreshDictFn'
    >
      <template slot='search'>
        <el-form-item label='字典中文名称'>
          <el-input v-model.trim='searchParams.dictNameCn' />
        </el-form-item>
        <el-form-item label='字典英文名称'>
          <el-input v-model.trim='searchParams.dictNameEn' />
        </el-form-item>
      </template>
      <template slot='operation'>
        <el-dropdown-item command='refreshDictFn'>刷新字典</el-dropdown-item>
      </template>
    </baseTable>
    <el-dialog width='600px' :title='formDialog.title' :visible.sync='formDialog.visible' :close-on-click-modal='false'>
      <el-form ref='dictForm' :model='formDialog.formData' :rules='formDialog.formRules'>
        <el-form-item label='字典名称-中文' prop='dictNameCn'>
          <el-input v-model.trim='formDialog.formData.dictNameCn' />
        </el-form-item>
        <el-form-item label='字典名称-英文' prop='dictNameEn'>
          <el-input v-model.trim='formDialog.formData.dictNameEn' />
        </el-form-item>
        <el-form-item label='备注' prop='remark'>
          <el-input type='textarea' v-model.trim='formDialog.formData.remark' :rows='4' />
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button type='primary' :loading='formDialog.loading' @click='submitFn'>确定</el-button>
        <el-button @click='cancelFn'>取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width='800px'
      :title='optionFormDialog.title'
      :visible.sync='optionFormDialog.visible'
      :close-on-click-modal='false'
    >
      <dictionaryOption ref='dictionaryOption' :dictId='optionFormDialog.dictId' />
    </el-dialog>
  </div>
</template>

<script>
import dictionaryOption from '@views/system/dictionary-option';
import {
  createDictionary,
  fetchDictionaries,
  refreshDictionary,
  removeDictionary,
  updateDictionary
} from '@api/upms/api-dictionary';

export default {
  name: 'Dictionary',
  components: {
    dictionaryOption
  },
  data() {
    return {
      uploadParams: {},
      searchParams: Object.assign({}, this.$search),
      tableHeader: [
        {
          label: '字典名称-中文',
          prop: 'dictNameCn',
          align: 'left',
          width: 250
        },
        {
          label: '字典名称-英文',
          prop: 'dictNameEn',
          align: 'left',
          width: 200
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'left'
        }
      ],
      tableData: [],
      tableOperate: [
        {
          label: '设置',
          type: 'info',
          icon: 'el-icon-setting',
          func: (row) => {
            this.dictOptionFn(row);
          }
        },
        {
          label: '编辑',
          type: 'primary',
          icon: 'el-icon-edit',
          func: (row) => {
            this.editFn(row);
          }
        },
        {
          label: '删除',
          type: 'danger',
          icon: 'el-icon-delete',
          func: (row) => {
            this.delFn(row);
          }
        }
      ],
      formDialog: {
        title: '',
        visible: false,
        loading: false,
        formData: {},
        defaultData: {
          ord: 99
        },
        formRules: {
          dictNameCn: [{ required: true, message: '请输入字典名称-中文', trigger: 'blur' }],
          dictNameEn: [{ required: true, message: '请输入字典名称-英文', trigger: 'blur' }]
        }
      },
      optionFormDialog: {
        title: '设置字典项',
        visible: false,
        dictId: '0'
      },
      importFile: {
        title: '导入文件',
        visible: false
      }
    };
  },
  methods: {
    searchFn(isReset = false) {
      let vm = this;
      if (isReset) {
        vm.searchParams = Object.assign(vm.searchParams, vm.$search);
      }
      fetchDictionaries(vm.searchParams).then(
        (res) => {
          vm.tableData = res.data.records;
          vm.searchParams.total = res.data.total;
        },
        (error) => {
          vm.$notify.error({
            title: error.data.msg,
            message: error.data.data
          });
        }
      );
    },
    resetFn() {
      let vm = this;
      vm.searchParams = Object.assign({}, this.$search);
      vm.searchFn();
    },
    addFn() {
      let vm = this;
      vm.formDialog.title = '新增';
      vm.formDialog.visible = true;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
    },
    editFn(row) {
      let vm = this;
      vm.formDialog.title = '编辑';
      vm.formDialog.visible = true;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, row);
    },
    detailFn(row) {
      let vm = this;
      vm.formDialog.title = '查看';
      vm.formDialog.visible = true;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign(vm.formDialog.formData, row);
    },
    cancelFn() {
      let vm = this;
      vm.formDialog.visible = false;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
      vm.$refs.dictForm.resetFields();
    },
    submitFn() {
      let vm = this;
      vm.formDialog.loading = true;
      vm.$refs.dictForm.validate((valid) => {
        if (!valid) {
          vm.formDialog.loading = false;
          return;
        }
        let formData = vm.formDialog.formData;
        if (formData.id) {
          updateDictionary(formData).then(
            (res) => {
              vm.$message.success(res.msg);
              vm.formDialog.visible = false;
              vm.formDialog.loading = false;
              vm.searchFn(true);
            },
            (error) => {
              vm.$notify.error({
                title: error.data.msg,
                message: error.data.data
              });
              vm.formDialog.loading = false;
            }
          );
        } else {
          createDictionary(formData).then(
            (res) => {
              vm.$message.success(res.msg);
              vm.formDialog.visible = false;
              vm.formDialog.loading = false;
              vm.searchFn(true);
            },
            (error) => {
              vm.$notify.error({
                title: error.data.msg,
                message: error.data.data
              });
              vm.formDialog.loading = false;
            }
          );
        }
      });
    },
    delFn(row) {
      let vm = this;
      vm.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        let ids = [row.id];
        removeDictionary({ ids: ids }).then(
          (res) => {
            vm.$message.success(res.msg);
            vm.searchFn(true);
          },
          (error) => {
            vm.$notify.error({
              title: error.data.msg,
              message: error.data.data
            });
          }
        );
      });
    },
    batchDelFn(rows) {
      let vm = this;
      if (!rows || rows.length === 0) {
        vm.$message.warning('请选择要删除的记录');
        return;
      }
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        let ids = rows.map((row) => row.id);
        removeDictionary({ ids: ids }).then(
          (res) => {
            vm.$message.success(res.msg);
            vm.searchFn(true);
          },
          (error) => {
            vm.$notify.error({
              title: error.data.msg,
              message: error.data.data
            });
          }
        );
      });
    },
    refreshDictFn() {
      let vm = this;
      refreshDictionary().then((res) => {
        vm.$store.dispatch('setDict', res.data);
        vm.$message.success(res.msg);
      });
    },
    dictOptionFn(row) {
      let vm = this;
      vm.optionFormDialog.visible = true;
      vm.optionFormDialog.dictId = row.id;
    },
    importFn() {
      let vm = this;
      vm.importFile.visible = true;
    },
    importCloseFn() {
      let vm = this;
      vm.importFile.visible = false;
      vm.searchFn(false);
    }
  },
  created() {
    this.searchFn();
  }
};
</script>

<style scoped lang='less'></style>
