<template>
    <div class="seviceContainer" ref="seviceContainerRef">
      <div class="servicelist" v-if="serviceFlag">
        <!-- 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="serviceSection">
             <div class="serviceLi" v-for="(item,index) in appMarketServiceArry" :key="index" @click="appservicelidetail(item)">
                 <span class="pic"><img :src="item.img&&item.img.indexOf('http')>-1?item.img:contextUrl+item.img" v-if="item.img"></span>
                 <span class="contenxtList">
                   <span class="name">{{item.name}}</span>
                   <span class="introduce">{{item.introduce}}</span>
                   <span class="viewbtn">查看详情</span>
                 </span>
             </div>  
             <div class="serviceLiNodata" v-if="appMarketServiceArry.length==0">
                  <div class="nodata"><i class="el-icon-warning-outline"></i>暂无服务套餐，敬请期待</div>
            </div>                   
        </section>
      </div>
      <div class="serviceDetail" v-if="!serviceFlag">
          <div class="detailBack"><el-button type="primary" size="small" @click="back">返回</el-button></div>
          <div class="detailTop">
              <img :src="appMarketServiceDetailObj.img&&appMarketServiceDetailObj.img.indexOf('http')>-1?appMarketServiceDetailObj.img:contextUrl+appMarketServiceDetailObj.img" v-if="appMarketServiceDetailObj.img">
              <span class="context">
                  <strong>{{appMarketServiceDetailObj.name}}</strong>
                  <em>{{appMarketServiceDetailObj.introduce}}</em>
              </span>
          </div>
          <div class="detailCenter" v-html="appMarketServiceDetailObj.detail">      
          </div>
          <div class="detailBottom" :style="{'width':detailBottomWidth}">
              <span class="detailfooter">
                  <em>邀请您试用</em>
                  <b><el-checkbox v-model="checked"></el-checkbox>
                  <i @click="agreePop">
                      {{appMarketServiceDetailObj.agreementTitle}}                     
                </i>
                <el-button type="primary" :disabled="!checked" @click="apply">申请试用</el-button></b>
              </span>
          </div>
      </div>
      <pop :showdialog.sync="showdialog" :agreement="agreement" :agreementTitle="agreementTitle"></pop>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
import pop from './pop.vue'
export default {
    data(){
        return{
           bannerArr:[], //广告
           appMarketServiceArry:[],//服务套餐列表
           appMarketServiceDetailObj:{},//服务套餐详情
           contextUrl:obpmConfig.obpmFilePath,
           serviceFlag:true,
           checked:false,
           applyid:"",
           showdialog:false,
           agreementTitle:"",
           agreement:"",
           detailBottomWidth:""
        }
    },
    components:{
        pop
    },
    created(){
        window.addEventListener('resize', this.handleResize)//屏幕自适应宽度
    },
    beforeDestroy(){
        window.removeEventListener('resize', this.handleResize)
    },
    mounted() {        
        this.detailBottomWidth=this.$refs.seviceContainerRef.clientWidth-20 + 'px'
        this.AppMarketBannerlist()//广告列表
        this.appSevicelist()//查询服务套餐
    },
    methods: {
        handleResize (event) {
            this.detailBottomWidth=this.$refs.seviceContainerRef.clientWidth-20 + 'px'
        },
        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();//关闭加载
                   });
                   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
                   }
                }
            })
        },     
        appSevicelist(){
            let options={
                    target:document.querySelector(".seviceContainer"),                 
                    text: '加载中...',
                    spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载
           let data={}
           this.$api.appMarketSevicelistApi(data,{
               onSucess:response=>{
                   this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                       loading.close();//关闭加载
                   });
                   if (response.data && response.data.errmsg == "ok") {
                      if(response.data.data.data.length){
                          let Arry=[]
                            response.data.data.data.forEach(item=>{
                               var obj={}
                               obj.id=item.items['__oh8MCnzSkbilhYAuyZi'].value
                               obj.name=item.items['__JEcSEoWydTQohXmXWGw'].value
                               obj.img=item.items['__SrKhQsWFBGrAUJzAhk0'].value? JSON.parse(item.items['__SrKhQsWFBGrAUJzAhk0'].value)[0].path : "" 
                               obj.introduce=item.items['__pOAJwK35niJLHvr1lsi'].value
                               obj.sort=item.items['__qBfSqrTjrfbMGn3DxSj'].value
                              Arry.push(obj)
                            })       
                            Arry.sort((a,b)=>{return Number(a.sort)-Number(b.sort)})  
                            this.appMarketServiceArry=Arry
                            console.log(this.appMarketServiceArry)
                      }
                   }
               }
           })
        },   
        applidetail(obj){//进入详情
            this.$parent.applidetail(obj)
        },
        appservicelidetail(obj){//服务套餐详情页面
           let options={
                    target:document.querySelector(".seviceContainer"),                 
                    text: '加载中...',
                    spinner: 'el-icon-loading',
            }
           const loading = Loading.service(options);//开始加载
           this.serviceFlag=false
           let data={tid:obj.id}
           this.$api.appMarketSeviceDetailApi(data,{
               onSucess:response=>{
                   this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                       loading.close();//关闭加载
                   });
                   if (response.data && response.data.errmsg == "ok") {
                      if(response.data.data.data.length){
                          let Arry=[]
                            response.data.data.data.forEach(item=>{
                               var obj={}
                               obj.servicePackageId=item.items['__vVQYPCqLNsRRvDypcxd'].value
                               obj.name=item.items['__WH6b43kohlEY5EWyi1X'].value
                               obj.img=item.items['__jEtEHAelC19bmawOp92'].value? JSON.parse(item.items['__jEtEHAelC19bmawOp92'].value)[0].path : "" 
                               obj.introduce=item.items['__eP47KMF1hgnv7MbgXrq'].value
                               obj.detail=item.items['__iZ68diCJrxA7WYF7qBx'].value
                               obj.agreement=item.items['__sm8JzfXirKmAPNqy8KV'].value
                               obj.agreementTitle=item.items['__ykO8zRyWlMh8AfjpeDb'].value
                               
                              Arry.push(obj)
                            })       
                            this.appMarketServiceDetailObj=Arry[0]
                      }
                   }
               }
           })
        },
        apply(){
            this.$confirm("是否申请试用?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                    let data={
                         "items": {"servicePackageId":this.appMarketServiceDetailObj.servicePackageId}
                    }
                    this.$api.appMarketSeviceApplylistNewApi(data,{
                        onSucess:response=>{
                            if (response.data && response.data.code == 0) {
                                this.$message({type:"success",message:"申请成功"})
                                }
                            }
                    }) 
                    // this.$api.appMarketSeviceApplyEmptyApi(data,{
                    //    onSucess:response=>{
                    //        if (response.data && response.data.errmsg == "ok") {
                    //             this.applyid=response.data.data.id
                    //             if(this.applyid){
                    //                 this.applylist()//申请试用
                    //             }
                    //        }
                    //    }
                    //  })
                })
                .catch(() => {
                   
                });

        },
        applylist(){
            let data={
                "randomIdc":this.applyid,
                "applicationId": "__ekbsagrjF60f5gJnBQQ",
                "formId": "__LML4gFC8cfcTMFropHn",
                "items": {"servicePackageId":this.appMarketServiceDetailObj.servicePackageId}
            }
            this.$api.appMarketSeviceApplylistApi(data,{
                onSucess:response=>{
                     if (response.data && response.data.errcode == 0) {
                           this.$message({type:"success",message:"申请成功"})
                        }
                     }
            })   
        },
        agreePop(){
           this.showdialog=true
           this.agreement=this.appMarketServiceDetailObj.agreement
           this.agreementTitle=this.appMarketServiceDetailObj.agreementTitle
        },
        back(){
           this.serviceFlag=true 
        }
    },
}
</script>
<style lang="scss">
  .seviceContainer{
      .bannerSection{
          margin-bottom: 30px;
          img{height: 200px;cursor: pointer;}
          .el-carousel__container{height: 200px;}
      }
      .serviceSection{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .serviceLi{
              width: 49%;    
              height: 225px;       
              display: flex;
              flex-direction: column;
              margin-bottom:24px;
              margin-right:2%;
              border-radius: 12px;
              position: relative;
              cursor: pointer;
              &:nth-child(2n){
                  margin-right: 0;
              }
              .pic{
                  position: absolute;
                  width: 100%;
                  height: 225px;  
                  overflow: hidden;
                  top: 0;                                
                  img{
                      width: 100%;
                      height: 225px;
                      border-radius:12px;
                  }
              }
              .contenxtList{
                  position: absolute;
                  top: 0;
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  height: 225px;
                  background: rgba(0,0,0,0.4);
                  border-radius:12px;
                  .name{
                  font-size: 18px;
                  color: #fff;
                  padding: 30px 0 15px 0;
                  margin-left:10%;
                  margin-right: 10%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  }
                 .introduce{
                  height: 80px;
                  overflow: hidden;
                  font-size: 12px;
                  color: #fff;
                  margin-left:10%;
                  margin-right: 10%;
                  word-wrap:break-word;
                 }
                 .viewbtn{
                  width: 30%;
                  padding:10px 0;
                  border:1px solid #fff;
                  background: none;
                  border-radius:4px;
                  font-size: 14px;
                  color: #fff;
                  text-align: center;
                  cursor: pointer;
                  margin-left:10%;
                  margin-bottom: 35px;
                }
              }              
          }
          .serviceLiNodata{
              margin: 0 auto;
             .nodata{text-align: center;padding-top:50px;} 
          }
      }

      .serviceDetail{
         position: relative;
         display: flex;
         flex-direction: column;
         .detailBack{
             position: fixed;
             right:40px;
             margin-top: -50px;             
         }
        .detailTop{
            display: flex;
            img{
              width: 300px;
              height: 100%;
              border-radius: 4px;
            }
            .context{
                display: flex;
                flex-direction: column;
                margin-left:30px;
                strong{font-size: 18px;margin-top:25px;}
                em{font-size: 12px;margin-top:20px;}
            }
        }
        .detailCenter{
            flex: 1;
            // min-height: 450px;
            overflow: auto;
            margin: 10px 0;
            padding-bottom:60px;
        }  
        .detailBottom{               
           background: #fff;
           width: calc(100% - 500px);;
           border: 1px solid rgb(64, 156, 222);
           border-radius:4px;
           margin-bottom: 20px;
           position: fixed;
           bottom: 0px;
           .detailfooter{
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 10px 40px;  
               width: 100%;             
               em{
                   font-size: 14px;
               }
               b{
                 flex:1;
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
                 .el-checkbox{margin-right:5px!important;margin-top:6px;}
                 i{color: #808191; font-weight: normal; cursor: pointer;margin-right:25px;}
               }
           }
        }
      }

  }  
</style>