<template>
  <div class="role">
    <div ref="leftContainer" class="left">
      <div class="filter-container">
        <el-button type="primary" size="small" style="margin-left:auto;" @click="handleAddRole">New</el-button>
      </div>
      <base-table
        v-loading="loading"
        :highlight-current-row="true"
        :columns="role_columns"
        :list="list"
        :hidden-page="true"
        @getList="getList"
        @permission="handlePermission"
        @edit="handleEditRole"
        @delete="handleDeleteRole"
        @sortByColumn="sortByColumn"
      >
        <template slot="TypeSlot" slot-scope="{scope}">
          {{ scope.row.Type === 1?'Trial':scope.row.Type === 2?'Reviewer':scope.row.Type === 3?'Other':'' }}
        </template>
      </base-table>
    </div>
    <!-- <div class="right">
      <RoleMenu ref="roleMenu" />
    </div> -->
    <role-form v-if="model_cfg.visible" :data="editRow" @close="closeModal" />
  </div>
</template>
<script>
import { role_columns, model_cfg } from './role'
import BaseTable from '@/components/BaseTable'
import { getUserTypeRoleList, deleteUserTypeRole } from '@/api/admin'
// import RoleMenu from './components/RoleMenu'
import RoleForm from './components/RoleForm'
import tableMixins from '@/mixins/table'
export default {
  name: 'Role',
  components: { BaseTable, RoleForm },
  mixins: [tableMixins],
  data() {
    return {
      role_columns,
      model_cfg,
      list: [],
      total: 0,
      loading: false,
      treeData: [],
      defaultProps: {
        label: 'MenuName',
        children: 'Children'
      },
      dialogVisible: false,
      editRow: {},
      expandedKeys: [],
      treeLoading: false,
      funcListLoading: false,
      funcList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getUserTypeRoleList({}).then((res) => {
        this.loading = false
        this.list = res.Result
      }).catch(() => {
        this.loading = false
      })
    },
    handleAddRole() {
      this.editRow = {}
      this.model_cfg.visible = true
      this.model_cfg.title = 'Add'
    },
    handleEditRole(row) {
      this.editRow = row
      this.model_cfg.visible = true
      this.model_cfg.title = 'Edit'
    },
    // 分配权限，获取菜单树，并勾选已有菜单权限
    handlePermission(row) {
      this.roleId = row.Id
      this.$nextTick(function() {
        this.$refs['roleMenu'].getMenus(row.Id)
      })
    },
    handleDeleteRole(row) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      }).then(() => {
        deleteUserTypeRole(row.Id).then((res) => {
          if (res.IsSuccess) {
            this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
            this.$message.success('Deleted successfully!')
          }
        })
      })
    },
    closeModal() {
      this.model_cfg.visible = false
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.role {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  .left {
    display: flex;
    flex-direction: column;
    width: 0;
    flex-grow: 4;
    // border-right: 1px solid #ccc;
    .filter-container {
      display: flex;
      align-items: center;
      margin: 5px;
    }
    .data-table {
      flex: 1;
      padding: 5px 0px;
    }
    .pagination-container {
      text-align: right;
    }
  }
  .right {
    width: 0;
    flex-grow: 6;
    overflow-y: auto;
    border-right: 1px solid #ccc;
  }
  .selected-row{
    background-color: cadetblue;
  }
}
</style>
