<template>
  <div class='main-content'>
    <baseTable
      ref='systemParamsTable'
      :tableHeader='tableHeader'
      :tableData='tableData'
      :tableOperate='tableOperate'
      :searchParams='searchParams'
      @searchFn='searchFn'
      @resetFn='resetFn'
      @addFn='addFn'
      @batchDelFn='batchDelFn'
    >
      <template slot='search'>
        <el-form-item label='code'>
          <el-input v-model.trim='searchParams.code' />
        </el-form-item>
        <el-form-item label='value'>
          <el-input v-model.trim='searchParams.value' />
        </el-form-item>
        <el-form-item label='备注'>
          <el-input v-model.trim='searchParams.remark' />
        </el-form-item>
      </template>
    </baseTable>
    <el-dialog width='500px' :visible.sync='formDialog.visible' :title='formDialog.title' :close-on-click-modal='false'
               :destroy-on-close='true'>
      <el-form ref='systemParamsForm' label-width='120px' :model='formDialog.formData' :rules='formDialog.formRules'>
        <el-form-item label='id' prop='id' style='display: none'>
          <el-input v-model.trim='formDialog.formData.id' maxlength='20' show-word-limit style='width: 90%;' />
        </el-form-item>
        <el-form-item label='code' prop='code'>
          <el-input v-model.trim='formDialog.formData.code' maxlength='255' show-word-limit style='width: 90%;' />
        </el-form-item>
        <el-form-item label='value' prop='value'>
          <el-input type='textarea' v-model.trim='formDialog.formData.value' :rows='4' />
        </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'>
        <el-button type='primary' :loading='formDialog.loading' @click='submitFn'>确认</el-button>
        <el-button @click='cancelFn'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createSystemParams,
  fetchSystemParamsPage,
  removeSystemParams,
  updateSystemParams
} from '@api/upms/params';

export default {
  name: 'SystemParams',
  components: {},
  data() {
    return {
      tableHeader: [
        {
          label: 'code',
          prop: 'code',
          align: 'center'
        },
        {
          label: 'value',
          prop: 'value',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'center'
        }
      ],
      tableData: [],
      tableOperate: [
        {
          label: '编辑',
          type: 'primary',
          icon: 'el-icon-edit',
          func: row => {
            this.editFn(row);
          }
        },
        {
          label: '删除',
          type: 'danger',
          icon: 'el-icon-delete',
          func: row => {
            this.delFn(row);
          }
        }
      ],
      defaultSearch: {},
      searchParams: Object.assign({}, this.$search),
      uploadParams: {},
      formDialog: {
        title: '',
        visible: false,
        loading: false,
        formData: {},
        defaultData: {},
        formRules: {
          code: [{ required: true, message: '请输入code', trigger: 'blur' }],
          value: [{ required: true, message: '请输入value', trigger: 'blur' }]
        }
      }
    };
  },
  methods: {
    searchFn(isReset = false) {
      let vm = this;
      if (isReset) {
        vm.searchParams = Object.assign(vm.searchParams, vm.$search);
      }
      fetchSystemParamsPage(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({}, vm.defaultSearch, 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);
    },
    cancelFn() {
      let vm = this;
      vm.formDialog.visible = false;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
      vm.$refs.systemParamsForm.resetFields();
    },
    submitFn() {
      let vm = this;
      vm.formDialog.loading = true;
      vm.$refs.systemParamsForm.validate(valid => {
        if (!valid) {
          vm.formDialog.loading = false;
          return;
        }
        let formData = vm.formDialog.formData;
        if (formData.id) {
          updateSystemParams(formData).then(
            (res) => {
              vm.formDialog.visible = false;
              vm.formDialog.loading = false;
              vm.$message.success(res.msg);
              vm.searchFn(true);
            },
            (error) => {
              vm.$notify.error({
                title: error.data.msg,
                message: error.data.data
              });
              vm.formDialog.loading = false;
            }
          );
        } else {
          createSystemParams(formData).then(
            (res) => {
              vm.formDialog.visible = false;
              vm.formDialog.loading = false;
              vm.$message.success(res.msg);
              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];
        removeSystemParams({ 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.$Modal.warning({
          title: '提示',
          content: '请选择要删除的记录'
        });
        return;
      }
      vm.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        let ids = rows.map(row => row.id);
        removeSystemParams({ ids: ids }).then(
          (res) => {
            vm.$message.success(res.msg);
            vm.searchFn(true);
          },
          (error) => {
            vm.$notify.error({
              title: error.data.msg,
              message: error.data.data
            });
          }
        );
      });
    }
  },
  created() {
    this.searchFn();
  }
};
</script>

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