<template>
  <div class='main-content'>
    <baseTable
      ref='tenantTable'
      :tableHeader='tableHeader'
      :tableData='tableData'
      :tableOperate='tableOperate'
      :searchParams='searchParams'
      @searchFn='searchFn'
      @resetFn='resetFn'
      @addFn='addFn'
      @batchDelFn='batchDelFn'
    >
      <template slot='search'>
        <el-form-item label='接口前缀'>
          <el-input v-model.trim='searchParams.urlPrefix' />
        </el-form-item>
        <el-form-item label='租户名称'>
          <el-input v-model.trim='searchParams.name' />
        </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='tenantForm' label-width='120px' :model='formDialog.formData' :rules='formDialog.formRules'>
        <el-form-item label='主键' prop='id' v-if='formDialog.formData.id'>
          <el-input v-model.trim='formDialog.formData.id' maxlength='19' show-word-limit style='width: 90%;' disabled />
        </el-form-item>
        <el-form-item label='租户名称' prop='name'>
          <el-input v-model.trim='formDialog.formData.name' maxlength='30' show-word-limit style='width: 90%;' />
        </el-form-item>
        <el-form-item label='默认用户名' prop='urlPrefix'>
          <el-input v-model.trim='formDialog.formData.defaultUsername' maxlength='30' placeholder='请输入默认用户名，如:yulin_admin' show-word-limit style='width: 90%;' :disabled='formDialog.formData.id' />
        </el-form-item>
        <el-form-item label='备注' prop='remark'>
          <el-input v-model.trim='formDialog.formData.remark' maxlength='255' show-word-limit style='width: 90%;' />
        </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 {
  fetchTenantPage,
  createTenant,
  updateTenant,
  removeTenant,
  syncTenantMenu
} from '@api/upms/api-tenant';

export default {
  name: 'Tenant',
  components: {},
  data() {
    return {
      tableHeader: [
        {
          label: '主键',
          prop: 'id',
          align: 'center'
        },
        {
          label: '租户名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '默认用户名',
          prop: 'defaultUsername',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'center'
        }
      ],
      tableData: [],
      tableOperate: [
        {
          label: '菜单同步',
          type: 'warning',
          icon: 'el-icon-s-grid',
          show: (row) => {
            return row.id !== '1';
          },
          func: row => {
            this.syncFn(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);
          }
        }
      ],
      defaultSearch: {},
      searchParams: Object.assign({}, this.$search),
      uploadParams: {},
      formDialog: {
        title: '',
        visible: false,
        loading: false,
        formData: {},
        defaultData: {},
        formRules: {}
      }
    };
  },
  methods: {
    searchFn(isReset = false) {
      let vm = this;
      if (isReset) {
        vm.searchParams = Object.assign(vm.searchParams, vm.$search);
      }
      fetchTenantPage(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);
    },
    syncFn(row) {
      let vm = this;
      vm.$confirm('此操作将同步所有菜单到该租户, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        syncTenantMenu({ tenantId: row.id }).then(
          (res) => {
            vm.$message.success(res.msg);
            vm.searchFn(true);
          },
          (error) => {
            vm.$notify.error({
              title: error.data.msg,
              message: error.data.data
            });
          }
        );
      });
    },
    cancelFn() {
      let vm = this;
      vm.formDialog.visible = false;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
      vm.$refs.tenantForm.resetFields();
    },
    submitFn() {
      let vm = this;
      vm.formDialog.loading = true;
      vm.$refs.tenantForm.validate(valid => {
        if (!valid) {
          vm.formDialog.loading = false;
          return;
        }
        let formData = vm.formDialog.formData;
        if (formData.id) {
          updateTenant(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 {
          createTenant(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];
        removeTenant(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.$notify.warning('请选择要删除的记录');
        return;
      }
      vm.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        let ids = rows.map(row => row.id);
        removeTenant(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>
