<template>
        <div style="position: relative;height: 100%;">
            <div class="left">
                <div class="logo2">
                    <img :src="fromL.basics.logo ? fromL.basics.logo : require('../assets/img/moren.png')" alt="">
                </div>
                <div class="ulT">

                    <!-- 默认首页 -->
                    <div class="ulTOne" @click.stop="goto(0)" :style="{background :activeL === 0 ?'#E6F0FF':'',zIndex:9 }">
                        <div  class="menu_left">
                            <img  class="logo" :src="activeL === 0 ? require('../assets/img/sy1.svg') : require('../assets/img/sy.svg')" alt="">
                            <span  :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
                        </div>
                    </div>

                    <!-- 权限 -->
                    <div class="TwoBar ulTOne" v-for="(item,index) in appSignL(fromL.admin.sidebar.list)"
                        :key="index+1">

                        <!-- 渲染菜单类型 -->
                        <div  class="menu_left" v-if="item.menuName">
                            <!-- :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" -->
                            <img :src="item.menuIcon" class="logo" alt="">
                            <span >{{ item.menuName }}</span>
                            <!-- :style="{color : activeL === (index +1) ? '#0051D7' :''}" -->
                              <!-- 二级导航 -->
                                <transition name="slide">
                                    <div class="ulTCopy">
                                        <div class="ulTCopyTit">
                                            <span>{{ item.menuName }}</span>
                                            <!-- <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span> -->
                                        </div>
                                        <div class="ulTCopyHei">
                                            <div class="ulTCopyTxt" :style="{background : (activeLTwo === index+1 +'+' + ind)? '#E6F0FF' : ''}" 
                                            v-for="(i,ind) in appSignL(item.children)"
                                             @click="levTwo(i,ind,index)" :key="ind+'a'">
                                            <!-- {{ activeLTwo }}------{{  index+1 +'+' + ind }} -->
                                                <div>
                                                    <div style="display: flex;justify-content: space-between;align-items: center;" v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
                                                        <img style="width: 30px;object-fit: contain;height: 30px;margin-right: 5px;"  
                                                        :src="p.icon" 
                                                        alt="">
                                                        <div class="ovlH">{{ p.name }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </transition>
                        </div>
                    
                        <!-- 渲染平台工具类型 -->
                        <div @click.stop="goto(index,item)" style="border-radius: 10px;" 
                        :style="{background :activeL === (index +1) ?'#E6F0FF':'',zIndex : 9999 }" v-else>
                            <div  v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
                                <div class="menu_left" >
                                    <div>
                                        <img class="logo3"  
                                        :src="activeL === (index +1) ? p.icon : p.activeIcon" 
                                        alt="">
                                    </div>
                                    <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">
                                        {{ p.name }}
                                    </span>
                                </div>
                            </div>

                            <transition name="slide" style="z-index: -10;">
                                    <!-- 应用中心 -->
                                    <div class="ulTCopy" style="z-index: -10;"  v-if="item.toolId == 'appStore'">
                                        <div class="ulTCopyTit">
                                            <span>CocoFlow</span>
                                            <!-- <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span> -->
                                        </div>
                                        <div class="ulTCopyHei" >
                                            <span style="color: #00000066;">最近使用</span>
                                            <div class="ulTCopyTxt"  
                                            v-for="(i,ind) in cocoFlowList[0]" @click="openNewWindow(i.url)" :key="ind+'ab'">
                                                <div  class="ulTCopyTxtCon">
                                                        <img style="width: 20px;height: 20px;border-radius: 10px;object-fit: contain;margin-right: 5px;"  
                                                        :src="JSON.parse(i.json).icon" 
                                                        alt="">
                                                        <div class="ovlH">{{ i.name }}</div>
                                                </div>
                                            </div>
                                            <span style="color: #00000066;">我的收藏</span>

                                            <div class="ulTCopyTxt"
                                            v-for="(i,ind) in cocoFlowList[1]" @click="openNewWindow(i.url)" :key="ind+'a'">
                                                    <div class="ulTCopyTxtCon" >
                                                        <img style="width: 20px;height: 20px;border-radius: 10px;object-fit: contain;margin-right: 5px;"  
                                                        :src="JSON.parse(i.json).icon" 
                                                        alt="">
                                                        <div class="ovlH">{{ i.name }}</div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </transition>
                        </div>
                    </div>
                
                </div>
                <div class="userInfo">
                    <img style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%;margin-bottom: 4px;" :src="userinfo.headportrait ? userinfo.headportrait : require('../assets/img/toux.png')" alt="">
                    <div style="margin-bottom: 8px;">{{ userinfo.username }}</div>
                    <span style="cursor: pointer;padding: 5px;background-color: #e7e7e7;box-sizing: border-box;border-radius: 5px;" @click="handleLogout">退出登录</span>
                </div>
            </div>
           
           
          
        </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import store from '../store'
import { API_CONFIG } from "@/common/apiConfig";

    export default {
        props:['urlAddress'],
        computed: {
            ...mapGetters(['userinfo','fromL','appSign']),
            // 如果hk，com没有图标，默认使用cn的
            AppCon(){
                return function(c) {
                    let k = JSON.parse(JSON.stringify(c))
                    let data = k.filter(e=>{
                        return e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea
                    })

                    let data2 = k.filter(e=>{
                        return e.region == 'cn'
                    })
                    
                    // 如果hk，com没有图标，默认使用cn的
                    if (!data[0].icon){
                        data[0].icon = data2[0].icon
                        data[0].activeIcon = data2[0].activeIcon
                    }
                    return data
                };
            },
            // 筛选是否为管理员可见，是否被删除
            appSignL(){
                return function(val){
                    // console.log(val);
                    
                    let data = []
                    if (this.userinfo.type == 1 && this.userinfo.role == 1) {
                        val.forEach( e =>{
                            if (e.menuName || e.status == 0) {
                               data.push(e)
                            }
                        })
                    } else {
                        val.forEach( e =>{
                            if (e.menuName || (e.isAdmin == '0' && e.status == 0)) {
                               data.push(e)
                            }
                        })
                    }
                    return data
                }
            }
        },
        data() {
            return {
                // 一级选中第几个
                activeL:0,
                // 二级选中第几个
                activeLTwo: null,
                cocoFlowList:[],

            }
        },
        methods: {
            ...mapActions({
                logout: 'user/logout'
            }),
            async handleLogout() {
                this.$confirm('确定退出吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    loginOut()
                    .then(async () => {
                        this.$message({
                        message: '退出成功',
                        type: 'success'
                        });
                        await this.logout();
                        this.$router.push('/login');
                    })
                    .catch(err => {
                        console.error(err);
                    });
                }).catch(() => {
                    // 取消操作
                });
            },

            // 点击一级导航
            async goto(index,val = null){
                // console.log('goto',val);
              
                // val = null 就是点击了首页
                if (val) {
                    this.activeL = index + 1               
                }else{
                    // 点击首页清空内容,并把标识去除
                    await store.commit('user/SET_AppSIGN', '')
                    this.$emit('update:urlAddress','')

                    this.$emit('getPer')
                    // 清空选中状态
                    this.activeLTwo = ''
                    this.activeL = index
                    return
                }
           
                    this.activeLTwo = ''


                    // 点击相同应用不刷新  
                    if (this.appSign == val.toolId) return

                    // 更新标识
                    await store.commit('user/SET_AppSIGN', val.toolId)

                    let url = ''
                    // 查出对应账号的应用区域地址
                    val.url.forEach(e => {
                         // if (e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea) {
                        if (e.region == "beta") {
                            url = e.url
                        }
                    });
                    let _userinfo = this.userinfo, //登录用户信息
                    { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                    const _TscreenType = 1, _SscreenType = 3; // 常量定义
                    let queryString = ''
                    if(val.argumentList && val.argumentList.length){
                        const paramsMap = {
                        userid: _userid,
                        org: _org,
                        oid: _oid,
                        tType: _type,
                        role: _role,
                        classId: _classId,
                        TscreenType: _TscreenType,
                        SscreenType: _SscreenType
                        };

                        const canshu = val.argumentList
                        .filter(param => paramsMap[param] !== undefined)
                        .map(param => `${param}=${paramsMap[param]}`);

                        queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                    }

                    let _url = url + queryString

                    let kpl = ` <iframe 
                                    v-if="appSign && urlAddress"
                                    allow= "camera *; microphone *;display-capture;midi;encrypted-media;"
                                    frameborder="no" 
                                    border="0" 
                                    style="border:0;width:100%;height:100%;" 
                                    src="${_url}" 
                                    ref="pageCon"
                                    >
                                </iframe>`

                    let pl = {json:kpl ,stateL :true,toolId :val.toolId}

                    this.$emit('AddAppJson',pl)
            },
            getData(){
                let params = [
                    {
                        functionName: API_CONFIG.ajax_appStoreSave.functionName,
                        uid: this.userinfo.userid, 
                    },
                ];
                
                this.$ajax
                    .post(API_CONFIG.baseUrl, params)
                    .then((res) => {
                        this.cocoFlowList.push(res.data[0])
                        this.cocoFlowList.push(res.data[1])
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false
                        this.$message.error("获取常见应用失败");
                    });
            },
            // 点击二级导航
            async levTwo(val,index,aInd){     
                
                this.activeL = ''
                this.activeLTwo = `${aInd + 1}+${index}`

                // 点击相同应用不刷新
                if (this.appSign == val.toolId) return

               // 更新标识
                await store.commit('user/SET_AppSIGN', val.toolId)
                
                let url = ''
                val.url.forEach(e => {
                    // if (e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea) {
                    if (e.region == "beta") {
                        url = e.url
                    }
                });

                let _userinfo = this.userinfo, //登录用户信息
                { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                const _TscreenType = 1, _SscreenType = 3; // 常量定义
                let queryString = ''
                if(val.argumentList && val.argumentList.length){
                    const paramsMap = {
                    userid: _userid,
                    org: _org,
                    oid: _oid,
                    tType: _type,
                    role: _role,
                    classId: _classId,
                    TscreenType: _TscreenType,
                    SscreenType: _SscreenType
                    };

                    const canshu = val.argumentList
                    .filter(param => paramsMap[param] !== undefined)
                    .map(param => `${param}=${paramsMap[param]}`);

                    queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                }

                let _url = url + queryString
                let kpl = ` <iframe 
                                v-if="appSign && urlAddress"
                                allow= "camera *; microphone *;display-capture;midi;encrypted-media;"
                                frameborder="no" 
                                border="0" 
                                style="border:0;width:100%;height:100%;" 
                                src="${_url}" 
                                ref="pageCon"
                                >
                            </iframe>`

                let pl = {json:kpl ,stateL :true,toolId :val.toolId}

                this.$emit('AddAppJson',pl)
            },
            openNewWindow(val) {
                console.log(val);
                
                // // 基本用法：打开指定 URL
                window.open(val, "_blank");
            },
        },
       
       
    }
</script>

<style scoped>

.logo{
  width: 80px;
  height: 68px;
}
.logo3{
    height: 25px;object-fit: contain;transform: scale(1.5);
}
.logo2{
  padding: 16px;
  box-sizing: border-box;
  height: 68px;
  width: 100%;
  background-color: #fff;
  text-align: center;
  border-bottom: .5px #e5e7eb solid;
}
.logo2 img{
  width: 37px;
}
.userInfo{
  width: 80px;
  color: #374151;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  background-color: #fff;
  padding-bottom: 20px;
}
.left {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    width: 80px;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.1);
    /* z-index: 999; */

}
.left .ulT { 
  width: 100%;
  height: 100%;
  padding: 8px 0;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  overflow: auto;
  overflow-x: hidden;
  flex-direction: column;
  background-color: #ffffff;
}
.left .ulT .ulTOne{ 
    border-radius: 10px;
    margin: 0 auto;
}

.ulT div:nth-child(1){
    margin-top: 0;
}
.ulTCopy{
    position: fixed;
    left: -256px;
    top: 0;
    height: 100%;
    width: 256px;
    z-index: -100;
    background-color: #ffffff;
    overflow: visible; 
    transform: translateX(0px); /* 初始位置在视图之外 */
    box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.1),5px 3px 5px 0px rgba(0, 0, 0, 0.1);
    transition: transform .5s ease;

}

.TwoBar:hover .ulTCopy{
    transform: translateX(336px); /* 初始位置在视图之外 */
    z-index: -100;
    display: block !important;
}
.TwoBar{
    position: relative;
    padding:0 8px;box-sizing: border-box;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
  z-index: -1000 !important;

}

.slide-enter{
    z-index: -1000 !important;
  transform: translateX(0); /* 进入时移动到正常位置 */
}
.slide-leave-to /* .slide-leave-active in <2.1.8 */ {

    z-index: -1000 !important;

  transform: translateX(0); /* 进入时移动到正常位置 */
}

.ulTCopyTit{
    height: 72px;padding: 16px;box-sizing: border-box;color: #000;font-size: 18px;font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .5px #e5e7eb solid;
}
.ulTCopyHei{
    padding: 16px;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;
    overflow: auto;
    height: calc(100% - 72px);
}
.ulTCopyTxt{
    height: 48px;padding: 12px;box-sizing: border-box;display: flex;align-items: center;
    color: #374151;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    margin: 0;
}
.ulTCopyTxtCon{
   display: flex;align-items: center;width: 100%;
}
.ulTCopyTxt:hover{
    background-color: #f3f4f6 !important;
}
.cha:hover{
    color: #000 !important;
}

.menu_left {
  width: 64px;
  height: 70px;
  font-size: 10px;
  margin-top: 3px;
  white-space: nowrap;
  color: #64748b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  z-index: 1000000;
  text-decoration: none; /* 移除下划线 */
  cursor: pointer;
  border-radius: 10px;
  margin-top: 12px;
}

.menu_left:hover{
    background-color: #f3f4f6 !important;
}
.menu_left img{
  width: 22px;
  height: 20px;
}
.ovlH{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>