<script setup>
import { ref,reactive } from 'vue'
import {useDepart} from './hooks/use-depart'
import { departInterence } from '@/api/api.js';

const {defaultDepart,defaultGroup,tablePrams,groupTeamId} = useDepart()
const {useTreeMove,useTreeEvent} = useDepart()
const {checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
const {act_node,clickNode,openNodeDialog,removeNode} = useTreeEvent()

//重置部门选中
function initDepart(){}
//部门数据
let departArr = ref([])
const defaultProp = {label:'DepartmentName',children:'Child'}
//获取部门结构
async function getDepartArr(){
    const res = await departInterence.getDepartList()
    if(res.Ret!==200) return 
    const list = res.Data.List||[]
    //给节点增加unicodeKey
    departArr.value = list.map(depart=>{
        depart.unicodeKey='depart_'+depart.DepartmentId
        depart.parentKey = 0
        if(depart.Child){
            depart.Child = depart.Child.map(group=>{
                group.unicodeKey = 'group_'+group.DepartmentId
                group.parentKey = depart.unicodeKey
                if(group.Child){
                    group.Child = group.Child.map(team=>{
                        team.unicodeKey = 'team_'+team.DepartmentId
                        team.parentKey = group.unicodeKey
                        return team
                    })
                }
                return group
            })
        }
        return depart
    })
}
getDepartArr()

let shareCustomDepartmentId = ref(0)

</script>

<template>
    <div class="depart_container">
        <div class="left_cont">
            <div class="company_top" @click="initDepart">
                <img src="@/assets/img/set_m/home_ico.png" alt="" style="width:30px;height:30px;">
                <span :class="!defaultGroup&&!defaultDepart?'act':''">部门信息</span>
            </div>
            <el-tree
                ref="departTree"
                class="depart_tree"
                style="margin-top:27px;"
                :data="departArr"
                node-key="unicodeKey"
                :props="defaultProp"
                draggable 
                :allow-drag="checkAllowDrag"
                :allow-drop="checkAllowDrop"
                check-strictly
                empty-text="暂无部门"
                @node-drop="handleDropOver">
                <template #default="{node,data}">
                    <span class="custom-tree-node" @click="clickNode(node,data)">
                        <span>{{ node.label }}</span>
                        <span style="display:flex;align-items:center;" v-show="act_node===data.unicodeKey">
                            <img src="~@/assets/img/data_m/move_ico.png" alt="" @click.stop>
                            <img src="~@/assets/img/set_m/add.png" alt="" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsDepartment">
                            <img src="~@/assets/img/set_m/add.png" alt="" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
                            <img src="~@/assets/img/set_m/edit.png" alt="" @click.stop="openNodeDialog('edit',data,node)">
                            <el-popconfirm
                                @onConfirm="removeNode(node,data)"
                                confirmButtonText='删除'
                                cancelButtonText='取消'
                                confirmButtonType="text"
                                icon="el-icon-info"
                                iconColor="red"
                                title="确定删除吗"
                                v-if="data.DepartmentId!=shareCustomDepartmentId"
                            >
                            <!-- 共享客户组不允许删除 -->
                                <template #reference>
                                    <img src="~@/assets/img/set_m/del.png" alt="" style="width:12px;height:12px;margin-top:4px">
                                </template>
                            </el-popconfirm>
                        </span>
                    </span>
                </template>
            </el-tree>
            <div class="noDepart" @click="openNodeDialog('add',{},{level:0})">
                <img src="~@/assets/img/set_m/add_ico.png" alt="" style="width:16px;height:16px;margin-right:10px;">
                <span>新建部门</span>
            </div>
        </div>
        <div class="right_cont">

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

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

        .el-popper {
            padding: 20px !important;
        }

        .fade {
            transition: all 0.5s;
        }

        display: flex;
        background: #f5f7f9;

        // reset
        .el-form-item__label {
            font-size: 16px;
            padding-right: 20px !important;
        }

        .el-tag {
            font-size: 12px !important;
        }

        .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
            content: '';
        }

        .el-tag {
            margin-right: 10px;
        }

        .el-cascader .el-input {
            width: 100%;
        }

        .left_cont {
            width: 16%;
            min-width: 200px;
            margin-right: 20px;
            height: calc(100vh - 120px);
            overflow-y: auto;
            border-radius: 4px;
            background: #fff;
            padding: 20px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

            .company_top {
                display: flex;
                align-items: flex-end;
                font-size: 16px;
                color: #333;
                cursor: pointer;

                span {
                    width: 100%;
                    padding: 4px 10px 0;

                    &:hover {
                        background: #F5F7FA;
                    }
                }

                .act {
                    background: #F0F4FF;
                }
            }

            :deep(.depart_tree) {
                font-size: 15px;
                color: #333;

                .custom-tree-node {
                    display: flex !important;
                    justify-content: space-between;
                    align-items: center;
                    display: block;
                    flex: 1;
                    .icon-img{
                        width:12px;
                        height:12px;
                        margin-right:10px;
                    }
                }

                .el-tree-node__content {
                    margin-bottom: 15px !important;
                }

                .el-tree-node__children {
                    .el-tree-node {
                        margin-bottom: 8px !important;
                        padding-left: 18px;
                    }

                    .el-tree-node__content {
                        margin-bottom: 5px !important;
                        padding-left: 0 !important;
                    }
                }

                .el-icon.el-tree-node__expand-icon{
                    svg{
                        display: none;
                    }
                    &::before{
                        content: url("@/assets/img/set_m/slide.png") !important;
                    }
                    &.expanded::before{
                        content: url("@/assets/img/set_m/down.png") !important;
                    }
                }

                .el-tree-node__expand-icon.expanded {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }

                .el-tree-node.is-current>.el-tree-node__content {
                    background-color: #F0F4FF !important;
                }

                .el-tree-node__content {
                    padding-right: 10px !important;
                }
            }

            .noDepart {
                margin-top: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #409EFF;
                font-size: 16px;
                cursor: pointer;
            }
        }

        .right_cont {
            width: 82%;
            background: #F5F7F9;
            // box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            border-radius: 4px;

            .right_cont_top {
                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);
            }

            .right_cont_bot {
                height: calc(100vh - 222px);
                overflow-y: auto;
                padding: 20px 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);

                .right_shadow {
                    width: 350px;
                    background: #fff;
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    overflow-y: hidden;
                    z-index: 2;
                    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
                    border: 1px solid #ececec;
                    padding: 60px 30px;

                    .shadow_top {
                        display: flex;
                        align-items: center;
                    }

                    .shadow_info {
                        margin-top: 30px;
                        margin-bottom: 40px;
                        font-size: 16px;
                        color: #333;
                        height: calc(100% - 120px);
                        overflow-y: auto;

                        .info_item {
                            margin-bottom: 20px;

                            .item_tit {
                                margin-bottom: 10px;
                            }
                        }
                    }

                    .close_btn {
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
            }
        }
    }
</style>