<template>
    <div>
        <div class="top">
            <div class="topBlock">
                <div class="topTit" style="display: flex;">
                    <div>欢迎使用</div>
                    <div style="color: #0354D7;margin: 0 15px;">深圳市荔园教育集团—{{ fromL.basics.title }}</div>
                    <div>AI平台！</div>
                </div>
                <div class="topDetail">
                    <!-- 探索AI教育的无限可能，提升教学效率与学习体验 -->
                     {{ fromL.basics.brief }}
                </div>
            </div>
            <img style="width: 96px;height: 96px;" src="../assets/img/root.png" alt="">
        </div>
        <div class="TabList">
            <div class="TabListCon" @click="openApp(item)" v-for="(item,index) in appSignL(fromL.admin.index.list)" :key="index">
                    <div v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
                        <img style="height: 25px;object-fit: contain;transform: scale(1.5);margin-bottom: 12px;"     
                        :src="p.icon" 
                        alt="">
                        <div class="TabListName">
                            {{ p.name }}
                        </div>
                    </div>

                   
                    <div class="TabListBri">
                        <el-tooltip class="item" effect="light" :content="item.description" placement="bottom">
                            <span>
                                {{ item.description }}
                            </span>
                        </el-tooltip>
                    </div>
            </div>
        </div>
        <div class="footCon">
            <div class="footConLeft">
                <div><img style="margin-bottom: 12px;height: 41px;width: 36px;" src="../assets/img/sucai2.svg" alt=""></div>
                <div style="font-size: 20px;font-weight: 600;color: #1f2937;margin-bottom: 8px;">CocoFlow</div>
                <div style="color: #4b5563;font-size: 14px;">汇聚丰富的教育AI应用，搭建属于您的专属教育应用</div>
            </div>

            <div class="footList">
                <div class="footListCon" v-for="(item,index) in CocoFlowList" @click="openNewWindow(item)" :key="index">
                    <div><img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt=""></div>
                    <div class="TabListName">{{ item.name }}</div>
                    <div class="TabListBri">
                        <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                            <span>
                                {{ item.detail }}
                            </span>
                        </el-tooltip>
                    </div>
                </div>
                <!-- <div class="footListCon footListCon2">
                    <div style="margin-bottom: 8px;font-size: 40px;color: #0354D7;">+</div>
                    <div class="TabListBri">添加常用应用</div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import store from '../store'

    export default {
        props:['CocoFlowList'],
        computed: {
            ...mapGetters(['userinfo','fromL']),
              // 如果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){
                    
                    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 {
              
            }
        },
        methods: {
            async openApp(val){
                // 点击相同应用不刷新
                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) {
                        url = e.url
                    }
                });

                let dom = document.querySelector('#pageCon')
        
                document.querySelector('#pageCon').innerHTML = '';
                
                if (val.toolId == 'dataBoardNew') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','role'])
                }else if (val.toolId == 'classroomObservation') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org'])
                }else if (val.toolId == 'teacher') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org'])
                }else if (val.toolId == 'futureClass') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','role'])
                }else if (val.toolId == 'student') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','classId','org','role'])
                }else if (val.toolId == 'appStore') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','role'])
                }else if (val.toolId == 'testTeacher') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','role'])
                }else if (val.toolId == 'evaluate') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org'])
                }else if (val.toolId == 'project') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','role'])
                }else if (val.toolId == 'study') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org','type','classId','TscreenType'])
                }else if (val.toolId == 'knowledge') {
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,['userid','oid','org'])
                }
            },
            openNewWindow(val) {
                console.log(val);
                
                // // 基本用法：打开指定 URL
                window.open(val.url, "_blank");
            },
        },
    }
</script>

<style scoped>

.footCon{
    display: flex;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
    background-color: #eff6ff;
    border-radius: 10px;
    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
    background-size: 20px 20px;
}
.footListCon2{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  
}
.footListCon{
    background-color: #fff;
    border-radius: 10px;
    padding: 24px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* 统一过渡效果 */
    min-height: 156px;
    max-width: 187px;
    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: pointer;
}
.footListCon:hover{
    transform: translateY(-5px); /* 向上位移 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.footConLeft{
    padding: 25px;
    min-width: 50px;
    box-sizing: border-box;
}
.footList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; /* 网格间距 */
}
.TabList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* 网格间距 */
    margin-bottom: 16px;
}

.TabListCon{
    width: 170px;
    height: 140px;
    padding: 24px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 0.3s ease; /* 统一过渡效果 */
    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: pointer;
}
.TabListCon:hover{
    transform: translateY(-5px); /* 向上位移 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.TabListName{
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.TabListBri{
    color: #4b5563;
    font-size: 12px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top{
    display: flex;
    min-height: 144px;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    margin-bottom: 32px;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
}
.topBlock{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.topTit{
    font-size: 30px;
    height: 100%;
    color: #000;
    font-weight: 600;
}
.topDetail{
    color: #64748B;
    margin-top: 16px;
}
</style>