<template>
<div> 
    <div class="jfBaseSize"  v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
        <div class="swipe-box">
                <mt-swipe :auto="4000">
                    <mt-swipe-item v-for="(item,index) in comp.props.items.val" :key="index">
                        <img class="imgheight" v-bind:src="item.imgUrl">
                    </mt-swipe-item>
                </mt-swipe>
        </div>
        <div class="groupCategory" v-for="item1 in DataList" :key="item1.ID">
            <div class="title_bar"><span class="lefttitle">{{item1.GiftGroup_Name}}</span><span class="more" @click="goClassPage('13',item1.ID)"></span></div>
            <ul class="goods-list">
                <li v-for="item2 in item1.Gifts" :key="item2.ID">
                    <div class="productList" @click="goPageDetail(item2.ID,item2.Gift_Type)">
                        <div class="productImg">
                            <img :src="item2.Gift_ProductImg" />
                        </div>
                        <div class="productContent">
                            <p class="productName" v-html="item2.Gift_Name"></p>
                            <p class="clearfix">
                                <span>
                                    <span class="dangerIntegral" v-html="Math.ceil(item2.Gift_Score)"></span>
                                    <span>积分</span>
                                </span>
                                <span @click="goPageDetail(item2.ID,item2.Gift_Type)">兑换</span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <div style="clear:both;"></div>
        </div>
        <footer class="f-box fixed-Width">
            <a class="index current" href="javascript:void(0);" @click="goPage('9')"><span>首页</span></a>
            <a class="classify" href="javascript:;" @click="goPage('13')"><span>分类</span></a>
            <a class="mine" @click="goPage('20')"><span>我的</span></a>
        </footer>
    </div>
</div> 
</template>

<script>
import { Indicator } from 'mint-ui';
import JfapiHelper from "../assets/js/JfapiHelper.js";
import { Toast } from "mint-ui";
export default {
 name: 'JfCompClassGift',
 props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      DataList:[],
       imgs: [],
      vh:false,
      //height:"100%"
    }
  },
  watch:{
        "comp.props.items.val":function(n){
            // setTimeout(()=>{
            //      $(".swipe-box").css("height","100%");
            // },300);
        }
  },
  methods: {
      goClassPage(type,ID){
         sessionStorage.setItem("JfCompClassID",ID);
         this.$parent.changeSelectedPage(type);
      },
      goPage(pageType){
           sessionStorage.removeItem("JfCompClassID");
          this.$parent.changeSelectedPage(pageType);
      },
      goPageDetail(ID,GiftType)
      {
          sessionStorage.setItem("JfCompClassGiftID",ID);
          if(GiftType!=3)
          {
               this.$parent.changeSelectedPage("17");
          }
          else
          {
               this.$parent.changeSelectedPage("14");
          }
      },
      AutoLogin(){
        var that=this;var OpenId="";var location="";var nickname="";var headimgurl="";
        var wxUserInfo=this.sup8.context.wxUser;
        if(wxUserInfo)
        {
            nickname=wxUserInfo.nickname;
            headimgurl=wxUserInfo.headimgurl;
            OpenId=wxUserInfo.openid;
        }
        if(OpenId=="")
        {
            return false;
        }
        var GeoArea=that.sup8.context.geo;
       if(GeoArea)
       {
          GeoArea=GeoArea.addressComponent;
          location=GeoArea.country+GeoArea.province+GeoArea.city+GeoArea.district+GeoArea.street+GeoArea.street_number;
       }
        var url = "/integral/UserLoginByWeChatOpenId";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            OpenId:OpenId,
            LanguageType:JfapiHelper.GetLanguageType(),
            IP:"",
            GPS:location,
            NickName:nickname,
            HeadImage:headimgurl
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
            if(res.flag)
            {
                localStorage.setItem("loginauto","1");
                localStorage.setItem('loginInfo', JSON.stringify(res.data));	
            } Indicator.close();
        };
        //请求后端
        JfapiHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null)
      },
    CompGetHomePageGroupAndGiftList() {
        var that=this; 
        //that.sup8.context.enterpriseno
         var url = "/integral/CompGetHomePageGroupAndGiftList";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:JfapiHelper.GetUserToken(),
            LanguageType:JfapiHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
            if(res.flag)
             {
                 that.DataList=res.data;
                //  window.setTimeout(function(){
                //     $("div.groupCategory:last").css("padding-bottom","3rem");
                //  },100);
             } Indicator.close();
        };
        //请求后端
        JfapiHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null)
     }
  },
  created(){ 
     var that=this;
     that.mergeCompProps(that.comp);
     that.comp.props.items.val = that.comp.props.items.val || [];
      if(localStorage.getItem("loginauto")==null)
      {
        that.AutoLogin();
      }
      Indicator.close();
      if(JfapiHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno)){
           Indicator.open();
           that.CompGetHomePageGroupAndGiftList();
      }
  },
  mounted: function () {
   /**样式兼容设计器 **/
    if(location.pathname.indexOf("/design")!=-1)
    {
        setTimeout(()=>{
                $(".swipe-box").css("height","100%");
        },300);
        $(".footercom").css({"position":"absolute","height":"169%","width":"100%"});
        $(".f-box").css({"position":"absolute","width":"100%"});
    }else  
    {
         $(".footercom").css({"margin-top":"6rem"});
    }
     var that=this;
      var isDesign = location.pathname.indexOf('/design');
      if (!(isDesign>-1)) {
          that.$set(that,'vh',true);
      }else{
          that.$set(that,'vh',false);
      }
      setTimeout(()=>{
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
        console.log(this.height);
      },1000);
  }
}
</script>

<style scoped>
 .mint-swipe {
  height:12.5rem;
}

.mint-swipe-item img {
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  /* background-size: 100%100%; */
}
img{border:0;}
img[src=""],img:not([src]){opacity:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.groupCategory{padding:0;border-top: 0.38rem solid #e6e6e9; }
.groupCategory:nth-last-of-type(1){padding-bottom: 3rem;}
.title_bar{background: #fff; border-left: solid 0.25rem #C03646;padding: 0.6rem 0;box-shadow: 0px 4px 10px 2px #f7f7f7;}
.title_bar span.lefttitle{margin: 0.5rem 0 0.5rem 0rem;padding-left: 0.6rem;font-size: 1rem;}
.title_bar span.more{float:right;font-size: 0.8rem;padding-right: 1rem;background-image: url('http://image.supercarrier8.com/h5_shop/icon_omit.png');background-size: 100%;height: 1rem;background-repeat: no-repeat;margin-right: 1rem;margin-top: 0.5rem;}
.goods-list{margin:0; list-style: none;padding: 0rem 0.8rem;}
.goods-list li{border:none;}
a{text-decoration: none;}
.productList{display: flex;min-height: 4.2rem;border-bottom: 0.01rem solid #f5f5f5;padding: 0.4rem 0;}
.productImg{width:5rem;margin-right: 0.2rem; }
.productImg img{width:100%;height: 5rem;margin-top:6%;}
.productContent{flex:1;}
.productContent .productName{font-size: 1rem;margin-bottom:0.8rem;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;height: 2.76rem;}
.productContent .clearfix {color:#b3b3b3;vertical-align:bottom;margin-top: 0.8rem;}
.productContent .clearfix .dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
.productContent .clearfix >span:nth-of-type(1){float:left;padding-top:0.4rem;}
.productContent .clearfix >span:nth-of-type(2){float: right;margin-right: 0.4rem;padding:0.2rem 1rem;background-color: #c03546;color:#fff;border-radius: 0.8rem; }
.f-box {display:flex;z-index: 801;left: 0;color:#bcbcbc;right: 0;bottom:0rem;background-color: #fff;border-top: 1px solid #d9d9d9; position:fixed;}
.f-box a.current {color:#000;}
.f-box a {flex:1;font-size:1rem;display: inline-block;width: 31%;color: #bcbcbc;;position: relative;height: 3rem;line-height:3rem;text-align: center;}
.f-box a span{background-repeat:no-repeat;padding-left: 1.4rem;height: 100%;display: inline-block;background-size:1.2rem 1.2rem;background-position-y:50%;}
.f-box a.index span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_homepage_black.png);}
.f-box a.classify span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_classify_gray.png);}
.f-box a.mine span{background-image: url(http://image.supercarrier8.com/h5_shop/icon_my_gray.png);}
</style>
