<script setup>
import { ref, reactive, watch } from 'vue'
import { departInterence } from '@/api/api.js'
const props = defineProps({
    isShow: Boolean,
    userInfo:{
        type:Object,
        default:{RoleId:0}
    },
    researchGroup:Array
})
const emit = defineEmits(["closeDetail"])
let userObj = {}
let isShowUserdtl = ref(false)
watch(()=>props.isShow,(newval)=>{
    if(newval){
        setUserObj()
    }else{
        isShowUserdtl.value = false
    }
},{immediate:true})
watch(()=>props.userInfo.RoleId,()=>{
    if(props.isShow){
        setUserObj()
    }
},{deep:true})
async function setUserObj(){
    const {user,direct} = props.userInfo
    userObj = {
        name:user.RealName || '暂无',
        tel:user.Mobile || '暂无',
        depart:user.DepartmentGroup || '暂无',
        post:user.Position || '暂无',
        roleId:user.RoleId || 0,
        role:user.RoleName || '暂无',
        auth:user.Authority===2?'小组负责人':user.Authority===1?'部门负责人':'无',
        account:user.AdminName,
        pwd:user.Password,
        employeeNumber:user.EmployeeId || '暂无',
        direct:changeResearchGroupIdsToDirect(direct,'tag_name'),
        province:user.Province,
        city:user.City,
    }
    await getAuthList(user.RoleId||0)
    isShowUserdtl.value = true
}
let authList = []
async function getAuthList(id){
    departInterence.getAuthList({
        RoleId:Number(id)
    }).then(res => {
        if(res.Ret === 200) {
            let list = [];
            /* 校验是否有选中的权限列表 如果有显示已勾选的权限 没有就不显示权限列表 */
            let Bol = res.Data.List.some(item => {
                return item.CheckList&&item.CheckList.length !=0
            })
            if(Bol) {
                res.Data.List.length&&res.Data.List.forEach(item => {
                    let obj = {
                        checkAll:item.CheckList.length===item.Child.length?true:false,
                        ...item,
                    }
                    list.push(obj)
                })
            }
            authList = list;
        }
    })
}
//转换研究员研究方向分组数据,用于编辑的回显
function changeResearchGroupIdsToDirect(GroupIds,keyWord){
    let direct = []
    GroupIds.forEach(item=>{
        direct.push(getResearchGroupByKeyword(item,keyWord))
    })
    return direct
}
function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
    const getResearchGroupOption = (list, value) => {
        for (let i in list) {
            //排除掉一级
        if (list[i].tag_id == value&&!list[i].classify_name) {
            return [list[i]];
        }
        if (list[i].tags) {
            let node = getResearchGroupOption(list[i].tags, value);
            if (node !== undefined) {
            return node.concat(list[i]);
            }
        }
        }
    }
    const answer = getResearchGroupOption(props.researchGroup, GroupId)||[];
    return answer.map((i) => i[keyWord]).reverse();
}
</script>

<template>
    <div class="right_shadow" v-if="isShowUserdtl">
        <div class="shadow_top">
            <img src="@/assets/img/set_m/user_img.png" alt="" style="width:38px;height:38px;margin-right:10px;">
            <span style="margin-right:50px;font-size:16px;width:100px;display:inline-block;" class="text_oneLine">{{userObj.name}}</span>
        </div>
        <ul class="shadow_info">
            <li class="info_item">
                <h4 class="item_tit">手机号：</h4>
                <span>{{userObj.tel}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">部门/分组：</h4>
                <span>{{userObj.depart}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">工号：</h4>
                <span>{{userObj.employeeNumber}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">职务：</h4>
                <span>{{userObj.post}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">角色：</h4>
                <span>{{userObj.role}}</span>
            </li>
            <li class="info_item" v-if="userObj.depart.includes('FICC研究部')">
                <h4 class="item_tit">研究方向：</h4>
                <span>{{userObj.direct.map(i=>i.join('/')).join('、')||'暂无'}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">工作地点：</h4>
                <span>{{userObj.city?userObj.province+' '+userObj.city:'暂无'}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">管理权限：</h4>
                <span>{{userObj.auth||'暂无'}}</span>
            </li>
            <li class="info_item">
                <h4 class="item_tit">登录账号/密码：</h4>
                <span>{{userObj.account+'/***'}}</span>
            </li>
        </ul>
        <el-popover
            placement="left"
            :title="userObj.name+'权限'"
            width="560"
            trigger="hover">
            <div class="auth_cont" style="padding:30px 0;max-height: 70vh; overflow-y: auto;">
                <template v-if="authList.length">
                    <div v-for="item in authList" :key="item" class="menu_item">
                        <el-checkbox  v-model="item.checkAll" disabled>{{item.Name}}</el-checkbox>
                        <div style="margin: 15px 0; padding:24px;border:1px solid #DCDFE6">
                            <el-checkbox-group v-model="item.CheckList" disabled>
                                <el-checkbox v-for="list in item.Child" :label="list.MenuId" :key="list">{{list.Name}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </template>
                <span v-else style="font-size:16px;color:#999;margin-left:20px;">暂无权限</span>
            </div>
            <template #reference>
                <span style="font-size:16px;color:#409EFF;cursor:pointer;">查看权限</span>
            </template>
        </el-popover>
        <img src="~@/assets/img/ppt_m/close.png" alt="" class="close_btn" @click="emit('closeDetail')">
    </div>
</template>

<style scoped lang="scss">
.right_shadow {
    width: 350px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: hidden;
    z-index: 10;
    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;
        cursor:pointer;
    }
}
</style>
