<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 10:44:04
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-03 11:39:44
 * @Description: 角色管理 V2 版本
 -->
<template>
  <obitUniversalTable type="rightTable" name="查询结果" :pagination="pagination" v-if="$fmt(['sys_normal_disable'])">
    <template #left>
      <appListVue v-model:value="params.appId" @change="changeApp(params.appId)"></appListVue>
    </template>
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="pageQuery(true)">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button @click="removeAll" class="m-r-15">
        <i class="iconfont icon-ashbin  p-r-5"></i> 删除全部
      </a-button>
      <a-button type="primary" @click="addDialog">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table :loading="pageLoading" rowKey="roleId" :columns="tableColumns" :row-selection="rowSelection"
      :scroll="{ x: '100%' }" :dataSource="pageDataList" :pagination="false" class="obit-atable" highlight-current-row
      style="width: 100%">
      <template #icon="{ record  }">
        <span class=" iconfont obit-link" :class="'icon-'+record.appIcon"></span>
      </template>
      <template #operation="{ record  }" :key="record.roleId">
        <div v-if="record.roleId!=='1'">
          <a-button class="operation-btn" type="link" @click="editDialog(record)">编辑</a-button>
          <a-button class="operation-btn" type="link" @click="remove(record)">删除</a-button>
          <a-button class="operation-btn" type="link" @click="editScopeDialog(record)">数据权限 </a-button>
          <a-button class="operation-btn" type="link" @click="editUserDialog(record)">分配用户</a-button>
        </div>
      </template>
    </a-table>
  </obitUniversalTable>
  <roleAdd :addType="addType" :detailsInfo="detailsInfo" :appId="appId" v-model:open="addVisable"
    @reload="pageQuery(true)"></roleAdd>
  <roleScopeAdd :detailsInfo="detailsInfo" v-model:open="scopeVisable" :type="scopeType" @reload="pageQuery(true)">
  </roleScopeAdd>
</template>

<script>
import { getCurrentInstance, inject, reactive, toRefs } from 'vue'
import roleAdd from './roleAdd.vue'
import page from './../../../hook/page.js'
import roleScopeAdd from './roleScopeAdd.vue'
import bindUserVue from './bindUser.vue'
import appListVue from '../components/appList.vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  components: { roleAdd, roleScopeAdd, bindUserVue, appListVue },
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let router = useRouter()
    let _data = reactive({
      tableColumns: [
        // { dataIndex: 'roleId', title: '角色编号', width: 100 },
        { dataIndex: 'roleName', title: '角色名称', width: 200 },
        { dataIndex: 'roleKey', title: '权限字符', width: 150 },
        { dataIndex: 'roleSort', title: '显示顺序', width: 100 },
        { dataIndex: 'status', width: 100, customRender: ({ text, record, index }) => proxy.$fmt('sys_normal_disable', text), title: '状态' },
        { dataIndex: 'createTime', title: '创建时间', width: 180 },
        { title: '操作', slots: { customRender: 'operation' }, width: 300 },
      ],
      paramList: [
        { name: '角色名称', key: 'roleName' },
        { name: '权限字符', key: 'roleKey' },
        {
          type: 'ajax',
          key: 'status',
          name: '用户状态',
          valuename: 'dictValue',
          labelname: 'dictLabel',
          ajaxurl: 'system/dict/data/type/sys_normal_disable',
        },
        { name: '操作时间', endKey: 'endTime', startKey: 'beginTime', type: 'dateBetween' },
      ],
      loading: false,
      roleList: [],
      checkRole: '',
      // 新增编辑相关
      addVisable: false,
      scopeVisable: false,
      userVisable: false,
      scopeType: 'scope',
      addType: 'add',
      roleId: '',
      detailsInfo: {},
      appId: '',
    })
    let pageIns = page({
      url: 'system/role/pageList',
      key: 'roleId',
      removeUrl: 'system/role/remove',
      removeAll: 'system/role/removeAll',
    })
    let _methods = {
      changeApp (item) {
        _data.appId = item
        pageIns._method.pageQuery()
      },
      // 角色新增和编辑相关  --------------start --------------------------
      addDialog () {
        _data.addVisable = true
        _data.addType = 'add'
        _data.detailsInfo = {}
      },
      editDialog (item) {
        _data.detailsInfo = item
        _data.addVisable = true
        _data.addType = 'edit'
      },
      editScopeDialog (item) {
        _data.detailsInfo = item
        _data.scopeVisable = true
      },
      editUserDialog (item) {
        router.push({ path: 'role/bindUser', query: { roleId: item.roleId, name: item.roleName } })
      },
    }
    return {
      ...toRefs(pageIns._data),
      ...pageIns._method,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>

<style lang='less' >
@import url('./../../../styles/mixin.less');
// @import url('./../../../styles/variable.less');
.role-layout {
  height: 100%;

  .ant-layout-sider {
    padding: 0 10px;
  }

  .title {
    height: 35px;
    line-height: 35px;
    font-size: 14px !important;
    margin: 10px 0;
  }
  .fromTitle {
    height: 100%;
    padding: 0;
  }
  .role-list {
    overflow: auto;
    height: 100%;
    padding: 0;
    background: #f0f2f5;
    .scrollBar();
    .role-device-item {
      overflow: hidden;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      border-top: 1px solid #dcdfe6;
      .hover-operator {
        display: none;
        height: 35px;
        line-height: 35px;
        padding-right: 10px;
      }
    }
    .role-device-item:last-child {
      border-bottom: 1px solid #dcdfe6;
    }
    .role-device-item:hover {
      background: #ff7102;
      transition: all 0.5s;
      color: #fff;
      .hover-operator {
        display: initial;
      }
    }
    .ischeck {
      background: #ff7102;
      color: #fff;
      i {
        color: #fff;
      }
    }
  }
}
</style>