<!--
 * @Description: 角色配置页面
 * @Author: liusheng，wanqian
 * @Date: 2021-01-17 22:43:52
-->
<template>
  <div class="body">
    <el-row :style="headStyle">
      <el-col :span="12" style="text-align: left">
        <span style="font-size: 14px">{{enableInstLevel ? '机构名称：' : '&nbsp;'}}</span>
        <el-select v-if="enableInstLevel" v-model="curInstCode" style="width:260px;"
          size="small" placeholder="请选择机构" @change="handleChangeInst">
          <el-option v-for="inst in instList" :key="inst.instCode" 
            size="small" :label="inst.name" :value="inst.instCode" />
        </el-select>
      </el-col>
      <el-col v-if="dataPvgList.includes('ROLE_1_CREATE')" style="text-align: right" :span="12" >
        <el-button v-if="enableInstLevel" type="primary" 
          icon="el-icon-plus" size="small" @click="handleAdd4Btn" >新 增</el-button>
        <el-dropdown v-else @command="handleAdd4DropDown">
          <el-button type="primary" size="small">
            新 增<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(key, value) in userTypeMap" :key="value" :command="value">
              {{ key }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <div v-if="showSeperatorLine" class="main-line"></div>
    <el-table :data="roleList" style="border:1px solid #f0f0f0;" :style="tableStyle">
      <el-table-column min-width="2%" align="left" />
      <el-table-column label="角色" min-width="14%" align="left">
        <template slot-scope="scope">
          <div>
            <el-badge v-if="scope.row.type === 9" :value="scope.row.typeText" class="badge-text" type="success">
              {{ scope.row.name }}
            </el-badge>
            <div v-else>{{ scope.row.name }}</div>
            <div style="font-size:11px;">{{ scope.row.userTypeText }} | {{ scope.row.numOfPeople }}人</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="功能权限" min-width="37%" align="left">
        <template slot-scope="scope">
					<span v-for="fpvg in scope.row.funcPvgList" :key="fpvg.index">{{fpvg}}&ensp;&ensp;</span>
				</template>
      </el-table-column>
      <el-table-column label="数据权限" min-width="37%" align="left">
        <template slot-scope="scope">
					<span v-for="dpvg in scope.row.dataPvgList" :key="dpvg.index">{{dpvg}}&ensp;&ensp;</span>
				</template>
      </el-table-column>
      <el-table-column min-width="1%" align="left" />
      <el-table-column label="操作" min-width="9%" align="left">
        <template slot-scope="scope">
          <el-button v-if="dataPvgList.includes('ROLE_2_UPDATE')"
            @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-divider direction="vertical" v-if="showSeperator(scope.row.type)"></el-divider>
          <el-button v-if="showDelBtn(scope.row.type)" 
            @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <role-dialog :visible="showDialog" :mode="mode" :enable-inst-level="enableInstLevel"
      :role-id="roleId" :user-type="userType" :inst-code="curInstCode" @close-dialog="closeDialog"/>
  </div>
</template>

<script>
import RoleDialog from "./RoleDialog.vue";

export default {
  name: 'RoleCfg',

  components: { 
    'role-dialog': RoleDialog
  },

  props: {
    // 是否显示表格上方灰色分割线
    showSeperatorLine: {type: Boolean, default: true},
    // 水平方向左右间距
    marginHorizontal: {type: Number, default: 40},
  },
  
  data() {
    return {
      dataPvgList: [],    //在角色配置页面上的操作权限
      
      enableInstLevel: false,
      userTypeMap: {},
      instList: {},
      curInstCode: '',
      roleList: [],

      // 以下变量用于对话框组件调用
      showDialog: false,
      mode: 'add',
      roleId: 0,
      userType: 0
    }
  },
  
  computed: {
    headStyle() {
      return {
        'margin-top': '19px',
        'margin-bottom': '19px',
        'margin-left': this.marginHorizontal + 'px',
        'margin-right': this.marginHorizontal + 'px'
      }
    },

    tableStyle() {
      return {
        'width': (this.$root.contentWidth - this.marginHorizontal * 2) + 'px',
        'margin-left': this.marginHorizontal + 'px',
        'margin-right': this.marginHorizontal + 'px'
      }
    },
  },

  methods: {
    async initView() {
      this.getDataPvg4CurRole();
      await this.getRoleFilterDO();
      await this.listRoles();
    },

    getDataPvg4CurRole() {
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_GET_DATA_PVG_4_CURROLE,
        param: {entityKey: 'ROLE'},
      };
      this.vueRequest(requestData).then(result => {
        if (result != null) {
          this.dataPvgList = result.data;
        }
      })
    },

    async getRoleFilterDO() {
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_GET_ROLE_FILTER_DO
      };
      await this.vueRequest(requestData).then(result => {
        if (result == null) return;

        let filterDo = result.data;
        this.enableInstLevel = filterDo.enableInstLevel;
        this.userTypeMap = filterDo.userTypeMap;
        
        if (this.enableInstLevel) {
          this.instList = result.data.instList;
          this.curInstCode = (this.instList.length == 0) ? '' : this.instList[0].instCode;
        }
      })
    },
    
    async listRoles() {
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_LIST_ROLES,
        param: { instCode: this.curInstCode },
      };
      await this.vueRequest(requestData).then(result => {
        if (result != null) {
          this.roleList = result.data;
        }
      })
    },

    showSeperator(roleType) {
      return this.dataPvgList.includes('ROLE_2_UPDATE') && this.showDelBtn(roleType);
    },

    showDelBtn(roleType) {
      return this.dataPvgList.includes('ROLE_3_DELETE') && roleType != this.commonConst.TYPE_ROLE_RESERVED;
    },

    handleChangeInst() {
      this.listRoles();
    },

    handleAdd4Btn() {
      this.showDialog = true;
      this.mode = 'add';
      this.roleId = 0;
    },

    handleAdd4DropDown(userType) {
      this.showDialog = true;
      this.mode = 'add';
      this.roleId = 0;
      if (userType != null) {
        this.userType = userType;
      }
    },
    
    handleEdit(role) {
      this.showDialog = true;
      this.mode = 'edit';
      this.roleId = role.id;
    },

    closeDialog(refresh) {
      this.showDialog = false;
      if (refresh) this.listRoles();
    },

    handleDelete(role) {
      this.$confirm('确认是否删除指定角色?', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_ROLE, role.id);
        this.appAxios("DELETE", url).then(() => {
          this.listRoles();
        })
      });
    }
  },

  mounted() {
    this.initView();
  }
}
</script>

<style scoped>
.body {
  margin: 0;
  text-align: center;
}

.main-line {
  height: 10px;
  background-color: #f0f0f0;
  margin-bottom: 33px;
}

.badge-text {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
