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

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { Search, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

import UserDetail from './components/UserDetail.vue'
import ModifyUserDialog from './components/ModifyUserDialog.vue'
import ModifyNodeDialog from './components/ModifyNodeDialog.vue'
import ResetPassDialog from './components/ResetPassDialog.vue'
import MoveDepartDialog from './components/MoveDepartDialog.vue'

const {
        defaultDepart,defaultGroup,departArr,tableParams,tableData,groupTeamId,
        getDepartArr,getTableUser,
        useTreeMove,useTreeEvent,useDepartTable
    } = useDepart()
const {departTree,checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
const {
        act_node,clickNode,initDepart,removeNode,
        modifyNodeType,nodeInfo,isModifyNodeShow,openNodeDialog,
        modifyNode
    } = useTreeEvent()
const {
        isShowUserdtl,userObj,
        changeStatus,getUserDetail,
        isResetPassShow,openResetPassDialog,resetUserPassWord,
        isMoveDepartShow,openMoveDepartDialog,moveDepart,
        getResearchGroup,researchGroup,
        isModifyUserShow,modifyUserType,userInfo,openUserDialog,
        modifyUser,delUser
    } = useDepartTable()

const defaultProp = {label:'DepartmentName',children:'Child'}
const tableColumns = [
    { label:"姓名", key:"RealName" },{ label:"账号", key:"AdminName" },{ label:"手机号", key:"Mobile"},
    { label:"角色", key:"RoleName" },{ label:"部门/分组", key:"DepartmentGroup" },{ label:"状态", key:"Enabled"}
]
let isShowloadding = ref('')
//切换表格页码
function handleCurrentChange(page){
    tableParams.pageNo = page
    getTableUser()
}

let shareCustomDepartmentId = ref(0)
function setShareCustomDepartId(){
    // 不同环境下 共享客户组的DepartmentId不一样
    if(process.env.NODE_ENV == 'development'||process.env.NODE_ENV == 'test'){
        shareCustomDepartmentId.value = 61
    }else if(process.env.NODE_ENV == 'production'){
        shareCustomDepartmentId.value = 37
    }
}
//同步每刻
function synchronizationMEIKE(){
    departInterence.syncCompanyProfile().then(res=>{
        if(res.Ret == 200){
            ElMessage.success('同步成功')
        }
    })
}

let areaCode = ref([])
function getAreaCode(){
    departInterence.getPhoneAreaCode().then(res=>{
        if(res.Ret!==200) return 
        areaCode.value = res.Data||[]
    })
}

//获取已有角色列表
let roleArr = ref([])
function getRoles() {
    departInterence.getRole({ RoleLevel:0 }).then(res => {
        if(res.Ret === 200) {
            roleArr.value = res.Data.List||[];
        }
    })
}


//获取用户数据
getTableUser()
//获取部门结构
getDepartArr()
//设置shareCustomDepartmentId的值
setShareCustomDepartId()
//获取研究方向分组列表
getResearchGroup()
//获取手机区号
getAreaCode()
//获取已有角色列表
getRoles()
</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="" class="icon-img" @click.stop>
                            <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsDepartment">
                            <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
                            <img src="~@/assets/img/set_m/edit.png" alt="" class="icon-img" @click.stop="openNodeDialog('edit',data,node)">
                            <el-popconfirm
                                @confirm="removeNode(data)"
                                confirm-button-text='删除'
                                cancel-button-text='取消'
                                confirm-button-type="primary"
                                :icon="InfoFilled"
                                icon-color="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 class="right_cont_top">
                <div>
                    <el-button type="primary" @click="openUserDialog('add',{})">添加用户</el-button>
                    <el-button type="primary" @click="synchronizationMEIKE" style="margin-left: 26px;">同步每刻</el-button>
                </div>
                <el-input
                    placeholder="姓名/账号/手机号搜索"
                    v-model="tableParams.searchTxt"
                    :prefix-icon="Search"
                    clearable
                    @input="initDepart"
                    style="max-width:359px">
                </el-input>
            </div>
            <div class="right_cont_bot">
                <el-table 
                    :data="tableData"
                    @row-click="getUserDetail"
                    v-loading="isShowloadding"
                    element-loading-text="数据加载中..."
                    highlight-current-row border
                >
                    <el-table-column v-for="column in tableColumns" :key="column.key"
                        :prop="column.key"
                        :label="column.label"
                        align="center"
                    >
                        <template #default="{row}">
                            <span v-if="column.key==='Enabled'"
                                :style="{color:row.Enabled===0?'#FF0000':null}"
                            >{{row.Enabled===0?'禁用':'启用'}}</span>
                            <span v-else-if="column.key==='RealName'">
                                <el-tag
                                    v-if="row.LabelVal" 
                                    :style="row.LabelVal==1||row.LabelVal==2?'color:#fff;background:#409EFF':'color:#409EFF;background:#ECF5FF'" 
                                    style="position:absolute;left:10px"
                                >{{
                                    row.LabelVal==1?'超管'
                                    :row.LabelVal==2?'管理员'
                                    :row.LabelVal==3?'部门经理'
                                    :row.LabelVal==4?'组长':'主管'
                                }}</el-tag>
                                <span style="position: relative;">{{row.RealName}}</span>
                            </span>
                            <span v-else>{{row[column.key]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="260">
                        <template #default="{row}">
                            <div style="color:#4099ef; font-size:24px;display: flex;gap:0 10px;">
                                <span class="editsty" @click.stop="openUserDialog('edit',row)">编辑</span>
                                <span class="editsty" @click.stop="openResetPassDialog(row)">重置密码</span>
                                <span class="editsty" @click.stop="openMoveDepartDialog(row)">移动分组</span>
                                <span 
                                    class="editsty" 
                                    @click.stop="changeStatus(row)"
                                >{{row.Enabled===0?'启用':'禁用'}}</span>
                                <!-- <span class="deletesty" @click.stop="delUser(row)">删除</span> -->
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-config-provider :locale="zhCn">
                    <el-pagination background layout="total,prev,pager,next,jumper" :current-page="tableParams.pageNo"
                        :page-size="tableParams.pageSize" :total="tableParams.total"
                        @current-change="handleCurrentChange" style="margin-top: 60px; justify-content: flex-end;">
                    </el-pagination>
                </el-config-provider>
                <!-- 用户详情右侧弹窗 -->
                <transition name="fade">
                    <UserDetail 
                        v-if="isShowUserdtl"
                        :isShow="isShowUserdtl"
                        :userInfo="userObj"
                        :researchGroup="researchGroup"
                        @closeDetail="isShowUserdtl = false"
                    />
                </transition>
            </div>
        </div>
    </div>
    <!-- 添加/编辑用户弹窗 -->
    <ModifyUserDialog 
        :isShow="isModifyUserShow"
        :type="modifyUserType"
        :userInfo="userInfo"
        :researchGroup="researchGroup"
        :areaCode="areaCode"
        :departArr="departArr"
        :roleArr="roleArr"
        @submitForm="modifyUser"
        @closeDia="isModifyUserShow = false"
    />
    <!-- 添加/编辑节点弹窗 -->
    <ModifyNodeDialog 
        :isShow="isModifyNodeShow"
        :type="modifyNodeType"
        :nodeInfo="nodeInfo"
        @submitForm="modifyNode"
        @closeDia="isModifyNodeShow = false"
    />
    <!-- 重置密码弹窗 -->
    <ResetPassDialog 
        :isShow="isResetPassShow"
        :userInfo="userInfo"
        @submitForm="resetUserPassWord"
        @closeDia="isResetPassShow = false"
    />
    <!-- 移动分组弹窗 -->
    <MoveDepartDialog 
        :isShow="isMoveDepartShow"
        :userInfo="userInfo"
        :departArr="departArr"
        @submitForm="moveDepart"
        @closeDia="isMoveDepartShow = false"
    />
</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;
            height: calc(100vh - 120px);
            // box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            display: flex;
            flex-direction: column;

            .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 {
                flex: 1;
                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);

            }
        }
    }
</style>