<template>
    <div class="applicationMarketContainer">
        <div class="title">
            <h2>应用市场</h2>
            <el-button type="primary" size="small" @click="back" v-if="marketDetailshow">返回</el-button>
        </div>
        <div class="marketContent" v-if="marketContentshow">
            <div class="marketLeft">
                <h3></h3>
                <span class="searchinput"><el-input placeholder="搜索应用名称" v-model="search_appName" clearable/><el-button size="small" type="primary" @click="appcatelistSearch">搜索</el-button></span>
                <span class="searchul">
                    <ul>
                        <li @click="appSevice()" :class="activeIndex==-3?'active':''">服务套餐</li>
                        <li @click="appcatelist()" :class="activeIndex==-1?'active':''">精品推荐</li>
                        <li v-for="(item,index) in appcateArr" :key="index" :class="activeIndex==index?'active':''" @click="appcatelist(item,index)">{{item.name}}</li>                        
                    </ul>
                </span>
            </div>
            <!-- 应用区域 -->
            <div class="marketright" v-if="activeIndex>-1">
                <div class="marketAppList" v-for="(item,index) in appcateArrList" :key="index" v-if="appcateArrList.length">
                    <h4>{{item.title}}</h4>
                    <ul>
                        <li v-for="(its,i) in item.children" :key="i" @click="applidetail(its)">
                            <img :src="its.img.indexOf('http')>-1?its.img:contextUrl+its.img">
                            <span>
                                <strong>{{its.name}}</strong>
                                <em :title="its.Intro">{{its.Intro}}</em>
                            </span>
                        </li>                                               
                    </ul>
                </div>  
                <div class="marketAppList" v-if="appcateArrList.length==0">
                    <div class="nodata"><i class="el-icon-warning-outline"></i>该分类暂无应用！</div>
                </div>              
            </div>
            <!-- 推荐区域 -->
            <div class="marketright" v-if="activeIndex==-1">
               <recommend></recommend>
            </div>
            <!-- 搜索区域 -->
            <div class="marketright" v-if="activeIndex==-2">
                <div class="marketAppList" v-for="(item,index) in appcateArrListSearch" :key="index" v-if="appcateArrListSearch.length">
                    <h4>{{item.title}}</h4>
                    <ul>
                        <li v-for="(its,i) in item.children" :key="i" @click="applidetail(its)">
                            <img :src="its.img.indexOf('http')>-1?its.img:contextUrl+its.img">
                            <span>
                                <strong>{{its.name}}</strong>
                                <em :title="its.Intro">{{its.Intro}}</em>
                            </span>
                        </li>                                               
                    </ul>
                </div>  
                <div class="marketAppList" v-if="appcateArrListSearch.length==0">
                    <div class="nodata"><i class="el-icon-warning-outline"></i>该分类暂无应用！</div>
                </div>              
            </div>
            <!-- 服务套餐区域 -->
            <div class="marketright" v-if="activeIndex==-3">
               <service></service>
            </div>
        </div>


        <div class="marketDetail" v-if="marketDetailshow">
            <div class="marketDtop">
                <span class="DtopL"><img :src="imgpath.indexOf('http')>-1?imgpath:contextUrl+imgpath" class="appiconimg"></span>

                 <span class="DtopC"><h3>{{applidetailObj&&applidetailObj.__AvQl3Yuoe9nW0tJ3cab.value}}</h3><h4>{{applidetailObj&&applidetailObj.__fFdrm2Vvm4cxkoLyMHI.value}}</h4><h5>兼容性:{{applidetailObj&&applidetailObj.__Slb7pq4pxlml5u5PPtJ.value}}</h5></span>
                <span class="DtopR">
                    <!-- applidetailObj.__Q8YjJkAquTVFOGxloLl.value -->                
                    <el-button type="primary" v-if="applidetailObj && (applidetailObj.__ns63qDR4Z0uxg7L0eh4.value!=0&&applidetailObj.__Q8YjJkAquTVFOGxloLl&&applidetailObj.__Q8YjJkAquTVFOGxloLl.value=='可试用')">
                        试用期{{applidetailObj&&applidetailObj.__ns63qDR4Z0uxg7L0eh4.value}}天
                    </el-button>
                    <el-button type="primary" v-else-if="applidetailObj && (applidetailObj.__Q8YjJkAquTVFOGxloLl&&applidetailObj.__Q8YjJkAquTVFOGxloLl.value=='试用到期')" disabled>
                        试用到期
                    </el-button>
                    <el-button type="primary" v-else-if="applidetailObj && (applidetailObj.__Q8YjJkAquTVFOGxloLl&&applidetailObj.__Q8YjJkAquTVFOGxloLl.value=='已拥有')" disabled>
                        已拥有
                    </el-button>
                     <el-button type="primary" v-else-if="applidetailObj&&applidetailObj.__ns63qDR4Z0uxg7L0eh4.value!=0">
                        试用期{{applidetailObj&&applidetailObj.__ns63qDR4Z0uxg7L0eh4.value}}天
                    </el-button>
                    <el-button type="primary" plain style="margin-left:0px" icon="el-icon-chat-dot-round" @click="onlineIM">在线咨询</el-button>
                </span>
            </div>
            <div class="marketDbottom">
                <div class="marketDTabTitle"><div class="tabspan"><span :class="index===0?'acitve':''" @click="detailTabs(0)">详情</span></div></div>
                <!-- <div class="marketDTabTitle"><div class="tabspan"><span :class="index===0?'acitve':''" @click="detailTabs(0)">详情</span><span :class="index===1?'acitve':''" @click="detailTabs(1)">服务流程</span></div></div> -->
                <div class="marketInfoDetail" v-html="applidetailObj.__ZXwYadXyti1zb1Gp8G7.value" v-if="index==0" @scroll="scrollEvent"></div>
                <div class="marketInfoDetail" v-html="applidetailObj.__q3baYejbILkyA2NNSZL.value" v-if="index==1"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
import config from "../../public/js/obpm.config.js"
import recommend from './recommend';//精品推荐
import service from './service';//服务套餐
const contextPath = config.contextPath;
export default{
    data(){
        return{
            appcateArr:[],
            appcateArrList:[],
            appcateArrListSearch:[],//搜索列表
            contextPath:contextPath,
            applidetailObj:{},//应用详情
            imgpath:"",//图片路径
            marketContentshow:true,
            marketDetailshow:false,
            search_appName:"",//按应用名称搜索
            search_apptypename1:"",//搜索市场分类名称
            index:0,
            activeIndex:-3,//默认选中全部
            contextUrl:obpmConfig.obpmFilePath,
        }
    },
    components:{
        recommend,
        service
    },
    mounted() {
        this.appcateli()//查询左边菜单分类
        this.appcatelistAll()//查询所有应用列表
    },  
    methods: { 
        scrollEvent(e){//详情滚动事件
           console.log(e.target.scrollTop)
           if(e.target.scrollTop>200){//超过滚动隐藏
               $(".marketDtop").hide()
               $(".marketInfoDetail").css("max-height","calc(100% - 110px)")
           }else{
               $(".marketDtop").show()              
           }
        },        
        back(){
          this.marketContentshow=true
          this.marketDetailshow=false
          $(".marketDtop").show() 
        },  
        appcateli(){//查询左边菜单分类
            let data={search_belonging:"市场分类"}
            this.$api.getMarketAppcateliApi(data,{
                onSucess: response => {
                    if (response.data && response.data.errmsg == "ok") {
                        // console.log(response.data)
                        if(response.data.data.data.length){
                            console.log(response.data.data.data)
                            let Arry=[]
                            response.data.data.data.forEach(item=>{
                               var obj={}
                               obj.name=item.items['__KdnUQ7mYzxL7nO69evf'].value
                               obj.sort=item.items['__LcS0tI6AxpaiLf8tEdg'].value
                              Arry.push(obj)
                            })       
                            Arry.sort((a,b)=>{return Number(a.sort)-Number(b.sort)})                 
                            // this.appcateArr=[...new Set(Arry)] //纯数组去重  

                            let obj = {}; 
                            let appcateArrResult = Arry.reduce((cur,next) => {//数组对象去重
                                obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
                                return cur;
                            },[]) //设置cur默认类型为数组，并且初始值为空的数组
                            this.appcateArr=appcateArrResult
                            console.log(this.appcateArr)                
                        }  
                    }
                }
            });
        },
        appcatelistAll(){//按应用名称过滤-全部应用   
            let options={
                 target:document.querySelector(".applicationMarketContainer"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载

            let data={search_appname:this.search_appName}
            this.$api.getMarketappcatelistApi(data,{
                onSucess: response => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();//关闭加载
                    });
                    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['__5Osryqw8qDLbKTgCFDn'].value || ""   //分类名称   
                                obj.Appsort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value                        
                                obj.children=[]                                
                                obj2.img=item.items['__QbUYRmSnSgK7zGZkbdB'].value? JSON.parse(item.items['__QbUYRmSnSgK7zGZkbdB'].value)[0].path : ""  //应用图标
                                obj2.name=item.items['__udgMoCSV1EVCOvyoBEa'].value  //应用名称
                                obj2.Intro=item.items['__wdEUNLyWL5toCLWeC4t'].value //应用一句话   
                                obj2.appid=item.items['__1N5IuuhUIrZ4L533RnA'].value //应用id     
                                obj2.sort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value //应用排序 
                                
                                obj.children.push(obj2)
                                arr.push(obj)                      
                                  
                            })  
                            console.log(arr)

                            const titleMap = {}
                            const transferObj = arr.reduce((prev, next) => {  
                            if(titleMap[next.title]) {
                                prev[next.title].children.push(...next.children)
                                prev[next.title].Appsort=next.Appsort
                            } else {
                                titleMap[next.title] = true
                                prev[next.title] = {children: next.children}
                                prev[next.title].Appsort=next.Appsort
                            }
                            return prev
                            }, {})

                          console.log(transferObj)

                            let arr2=[]
                            for(let i in transferObj){
                                let obj={}
                                obj.title=i
                                obj.Appsort=transferObj[i].Appsort
                                obj.children=transferObj[i].children
                                arr2.push(obj)
                            }
                           arr2.sort((a,b)=>{return Number(a.Appsort)-Number(b.Appsort)}) //工作台右边图文应用--分类排序
                           arr2.forEach(item=>{
                               if(item.children){
                                   item.children.sort((a,b)=>{return Number(a.sort)-Number(b.sort)}) //应用排序
                               }
                           })
                           this.appcateArrList=arr2

                           console.log(this.appcateArrList)
                                             
                        }else{
                            this.appcateArrList=[]//查无数据
                        }  
                    }
                }
            });
        },
        appcatelistSearch(){//点搜索--按应用名称过滤  
            if(this.search_appName==""){
                this.$message({type:'error',message:"请输入搜索内容"})
                return
            } 
            this.activeIndex=-2

            let options={
                 target:document.querySelector(".applicationMarketContainer"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载

            let data={search_appname:this.search_appName}
            this.$api.getMarketappcatelistApi(data,{
                onSucess: response => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();//关闭加载
                    });
                    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['__5Osryqw8qDLbKTgCFDn'].value || ""   //分类名称   
                                obj.Appsort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value                        
                                obj.children=[]                                
                                obj2.img=item.items['__QbUYRmSnSgK7zGZkbdB'].value? JSON.parse(item.items['__QbUYRmSnSgK7zGZkbdB'].value)[0].path : ""  //应用图标
                                obj2.name=item.items['__udgMoCSV1EVCOvyoBEa'].value  //应用名称
                                obj2.Intro=item.items['__wdEUNLyWL5toCLWeC4t'].value //应用一句话   
                                obj2.appid=item.items['__1N5IuuhUIrZ4L533RnA'].value //应用id     
                                obj2.sort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value //应用排序 
                                
                                obj.children.push(obj2)
                                arr.push(obj)                      
                                  
                            })  
                            console.log(arr)

                            const titleMap = {}
                            const transferObj = arr.reduce((prev, next) => {  
                            if(titleMap[next.title]) {
                                prev[next.title].children.push(...next.children)
                                prev[next.title].Appsort=next.Appsort
                            } else {
                                titleMap[next.title] = true
                                prev[next.title] = {children: next.children}
                                prev[next.title].Appsort=next.Appsort
                            }
                            return prev
                            }, {})

                          console.log(transferObj)

                            let arr2=[]
                            for(let i in transferObj){
                                let obj={}
                                obj.title=i
                                obj.Appsort=transferObj[i].Appsort
                                obj.children=transferObj[i].children
                                arr2.push(obj)
                            }
                           arr2.sort((a,b)=>{return Number(a.Appsort)-Number(b.Appsort)}) //工作台右边图文应用分类排序
                           arr2.forEach(item=>{
                               if(item.children){
                                   item.children.sort((a,b)=>{return Number(a.sort)-Number(b.sort)})
                               }
                           })
                           this.appcateArrListSearch=arr2

                           console.log(this.appcateArrListSearch)
                                             
                        }else{
                            this.appcateArrListSearch=[]//查无数据
                        }  
                    }
                }
            });
        },
        appcatelist(item,index){//点左边分类--查询右边图文应用   
            if(index==undefined){this.activeIndex=-1} 
            else{this.activeIndex=index}//选中左边菜单     
            if(this.activeIndex==-1) return
            this.appcateArrList=[]//先置空

            let options={
                 target:document.querySelector(".applicationMarketContainer"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载

            let data={search_apptypename1:item&&item.name||""}
            this.$api.getMarketappcatelistApi(data,{
                onSucess: response => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();//关闭加载
                    });
                    if (response.data && response.data.errmsg == "ok") {
                        console.log(response.data.data.data.length)
                        if(response.data.data.data.length){
                            let arr=[]
                            response.data.data.data.forEach((item,index)=>{
                                let obj={}
                                let obj2={}
                                obj.title=item.items['__5Osryqw8qDLbKTgCFDn'].value || ""   //分类名称 
                                obj.Appsort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value                            
                                obj.children=[]                                
                                obj2.img=item.items['__QbUYRmSnSgK7zGZkbdB'].value? JSON.parse(item.items['__QbUYRmSnSgK7zGZkbdB'].value)[0].path : ""  //应用图标
                                obj2.name=item.items['__udgMoCSV1EVCOvyoBEa'].value  //应用名称
                                obj2.Intro=item.items['__wdEUNLyWL5toCLWeC4t'].value //应用一句话   
                                obj2.appid=item.items['__1N5IuuhUIrZ4L533RnA'].value //应用id     
                                obj2.sort=item.items['__EVEHZP2Cphpf3Pr2bZZ'].value //应用排序 
                                
                                obj.children.push(obj2)
                                arr.push(obj)                      
                                  
                            })  
                            // console.log(arr)

                            const titleMap = {}
                            const transferObj = arr.reduce((prev, next) => {  
                            if(titleMap[next.title]) {
                                prev[next.title].children.push(...next.children)
                                prev[next.title].Appsort=next.Appsort
                            } else {
                                titleMap[next.title] = true
                                prev[next.title] = {children: next.children}
                                prev[next.title].Appsort=next.Appsort
                            }
                            return prev
                            }, {})


                            let arr2=[]
                            for(let i in transferObj){
                                let obj={}
                                obj.title=i
                                obj.Appsort=transferObj[i].Appsort
                                obj.children=transferObj[i].children
                                arr2.push(obj)
                            }
                           arr2.sort((a,b)=>{return Number(a.Appsort)-Number(b.Appsort)}) //工作台右边图文应用分类排序
                           arr2.forEach(item=>{
                               if(item.children){
                                   item.children.sort((a,b)=>{return Number(a.sort)-Number(b.sort)})
                               }
                           })
                           this.appcateArrList=arr2
                           console.log(this.appcateArrList)
                                             
                        }else{
                            this.appcateArrList=[]
                        }  
                    }
                }
            });
        },
        applidetail(obj){//应用详情
            //  alert(obj.appid)
             let options={
                 target:document.querySelector(".applicationMarketContainer"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
             }
             const loading = Loading.service(options);//开始加载
             let data={search_appid:obj.appid}
             this.$api.getMarketApplidetailApi(data,{
                onSucess: response => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();//关闭加载
                    });
                    if (response.data && response.data.errmsg == "ok") {
                        if(response.data.data.data.length){
                           this.marketContentshow=false
                           this.marketDetailshow=true
                           this.applidetailObj=response.data.data.data[0].items    
                           if(this.applidetailObj){
                              this.imgpath=JSON.parse(this.applidetailObj.__9AdBNGeHUy7w8rwfvld.value)[0].path 
                              console.log(this.imgpath) 
                           } 
                        }  
                    }
                }
            });
        },
        detailTabs(index){
            this.index=index
        },
        onlineIM(){//在线咨询IM--获取祖父
          this.$parent.$parent.$parent.Im()
        },
        appSevice(){
           this.activeIndex=-3 
        }
    },
}
</script>
<style lang="scss">
em,i,b{font-style: normal;}
.applicationMarketContainer{
    height: 100%;
    .title{
        display: flex;
        flex-direction: row;
        padding: 24px;
        h2{flex:1;font-size: 18px;}
    }
    .marketContent{
        display: flex;
        height: 100%;
        .marketLeft{
           padding: 24px;
           width: 200px;
           display: flex;
           flex-direction: column;
           box-sizing: content-box;
           h3{font-size: 18px;color: #000;margin-bottom:8px;}
           .searchinput{display: flex;
             .el-input{margin-right:10px;}
           } 
           .searchul{
               display: flex;
               flex-direction: column;
               margin-top:8px;
               height: 100%;
               ul{
                   display: flex;
                    flex-direction: column;
                    max-height: calc(100% - 100px);
                    overflow: auto;
                    li{
                        height: 44px;
                        line-height: 44px;
                        background: #fff;
                        text-align: center;
                        color: #808191;
                        font-size: 14px;
                        &:hover{
                            background: #0F71FF;
                            color: #fff;
                            border-radius: 5px;
                        }
                        &.active{
                            background: #0F71FF;
                            color: #fff;
                            border-radius: 5px;
                        }
                    }
               }
           }
        }
        .marketright{
            // flex:1;
            width: 1200px;
            margin: 0 auto;
            max-height: calc(100% - 60px);
            overflow: auto;
            .marketAppList{
                display: flex;
                flex-direction: column;
                h4{font-size: 18px;color: #000;margin-bottom:16px;}
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 30%;
                        padding: 16px;
                        background: #F7F8FD;
                        display: flex;
                        margin-bottom:24px;
                        margin-right:3%;
                        border-radius: 12px;
                        cursor: pointer;
                        img{width: 60px; height: 60px;margin-right:15px;}
                        span{display: flex; flex-direction: column;
                          strong{color: #000;font-size: 12px;margin-top:2px;margin-bottom:10px;}
                          em{color: #b0af9c;font-size: 12px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
                        }
                    }
                }
              .nodata{text-align: center;padding-top:50px;}  
            }
        }
        
    }

    .marketDetail{
        display: flex;
        flex-direction: column;   
        height: 100%; 
        .marketDtop{
           display: flex;
           padding: 24px;
           .DtopL{
             .appiconimg{width: 66px; height: 66px;margin-right:16px;}
           }
           .DtopC{
             flex:1;
             display: flex;
             flex-direction: column;
             h3{
                 color: #000;font-size:16px;
             }
             h4{
                 color: #000; font-size: 12px;margin:10px 0;
             }
             h5{
                 color: #000; font-size: 12px;
             }
           }
           .DtopR{
             width: 180px;
             padding-left: 40px;
             border-left:1px solid #E9E9E9;
             .el-button{
                 margin-bottom:16px;
                 min-width: 117px;
             }
           }
        }
        .marketDbottom{
           display: flex;
           flex-direction: column;
           height: 100%;
           .marketDTabTitle{
               display: flex;
               border-bottom: 1px solid #E9E9E9;
               .tabspan{width: 60%;margin: 0 auto; display: flex;}
               span{
                  flex:1;font-size:14px;text-align:center;padding-bottom:11px;
                 &.acitve{color:#0F71FF;border-bottom: 1px solid #0F71FF;}
               }
           }
           .marketInfoDetail{
               display: flex;
               flex-direction: column;
               padding: 10px 24px;
               max-height: calc(100% - 220px);
               overflow: auto;
               img{
                  
               }
           }
        }
    }
    
}
</style>