<template>
    <div class="applicationHomeBorardFreeContainer">
        <div class="title">
            <h2></h2>
            <el-button type="primary" size="small" @click="markertApp" v-if="network">应用市场</el-button>
        </div>
        <div class="appcateposition">
            <div class="appcate">
                <span class="appcatespan" v-for="(item,index) in appcateArrList" :key="index">
                    <h3>{{item.title}}</h3>
                    <ul>
                            <li v-for="(its,i) in item.children" :key="i" @click="loadAppMenu(its.appid,its.name)">
                                <img :src="its.img.indexOf('https')>-1?its.img:contextUrl+its.img" v-if="its.img">
                                <cite>{{its.name}}</cite>
                            </li>                        
                    </ul>                    
                </span>   
                <span class="notApp" v-if="appcateArrList.length==0">
                        <p><img src="~@/assets/images/other/notAppIcon.png"></p>
                        <p class="textinfo">暂无可操作的应用，可联系组织或部门管理员为您授权</p>
                </span>              
                <!-- <span class="appcatespan">
                    <h3>应用分类</h3>
                    <ul>
                        <li v-for="(item,index) in applistArr" :key="index" @click="loadAppMenu(item.id,item.name)"><img src="~@/assets/images/other/appicon1.png"><cite>{{item.name}}</cite></li>
                    </ul>
                </span>              -->
            </div>
        </div>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
export default{
    inject: [
        'addTab',
    ],
    data(){
        return{
            applistArr:[],
            tabs:[],
            appcateArrList:[],//工作台应用分类
            contextUrl:obpmConfig.obpmFilePath,
            network:true,//获取__network__全局变量状态，判断显示隐藏
        }
    },
    mounted() {
        this.network=__network__ //获取__network__全局变量状态，判断显示隐藏
        // if(localStorage.getItem('HomeApplist_board')&&JSON.parse(localStorage.getItem('HomeApplist_board')).employeeIdStr==localStorage.getItem('employeeId')){//前端走缓存，职员id一样，多次刷新不走接口，走缓存
        //    this.appcateArrList=JSON.parse(localStorage.getItem('HomeApplist_board')).appcateArrListStr
        // }else{
        //   this.applistIframe()//工作台查询应用分类
        // }
        this.applistIframe()//工作台查询应用分类
    },
    methods: {
        markertApp(){//点击应用市场跳转         
          var param={
            id:"applicationMarket",
            name:'应用市场',
            linkType:'applicationMarket',
            actionContent:"",
            icon:"-1",
            key:""
          }
          console.log(this.$listeners)
          this.addTab(param)
        },        
        applistIframe(){//查询应用列表 
            let data = {//只查询电脑端应用
              search_clientype: "电脑端",       
            }
            this.$api.getApplicationsAll(data,{
                onSucess: response => {                   
                    if (response.data && response.data.errmsg == "ok") {
                        console.log(response.data)
                        if(response.data.data.data.length){
                            let arr=[]
                            response.data.data.data.forEach((item,index)=>{
                                let obj={}
                                let obj2={}
                                obj.title=item.items['__4ReuvgLxTKieJDzGu2L'].value    
                                obj.cateSort=item.items['__sJO2jdvlNEznauT5KQa'].value //分类排序  

                                obj.children=[]                                
                                obj2.img=item.items['__oTDoKOfuYRsmXS7DfDk'].value? JSON.parse(item.items['__oTDoKOfuYRsmXS7DfDk'].value)[0].path : ""  //应用图标
                                obj2.name=item.items['__M0NXUq24HGrzQrmjLwj'].value  //应用名称 
                                obj2.appid=item.items['__ZLG2HsnA374L6Ww4X6P'].value //应用id   
                                obj2.appSort=item.items['__zsh5fkZEXwof08KVNMe'].value //应用id

                                obj.children.push(obj2)
                                arr.push(obj)                      
                                  
                            })  
                            console.log(arr)
                            arr.sort((a,b)=>{return Number(a.cateSort)-Number(b.cateSort)}) //分类排序cateSort 
                           
                            const titleMap = {}
                            const transferObj = arr.reduce((prev, next) => {  
                            if(titleMap[next.title]) {
                                prev[next.title].children.push(...next.children)
                            } else {
                                titleMap[next.title] = true
                                prev[next.title] = {children: next.children}
                            }
                            return prev
                            }, {})

                    
                            let arr2=[]
                            for(let i in transferObj){
                                let obj={}
                                obj.title=i
                                transferObj[i].children.sort((a,b)=>{return Number(a.appSort)-Number(b.appSort)}) //应用排序cateSort 
                                obj.children=transferObj[i].children
                                arr2.push(obj)
                            }

                            if(location.host.indexOf("v5qy.test.baibaodun.cn")>-1){
                                    if(localStorage.getItem("domainId")!='__2gH5luUlviULa7KnmqW'){//临时过滤使用--后期删除--测试117环境
                                        arr2.forEach((item,index)=>{
                                            item.children.forEach((its,ix)=>{                                       
                                                if(its.name=='组织权益'){
                                                    if(item.children.length==1){
                                                        arr2.splice(index,1)
                                                    }
                                                    item.children.splice(ix,1)                                          
                                                }
                                            })
                                        })
                                    } 
                            }else{
                                if(localStorage.getItem("domainId")!='__Qqg3L4GhNXG4iRAmcTB'){//临时过滤使用--后期删除--正式环境
                                        arr2.forEach((item,index)=>{
                                            item.children.forEach((its,ix)=>{                                       
                                                if(its.name=='组织权益'){
                                                    if(item.children.length==1){
                                                        arr2.splice(index,1)
                                                    }
                                                    item.children.splice(ix,1)    //不在这个组织，组织权益应用隐藏删除                                      
                                                }
                                            })
                                        })
                                } 
                            }
                           console.log(arr2)  
                           this.appcateArrList=arr2
                          
                           if(this.appcateArrList[0].children[0].appid=='__d1qEDy3wYq8VF5KvUoE'){//智能人事（__xkeybkGaZa1SboC9GL1）、机构用户管理（__d1qEDy3wYq8VF5KvUoE）
                              let name=this.appcateArrList[0].children[0].name
                              let appId=this.appcateArrList[0].children[0].appid
                              let obj={name,appId}
                              localStorage.setItem('appidSupervise',JSON.stringify(obj))
                           }

                           //前端缓存本地代码块--切换不同组织的所有应用列表
                        //    let HomeApplist_board={employeeIdStr:localStorage.getItem('employeeId'),appcateArrListStr:this.appcateArrList}        
                        //    localStorage.setItem('HomeApplist_board',JSON.stringify(HomeApplist_board))               
                                                                
                        }                          
                        
                    }
                }
            });
        },
        loadAppMenu(appId, name) {//点击应用列表查询左边应用菜单 
            if (appId != "km" && appId != "pm" && appId != "qm") {
                this.$root.appid = appId;
            }           
             let flag=1
            this.$store.dispatch("loadMenus", {appId, name,flag});
            if(appId=='__d1qEDy3wYq8VF5KvUoE'){//智能人事（__xkeybkGaZa1SboC9GL1）、机构用户管理（__d1qEDy3wYq8VF5KvUoE）
              let obj={name,appId}
              localStorage.setItem('appidSupervise',JSON.stringify(obj))
            }
        },
    },
}
</script>
<style lang="scss">
.applicationHomeBorardFreeContainer{
    height: 100%;
    .title{
        display: flex;
        flex-direction: row;
        padding: 24px;
        h2{flex:1;font-size: 18px;}
    }
    .appcateposition{position: relative; height: 100%;}
    .appcate{
        display: flex;
        padding: 5px 24px;
        flex-wrap: wrap;
        justify-content: space-between;
        max-height: calc(100% - 80px);//父元素必须都使用 height:100%,calc才能生效  calc() 函数用于动态计算长度值
        overflow: auto;
        .appcatespan{
            display: flex;
            flex-direction: column;
            border: 1px solid #E9E9E9;
            border-radius: 5px;
            padding: 16px;
            margin-bottom:16px;
            width: 49%;
            background: #fff;
            h3{font-size: 14px;margin-bottom: 10px;}
            ul{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                li{
                    align-items: center;
                    text-align: center;
                    display: flex;
                    flex-direction: column;  
                    width: 121px;
                    height: 124px;
                    justify-content: center;  
                    cursor: pointer;                
                    img{width: 48px; height: 48px;margin-bottom: 8px;}
                    cite{font-size: 12px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; width: 100%;}
                }
            }
        }
    }

   
}
.notApp{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    margin-top:50px;
    .textinfo{
        color: rgba(0,0,0,0.65);
        font-size: 15px;
        margin-top:24px;
    }
}
</style>