<template>
    <div class="recommendContainer">
        <!-- banner广告 -->
        <section class="bannerSection">
            <el-carousel :interval="5000" arrow="always" height="200">
                <el-carousel-item v-for="(item,index) in bannerArr" :key="index">
                <img :src="item.pic" @click="applidetail(item)"/>
                </el-carousel-item>
            </el-carousel>
        </section>
        <!-- 精品推荐图文 -->
        <section class="recomSection">
             <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>
        </section>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
export default {
    data(){
        return{
           bannerArr:[], //广告
           appcateArrList:[],//精品推荐图文列表
           contextUrl:obpmConfig.obpmFilePath,
        }
    },
    mounted() {
        this.AppMarketBannerlist()//广告列表
        this.AppMarketRecommlist()//精品推荐图文列表
    },
    methods: {
        AppMarketBannerlist(){//广告列表
            let options={
                 target:document.querySelector(".bannerSection"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载
            this.$api.AppMarketBannerlistApi({},{                
                onSucess: response => {
                   this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                       loading.close();//关闭加载
                   });
                   console.log(response.data.data.data)
                   if(response.data.data.data){
                       let Arry=[]
                       response.data.data.data.forEach(item=>{
                           var obj={}
                               obj.name=item.items['__f1dc2wtiu1VnfSPzQse'].value //标题
                               obj.pic=item.items['__cMLE2QENXQjNp1sWHE6'].value&&JSON.parse(item.items['__cMLE2QENXQjNp1sWHE6'].value)[0].path //图片
                               obj.appid=item.items['__qPv375wKiySlNqrRlEi'].value //应用id-跳转到详情页面
                               obj.imgsort=item.items['__XkErrW7l1lWDQVE29vq'].value //图片排序
                           Arry.push(obj)    
                       })
                       this.bannerArr=Arry
                   }
                }
            })
        },
        AppMarketRecommlist(){//精品推荐图文列表
            let options={
                 target:document.querySelector(".recomSection"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载
            let data={}
            this.$api.AppMarketRecommlistApi(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['__1enI2FnolAhHMxKfbLI'].value || ""   //分类名称 
                                obj.Appsort=item.items['__ZOWrDqgJF3aVGEfUTuD'].value   //分类排序                         
                                obj.children=[]                                
                                obj2.img=item.items['__xlFu1NogTdHON4ZdooY'].value? JSON.parse(item.items['__xlFu1NogTdHON4ZdooY'].value)[0].path : ""  //应用图标
                                obj2.name=item.items['__cqjwScMrCGGNaxsDYEo'].value  //应用名称
                                obj2.Intro=item.items['__P226UHWi6pFqEoGyWuX'].value //应用一句话   
                                obj2.appid=item.items['__bwEobxwuDxx9ztUCIB6'].value //应用id     
                                obj2.sort=item.items['__H7jpsXz90t8R3xF8dDQ'].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){//进入详情
          this.$parent.applidetail(obj)
        }
    },
}
</script>
<style lang="scss">
  .recommendContainer{
      .bannerSection{
          margin-bottom: 30px;
          img{height: 200px;cursor: pointer;}
          .el-carousel__container{height: 200px;}
      }
      .recomSection{
          .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;}  
            }
      }

  }  
</style>