<template>
    <el-container>
        <!-- 行政组织级 -->
        <el-aside width="220px">
            <el-scrollbar > 
                <el-tree style="margin-top:10px"
                    :data="orglist"
                    :props="treeStruct"
                    @node-click="clickOrg"
                ></el-tree>
            </el-scrollbar>
        </el-aside>
        <el-aside width="200px">
            <el-tree style="margin-top:10px"
                :data="postList"
                :props="treeStruct"
                @node-click="clickPost"
            ></el-tree>
        </el-aside>
        <el-main>
            <!--头部系统页面-->
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-radio-group v-model="choiceSystem" size="medium" @change="systemChange">
                            <el-radio-button :label="sysItem.coder" v-for="(sysItem,sysIndex) in systemList" :key="sysIndex">{{sysItem.title}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
            <el-scrollbar style="max-height:95%">

                <el-table
                    :data="systemMenuList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
                    <el-table-column
                    label="菜单名称"
                    width="180">
                        <template slot-scope="scope">
                            <el-checkbox  v-model="scope.row.istrue" :label="scope.row.name"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                    >
                        <template slot-scope="scope">
                            <el-checkbox v-model="mItem.istrue" v-for="(mItem,mIndex) in scope.row.menuOperation" :label="mItem.name" :key="mIndex"></el-checkbox>
                        </template>
                    </el-table-column>
                </el-table>

                <el-button type="primary" :loading="buttonLoading" @click="subewport">确定授权</el-button>

            </el-scrollbar>
        </el-main>
    </el-container>
</template>

<script>//systemaccredit
import { govthree, positionlist } from "@/api/personnel/post";  //行政组织相关
import { getsystemlist,getSystemMenuThree } from "@/api/systemaccredit/systemapi";  //行政组织相关
//岗位配权
export default {
    data () {
        return {
            buttonLoading:false,
            choiceSystem:'kpi',
            systemList:[],
            //已选择的行政组织及岗位
            orgAndPost:{
                orgId:0,
                postId:0
            },
            //数据树结构体
            treeStruct: {
                children: "child",
                label: "name",
            },
            orglist:[],             //行政组织
            postList:[],            //岗位
            systemMenuList:[], //系统菜单
        }
    },
    created() {
        // 页面渲染时获取初始数据
        this.getOrgThree();     //行政组织
        this.systemInit();      //系统初始化

    },
    methods: {
        //初始话要授权的系统
        async systemInit(){
            const from = {
                page: 1,
                pagesize: 100000,
            };
            const res = await getsystemlist(from);
            console.log("初始话要授权的系统----》",res.data)
            this.systemList = res.data.list
            if(res.data.list.length > 0){
                this.choiceSystem = res.data.list[0].coder
            }
            this.getAboutSystemMenu();      //系统菜单初始化
        },

        //获取行政组织树
        async getOrgThree(){
            const res = await govthree();
            this.orglist = res.data
        },
        //根据行政组织获取岗位
        clickOrg(val){
            this.getPost(val.id);
            this.orgAndPost.orgId = val.id;
        },
        // 获取岗位
        async getPost(val) {
            const from = {
                organization: val.toString(),
                page: 1,
                pagesize: 10,
            };
            const res = await positionlist(from);
            this.postList = res.data.list;
        },
        //点击岗位列表
        clickPost(val){
            this.orgAndPost.postId = val.id;
            this.getAboutSystemMenu()
        },
        //
        //选择系统
        systemChange(val){
            console.log("选择系统-----》",val)

        },
        //获取相关系统菜单
        async getAboutSystemMenu(){
            const from = {
                name: this.choiceSystem,
                ordid:this.orgAndPost.orgId.toString(),
                postid:this.orgAndPost.postId.toString(),
            };
            const res = await getSystemMenuThree(from);
            console.log("系统菜单树-----》",res)
            res.data.forEach(item =>{
                console.log("系统菜单树-----》",item)
            })
            this.systemMenuList = res.data;
        },
        //提交授权
        subewport(){
            this.buttonLoading = true
            console.log("提交授权-----》",this.systemMenuList)
        }
    },
}
</script>
<style>
    .el-aside {
        text-align: center;
        height: calc(103% - 2px);
        overflow: hidden;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid rgb(220, 223, 230);
        margin: 2px 0 0 0;
        padding-bottom: 10px;
    }
    .el-main{
        height: 105%;
    }
    .el-container {
        height:calc(100% - 50px);
        overflow: hidden;
    }
    .el-scrollbar {
        height: 100%;
    }
    .el-scrollbar__wrap {
        overflow: hidden;
        overflow-y: auto;
        overflow: scroll;
    }
</style>