<template>
    <div class="business-auth-wrap">
        <div class="header">
            <div class="name">{{$route.query.name||''}}</div>
            <div class="btn-wrap">
                <el-button @click="handleBtnClik('cancel')">取消</el-button>
                <el-button type="primary" @click="handleBtnClik('save')">保存</el-button>
            </div>
        </div>
        <div class="model-wrap">
            <el-button :type="model==='auth'?'primary':''" @click="model='auth'">菜单权限</el-button>
        </div>
        <div class="auth-wrap" v-show="model==='auth'">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="margin-bottom: 20px;">全选</el-checkbox>
            <el-tree 
                v-loading="treeLoading"
                ref="checkboxTree"
                :data="authList" 
                :props="{label:'Name',children:'Children'}" 
                :default-expand-all="false"
                show-checkbox 
                node-key="MenuId"
                :default-checked-keys="defaultCheckedKeys"
                @check-change="()=>{handleCheckChange()}">
            </el-tree>
        </div>
        <!-- <div class="interence-wrap" v-show="model==='interence'">
            <div class="interence-item">
                <span>研报审批</span>
                <el-radio-group v-model="isApprove">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
                <el-checkbox-group v-model="approveList" v-show="isApprove===1">
                    <el-checkbox :label="2">智能研报</el-checkbox>
                    <el-checkbox :label="1">研报列表</el-checkbox>
                </el-checkbox-group>
            </div>
        </div> -->
    </div>
</template>

<script>
import {businessCustomInterence} from '@/api/api.js'
export default {
    data() {
        return {
            authList:[],
            defaultCheckedKeys:[],
            treeLoading:false,
            checkAll:false,
            isIndeterminate:false,
            model:'auth',
            isApprove:'',
            approveList:[],
            checkList:[]
        };
    },
    watch:{
        checkAll(newVal){
            if(newVal){
                const topLevelNodes = this.authList.map(i=>i.MenuId)
                this.$refs.checkboxTree.setCheckedKeys(topLevelNodes)
            }else{
                if(!this.isIndeterminate){
                    this.$refs.checkboxTree.setCheckedKeys([])
                }
            }
        },
        isApprove(newVal){
            if(newVal===0){
                this.approveList=[]
            }
        }
    },
    methods: {
        getBusinessConfigList(){
            const EtaBusinessId = this.$route.query.id
            if(!EtaBusinessId) return 
            businessCustomInterence.getConfigList({
                EtaBusinessId:Number(EtaBusinessId)
            }).then(res=>{
                if(res.Ret!==200) return
                const list = res.Data||[]
                const approveItem = list.find(i=>i.ConfigCode==='approval_flow')
                if(!approveItem) return
                if(!approveItem.ConfigValue.length){
                    this.isApprove = approveItem.ConfigValue
                    return
                }
                if(Number(approveItem.ConfigValue)===0){
                    this.isApprove = Number(approveItem.ConfigValue)
                    return
                }
                if(Number(approveItem.ConfigValue)>0){
                    this.isApprove = 1
                    this.approveList = approveItem.ConfigValue==3?[1,2]:[Number(approveItem.ConfigValue)]
                }
            })
        },
        getBusinessAuthList(){
            const EtaBusinessId = this.$route.query.id
            if(!EtaBusinessId) return 
            this.treeLoading = true
            businessCustomInterence.getAuthList({
                EtaBusinessId:Number(EtaBusinessId)
            }).then(res=>{
                if(res.Ret!==200) return 
                this.treeLoading = false
                if(!res.Data) return
                const {List,ChoiceList=[],HalfChoiceList=[]} = res.Data
                this.authList = List||[]
                this.checkList = ChoiceList
                this.authList.forEach(item=>{
                    this.checkTree(item)
                })
                //this.defaultCheckedKeys = ChoiceList.filter((item)=>!HalfChoiceList.some((halfItem)=>item===halfItem))
                this.$nextTick(()=>{
                    this.authList.forEach(item=>{
                        this.checkTree(item)
                    })
                    this.defaultCheckedKeys = this.checkList
                    this.handleCheckChange(this.defaultCheckedKeys)
                })
                
            })
        },
        checkTree(data){
            //非叶子节点递归
            if(data.Children && data.Children.length){
                data.Children = data.Children.map(i=>{
                    return this.checkTree(i)
                })
            }
            //叶子节点向上检查MenuId
            if(!data.Children||data.Children&&data.Children.length===0){
                this.checkDataList(data)
            }
            return data
        },
        //根据MenuId找到对应节点
        findTreeNode(MenuId){
            return this.$refs.checkboxTree.getNode(MenuId)
        },
        checkDataList(data){
            //获取data的MenuId 和 checkList对比 
            //如果MenuId不在checkList里，检查data.ParentId在不在checkList里，若在，则从checkList里去除
            if(!this.checkList.includes(data.MenuId)&&this.checkList.includes(data.ParentId)){
                const index = this.checkList.indexOf(data.ParentId)
                index!==-1&&this.checkList.splice(index,1)
                console.log('应该去除的节点',data.ParentId)
            }
            //向上检查MenuId
            const parentNode = this.findTreeNode(data.ParentId)
            if(parentNode){
                this.checkDataList(parentNode.data)
            }
        },
        async handleBtnClik(type){
            if(type==='save'){
                //获取树形列表选择的项 getCheckedKeys getHalfCheckedKeys
                const keys = this.$refs.checkboxTree.getCheckedKeys()
                const halfKeys = this.$refs.checkboxTree.getHalfCheckedKeys()
                if(!keys.length&&!halfKeys.length){
                    this.$message.warning('请至少选择一个权限')
                    return
                }
                //合成一个数组并去重
                const ChoiceList = Array.from(new Set([...keys,...halfKeys]))
                //请求接口
                const res = await businessCustomInterence.setAuthList({
                    EtaBusinessId:Number(this.$route.query.id),
                    MenuIds:ChoiceList,
                    HalfMenuIds:halfKeys
                })
                if(res.Ret!==200) return 
                this.$message.success('权限设置成功')

                /* if(typeof(this.isApprove)==='string'){
                    this.$message.warning('请配置接口权限')
                    this.model='interence'
                    return
                }else{
                    if(this.isApprove&&!this.approveList.length){
                        this.$message.warning('请选择接口权限')
                        return
                    }
                    let configValue = ''
                    if(this.isApprove){
                        configValue = this.approveList.length>1?"3":this.approveList[0]+"" //3表示全选
                    }else{
                        configValue = this.isApprove+""
                    }
                    const list = [{ConfigCode:"approval_flow",ConfigValue:configValue}] //目前只有一项
                    const interenceRes = await businessCustomInterence.setConfigList({
                        EtaBusinessId:Number(this.$route.query.id),
                        List:list
                    })
                    if(interenceRes.Ret!==200) return 
                    this.$message.success('接口权限设置成功')
                } */
            }
            this.$router.push('/businessETAList')
        },
        handleCheckChange(choiceList/* ,HalfChoiceList */){
            const keys = choiceList||this.$refs.checkboxTree.getCheckedKeys()
            //const halfKeys = HalfChoiceList||this.$refs.checkboxTree.getHalfCheckedKeys()
            const ChoiceList = Array.from(new Set([...keys]))
            const topLevelNodes = this.authList.map(i=>i.MenuId)
            let nodeLength = 0
            topLevelNodes.forEach(i=>{
                if(ChoiceList.includes(i)){nodeLength++}
                if(!ChoiceList.includes(i)){nodeLength--}
            })
            if(nodeLength===topLevelNodes.length){
                this.checkAll = true
                this.isIndeterminate = false
            }else{
                this.checkAll = false
                this.isIndeterminate = Boolean(ChoiceList.length)
            }
        }
    },
    mounted(){
        this.getBusinessConfigList()
        this.getBusinessAuthList()
    }
};
</script>

<style lang="scss">
.business-auth-wrap{
    .el-tree {
        border-top: 1px solid #E5E7ED;
        border-left: 1px solid #E5E7ED;
        border-right: 1px solid #E5E7ED;
        width: 98%;
        margin-bottom: 40px;
        .el-tree-node__label{
            margin:10px;
        }
        .el-tree-node__content{
            min-width: 200px;
            width: 200px;
            white-space: normal;
            box-sizing: border-box;
        }
        .el-tree-node{
            .el-tree-node{
                .el-tree-node__children{
                    width: 100%;
                }
                .el-tree-node{
                    &:not(:first-child){
                    /* .el-tree-node__content{
                        border-right: 1px solid #E5E7ED;
                    } */
                        border-top: 1px solid #E5E7ED;
                    }
                    .el-tree-node__content{
                        border-right: 1px solid #E5E7ED;
                    }
                }
    
            }
        }
        .el-tree-node__content {
            padding: 5px 10px !important;
            height: auto;
            .el-tree-node__expand-icon.el-icon-caret-right {
            //display: none;
            }
        }
        > .el-tree-node {
            padding: 0 !important;
            display: flex;
            border-bottom: 1px solid #E5E7ED;

            > .el-tree-node__children {
            width: 100%;
            > .el-tree-node {
                &:not(:first-child) {
                border-top: 1px solid #E5E7ED;
                }
                >.el-tree-node__content{
                    border-left: 1px solid #E5E7ED;
                    border-right: 1px solid #E5E7ED;
                }
            }
            }
        }
        .el-tree-node__children {
            display: flex;
            flex-direction: column;
            .el-tree-node {
                display: flex;
                flex: 1;
                padding: 0px !important;
                .el-tree-node__content {
                    border-bottom: none;
                    .custom-tree-node {
                    height: 24px;
                    display: flex;
                    align-items: center;
                    .tree-btn {
                        margin-left: 10px;
                        display: none;
                    }
                    .el-button {
                        padding: 0px !important;
                        border-radius: 4px;
                        background: #363554;
                        color: #ffffff;
                    }
                    }
                }
                .el-tree-node__children {
                    .el-tree-node {
                    &:not(:first-child) {
                        .el-tree-node__content {
                        //border-left: none;
                        }
                    }
                    }
                }
            }
        }
    }

}
</style>
<style scoped lang="scss">
.business-auth-wrap{
    border: 1px solid #ECECEC;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
            font-size: 18px;
            font-weight: bold;
        }
    }
    .model-wrap{
        display: flex;
        gap:20px;
        align-items: center;
        .block{
            display: inline-block;
            height:20px;
            width:1px;
            background-color: #333;
        }
    }
    .auth-wrap,.interence-wrap{
        margin-top:20px;
    }
    .interence-item{
        display: flex;
        gap:25px;
    }
}
</style>
