<template>
  <div class='main-content'>
    <baseTable
      ref='roleTable'
      :many='false'
      :tableHeader='tableHeader'
      :tableData='tableData'
      :tableOperate='tableOperate'
      :searchParams='searchParams'
      :moreOperation='false'
      @searchFn='searchFn'
      @resetFn='resetFn'
      @addFn='addFn'
    >
      <template slot='search'>
        <el-form-item label='角色中文名'>
          <el-input v-model.trim='searchParams.roleCnName' />
        </el-form-item>
        <el-form-item label='角色英文名'>
          <el-input v-model.trim='searchParams.roleEnName' />
        </el-form-item>
      </template>
    </baseTable>
    <el-dialog width='500px' :title='formDialog.title' :visible.sync='formDialog.visible' :close-on-click-modal='false'>
      <el-form ref='roleForm' label-width='100px' :model='formDialog.formData' :rules='formDialog.formRules'>
        <el-form-item label='角色中文名' prop='roleCnName'>
          <el-input v-model.trim='formDialog.formData.roleCnName' />
        </el-form-item>
        <el-form-item label='角色英文名' prop='roleEnName'>
          <el-input v-model.trim='formDialog.formData.roleEnName' />
        </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='600px'
      :title='grantDialog.title'
      :visible.sync='grantDialog.visible'
      :close-on-click-modal='false'
    >
      <grantMenu :roleId='grantDialog.roleId' v-if='grantDialog.visible' />
      <div slot='footer' class='dialog-footer'>
        <el-button @click='grantDialog.visible = false'>关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width='600px'
      :title='scopeDialog.title'
      :visible.sync='scopeDialog.visible'
      :close-on-click-modal='false'
    >
      <RoleScope :roleId='scopeDialog.roleId' v-if='scopeDialog.visible' />
      <div slot='footer' class='dialog-footer'>
        <el-button @click='scopeDialog.visible = false'>关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import grantMenu from '@views/system/grant-menu';
import RoleScope from '@views/system/components/role-scope';
import { queryRolePage, createRole, updateRole, removeRole } from '@api/upms/api-role';
import { formatDict } from '@utils/global';

export default {
  name: 'Role',
  components: {
    grantMenu,
    RoleScope
  },
  computed: {
    dictYesOrNo() {
      return this.$store.getters.dict.dictYesOrNo;
    }
  },
  data() {
    return {
      tableHeader: [
        {
          label: 'ID',
          prop: 'id',
          align: 'center'
        },
        {
          label: '角色中文名',
          prop: 'roleCnName',
          align: 'center'
        },
        {
          label: '是否超级管理员',
          align: 'center',
          type: 'render',
          render: (h, params) => {
            return h('span', formatDict(this.dictYesOrNo, params.row.superAdmin));
          }
        }
      ],
      tableData: [],
      tableOperate: [
        {
          icon: 'el-icon-s-tools',
          type: 'primary',
          label: '授权菜单',
          func: (row) => {
            this.grantFn(row);
          }
        },
        {
          icon: 'el-icon-guide',
          type: 'primary',
          label: '数据权限',
          func: (row) => {
            this.roleScopeFn(row);
          }
        },
        {
          label: '编辑',
          type: 'primary',
          icon: 'el-icon-edit',
          func: (row) => {
            this.editFn(row);
          }
        },
        {
          label: '删除',
          type: 'danger',
          icon: 'el-icon-delete',
          show: (row) => {
            return row.deletable === '1';
          },
          func: (row) => {
            this.delFn(row);
          }
        }
      ],
      searchParams: Object.assign({}, this.$search),
      formDialog: {
        title: '',
        visible: false,
        loading: false,
        formData: {},
        defaultData: {
          ord: '1'
        },
        formRules: {
          roleCnName: [{ required: true, message: '请输入角色中文名', trigger: 'blur' }],
          roleEnName: [{ required: true, message: '请输入角色英文名', trigger: 'blur' }]
        }
      },
      grantDialog: {
        title: '授权',
        visible: false,
        loading: false,
        roleId: '0',
        menuIds: []
      },
      scopeDialog: {
        title: '数据范围',
        roleId: '0',
        visible: false,
        loading: false
      }
    };
  },
  methods: {
    searchFn(isReset = false) {
      let vm = this;
      if (isReset) {
        vm.searchParams = Object.assign(vm.searchParams, vm.$search);
      }
      queryRolePage(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);
    },
    cancelFn() {
      let vm = this;
      vm.formDialog.visible = false;
      vm.formDialog.loading = false;
      vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
      vm.$refs.roleForm.resetFields();
    },
    submitFn() {
      let vm = this;
      vm.formDialog.loading = true;
      vm.$refs.roleForm.validate((valid) => {
        if (!valid) {
          vm.formDialog.loading = false;
          return;
        }
        let formData = vm.formDialog.formData;
        if (formData.id) {
          updateRole(formData).then(
            (res) => {
              vm.$message.success('修改成功');
              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 {
          createRole(formData).then(
            (res) => {
              vm.$message.success('新增成功');
              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;
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        };
        removeRole(params).then(
          (res) => {
            vm.$message.success('删除成功');
            vm.searchFn(true);
          },
          (error) => {
            vm.$notify.error({
              title: error.data.msg,
              message: error.data.data
            });
          }
        );
      });
    },
    grantFn(row) {
      let vm = this;
      vm.grantDialog.visible = true;
      vm.grantDialog.roleId = row.id;
    },
    roleScopeFn(row) {
      let vm = this;
      vm.scopeDialog.visible = true;
      vm.scopeDialog.roleId = row.id;
    },
    setMenuIds(ids) {
      let vm = this;
      vm.grantDialog.menuIds = ids;
    }
  },
  created() {
    this.searchFn();
  }
};
</script>

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