<template>
    <div class="layout-content-wrap background-color-fff border-radius-8">
      <div class="layout-tabs-content-box">
            
        <div class="height-30 flex-row align-items-center justify-content-between mb-24">
            <div class="f22 color-text-primary">角色权限管理</div>
        </div>

        <div class="border-solid-lighter-1 flex-row">
          <div class="layout-content-left-wrap ">
          <div class="color-text-primary f14 m-h-16 height-56 flex-row align-items-center f-weight500 border-b-solid-lighter-1">角色列表</div>
          <div>
            <el-scrollbar class="bor">
              <div :style="{'height': `${roleContentHeight}px`}">
                <div class="height-48 flex-row align-items-center p-h-24 color-text-primary f14">角色名称</div>
                <div 
                v-for="(item,inx) in roleList" :key="inx"
                class="height-48 flex-row align-items-center p-h-24 cursor-pointer color-text-secondary f14"
                :class="{'role-active':item.id===roleActiveId}"
                @click="handleRoleChange(item.id)"
                >{{item.name}}</div>
              </div>
            </el-scrollbar>
          </div>
          </div>
          <div class="layout-content-right-wrap pb-24">
            <div class="p-h-24"> 
                <div class="flex-row justify-content-between height-56 align-items-center">
                    <div class="color-text-primary f14 f-weight500">权限列表</div>
                    <div class="color-text-regular f14" >
                        <el-button type="primary" @click="handleChangeRolePermissions" size="small">更新角色权限</el-button>
                    </div>
                </div>
                <el-scrollbar class="bor">
                  <div :style="{'height': `${roleContentHeight}px`}" >
                    <el-tree
                      ref="tree"
                      :data="jurisdictionData"
                      :check-strictly="true"
                      show-checkbox
                      node-key="id"
                      :check-on-click-node="true"
                      :default-expanded-keys="resourceIds"
                      :default-checked-keys="resourceIds"
                      :props="defaultProps"
                       @node-click="handleNodeClick"
                      >
                    </el-tree>
                  </div>
                </el-scrollbar>

            </div>
          </div>
        </div>
            
      </div>     



        
    </div>
</template>
<script>
import systemManageApi from "@/services/systemManage";
    export default {
        data() {
            return {
                roleList:[],
                jurisdictionData: [],
                defaultProps: {
                  children: 'children',
                  label:'name'
                },
                roleActiveId:1,
                queryData: {
                    current: 1,
                    size: 100,
                    type: 2
                },
                resourceIds:[],//选中的id集合
            };
        },
        computed:{
            // 获取角色列表内容高度
            roleContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-220
            }
            
        },
        created() {
            this.getRoleList()
            this.getResourceList()
        },
        methods: {
            // 获取角色列表
            getRoleList(){
                systemManageApi.getRoleList(this.queryData).then(res => {
                    if (!res.code) {
                        this.roleList = res.records;
                        this.roleActiveId = this.roleList[0].id
                        this.getRoleById()
                    }
                })
            },
            // 获取权限
            getResourceList(){
                systemManageApi.getResourceList().then(res => {
                    if (!res.code) {
                        this.jurisdictionData = [];
                        res.forEach(element => {
                          if(element.prefix==='mediate'){
                            this.jurisdictionData .push(element)
                          }
                        });



                    }
                })
            },
            // 获取默认选中的
            getRoleById(){
               let data={
                    id:this.roleActiveId
                }
                systemManageApi.getRoleById(data).then(res => {
                    if (!res.code) {
                        this.resourceIds = res.resourceIds;
                        console.log('resourceIds',this.resourceIds)
                        this.$refs.tree.setCheckedKeys(this.resourceIds)
                    }
                })
            },
            //切换角色列表
            handleRoleChange(id){
              this.roleActiveId = id
              this.getResourceList()
              this.getRoleById()
            },

            handleNodeClick(data){
              console.log(data)
            },
            // 更新角色权限
            handleChangeRolePermissions(){
                if(!this.$clickThrottle()) { return }//防止重复点击
                console.log(this.$refs.tree.getCheckedKeys());
                this.resourceIds = this.$refs.tree.getCheckedKeys()
                let data={
                    id:this.roleActiveId,
                    resourceIds:this.resourceIds
                }
                systemManageApi.updateRoleResource(data).then(res => {
                    this.$message({
                        showClose: true,
                        message: '更新权限成功！',
                        type: 'success'
                    });
                })
            },
        }
    };
</script>
<style lang="scss" scoped>
.layout-content-left-wrap{
  width: 30%;
  border-right: 1px  solid $border-color-lighter;
}
.layout-content-right-wrap{
  width: 70%;
}

.role-active{
  background-color: $color-menu-active-bg;
  color: $color-1960F4;
}
</style>