<script setup>
    import { ref, onMounted, watch } from 'vue'
    import { useRoute } from 'vue-router'
    import { departInterence } from '@/api/api.js'
    import { ElMessage } from 'element-plus'

    const route = useRoute()

    let role = ref('')
    let isLook = ref(false)
    watch(role,()=>{
        if(Number(route.query.id||'')){
            isLook.value = true
        }else{
            isLook.value = false
        }
        authLoading.value = true
        //getAuthList()
        getBtnList()
    })

    //获取角色列表
    let roleList = []
    function getRoles() {
        departInterence.getRole().then(res => {
            if (res.Ret === 200) {
                roleList = res.Data.List||[];
                role.value = Number(route.query.id||'')
                if (roleList.length&&!role.value) {
                    role.value = roleList[0].RoleId
                }
            }
        })
    }

    let authList = ref([])
    let btnList = []
    let isShowCheck = ref(false)
    watch(authList,(newVal)=>{
        newVal.forEach(item => {
            /* 选中菜单显示对应的功能权限 */
            if(btnList.length) {
                let B_arr =[]
                btnList.forEach(item2 => {
                    /* 选中的有审核列表或客户列表 */
                    B_arr.push(item.CheckList.indexOf(item2.MenuId) !== -1)
                    if(item.CheckList.indexOf(item2.MenuId) !== -1) {
                        item2.isSHow = true;
                    }else {
                        item2.isSHow = false;
                    }
                })
                let bol = B_arr.some(item => {
                    return item
                })
                if(bol) {
                    isShowCheck.value = true;
                }else {
                    isShowCheck.value = false;
                }
            }
        })
    })
    let authLoading = ref(false)
    //获取权限列表
    function getAuthList(){
        departInterence.getAuthList({
                RoleId:Number(role.value)
            }).then(res => {
                authLoading.value = false
                if(res.Ret!==200) return 
                    let list = [];
                    res.Data.List.length&&res.Data.List.forEach(item => {
                        item.CheckList = item.CheckList || [];
                        let obj;
                        if(item.Child && item.Child.length) {
                            obj = {
                                checkAll:item.CheckList&&item.CheckList.length===item.Child.length?true:false,
                                isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Child.length,
                                ...item,
                            }
                        }else {
                            obj = {
                                ...item,
                            }
                        }
                        list.push(obj)
                    })
                    authList.value = list;
            })
    }
    //获取功能列表
    let btnCheck = ref([])
    function getBtnList(){
        departInterence.getBtnAuth({
            RoleId:Number(role.value)
        }).then(res => {
            if(res.Ret === 200) {
                btnCheck.value = res.Data.CheckList;
                //处理结构
                let filterArr = [];
                res.Data.List.forEach(item => {
                    let obj = {
                        isSHow:false,
                        ...item
                    }
                    filterArr.push(obj)
                })
                btnList = filterArr;
                /* 先获取功能权限再获取菜单权限 监听菜单权限控制功能权限的显示和隐藏 */
                getAuthList()
            }
        })
    }
    //菜单权限 全选
    function handleCheckAll(item){
        // 取到所有的子菜单id
        let ids = item.Child.map(item =>{
            return item.MenuId
        })
        item.CheckList = item.checkAll ? ids : [];	
        item.isIndeterminate = false;
    }
    //菜单权限 复选框
    function handleChecked(item){
        let len = item.CheckList.length;
        item.checkAll = len === item.Child.length;
        item.isIndeterminate = len > 0 && len < item.Child.length;
    }
    //功能复选框 (原项目里这个函数就是空的...)
    function handleChecked2(){}

    //保存权限
    function saveAuth(){
        let checkArr = [];
        authList.value.forEach(item => {
            if(item.CheckList.length) {
                checkArr.push(item.MenuId)
                checkArr.push(item.CheckList)
            }
        })
        let MenuButtonIdStr = Array.from(new Set(btnCheck.value));//去重
        let params = {
            MenuIdStr:checkArr.flat(2).join(','),
            RoleId:Number(role.value),
            MenuButtonIdStr:MenuButtonIdStr.join(',')
        }
        departInterence.saveAuth(params).then(res => {
            if(res.Ret === 200) {
                ElMessage.success(res.Msg);
                getBtnList();
            }
        })
    }

    onMounted(() => {
        getRoles()
    })
</script>

<template>
    <div class="authManage_container" v-loading="authLoading" element-loading-text="切换角色中...">
        <div class="auth_cont_top">
            <span>角色</span>
            <el-select v-model="role" placeholder="请选择角色" style="width:360px;margin-left:30px;">
                <el-option v-for="item in roleList" :key="item.RoleId" :label="item.RoleName" :value="item.RoleId">
                </el-option>
            </el-select>
        </div>
        <div class="auth_bot">
            <div class="menu_auth_cont">
                <h3 style="color:#333;font-size:14px;">菜单权限</h3>
                <ul class="menu_lists">
                    <li v-for="item in authList" :key="item.id" class="menu_item">
                        <el-checkbox  :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAll(item)" :disabled="isLook">{{item.Name}}</el-checkbox>
                        <div style="min-height:238px;margin-top: 15px; padding:30px 60px 10px 30px;border:1px solid #DCDFE6;width:220px;" v-if="item.Child">
                            <el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)" :disabled="isLook">
                                <el-checkbox v-for="list in item.Child" :label="list.MenuId" :key="list.MenuId">{{list.Name}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="menu_auth_cont" style="margin-top:30px;" v-if="isShowCheck">
                <h3 style="color:#333;font-size:14px;margin-right:30px;">功能权限</h3>
                <ul class="menu_lists">
                    <template v-for="(item,index) in btnList">
                        <li :key="index" class="menu_item" v-if="item.isSHow">
                            <span :style="`fontSize:14px;color:${isLook?'#C0C4CC':'#333'}`">{{item.name}}</span>
                            <div style="min-height:238px;margin-top: 15px; padding:30px 60px 10px 30px;border:1px solid #DCDFE6;width:220px;">
                                <el-checkbox-group v-model="btnCheck" :disabled="isLook" @change="handleChecked2">
                                    <el-checkbox v-for="list in item.List" :label="list.MenuButtonId" :key="list.MenuButtonId">{{list.ButtonName}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <el-row :span="24" justify="center" type="flex" style="marginTop:90px;">
                <el-button  type="primary" style="margin-right:50px;width:140px;" @click="saveAuth" v-if="!isLook">确定</el-button>
                <!-- <el-button  type="primary" plain @click="router.replace({path:'/Sysrole'})">返回</el-button> -->
            </el-row>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .authManage_container {
        * {
            box-sizing: border-box;
        }

        // reset
        .el-checkbox__input.is-disabled+span.el-checkbox__label {
            color: #666 !important;
        }

        .el-checkbox-group .el-checkbox {
            margin-bottom: 20px !important;
        }

        .auth_cont_top {
            font-size: 16px;
            color: #333;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            border: 1px solid #ECECEC;
            padding: 20px 30px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        }

        .auth_bot {
            min-height: calc(100vh - 224px);
            padding: 30px;
            background: #fff;
            margin-top: 20px;
            position: relative;
            border: 1px solid #ECECEC;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

            .menu_lists {
                margin-top: 30px;
                font-size: 16px;
                display: flex;
                flex-wrap: wrap;

                .menu_item {
                    margin-right: 80px;
                    margin-bottom: 30px;
                }
            }

            .auth_Handle {
                display: flex;
                align-items: center;
            }
        }
    }
</style>