<template>
<div class="jfBaseSize clearfix categroyPage" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
    <ul class="categroy-left">
        <li class="categroy-item selected" v-on:click="selectCate('',$event)" id="cate">
            全部
        </li>
        <li class="categroy-item" v-for="item in CateList" :id="'cate'+item.ID" :key="item.ID"  v-on:click="selectCate(item.ID,$event)" v-html="item.GiftGroup_Name"></li>
    </ul>
    <div class="categroy-right background-white">
        <div class="product-Item" v-for="item in DataList" :key="item.ID">
            <div class="productImg">
                <img :src="item.Gift_ProductImg" />
            </div>
            <div class="productContent" @click="goPageDetail(item.ID,item.Gift_Type)">
                <p class="productName" v-html="item.Gift_Name"></p>
                <p class="clearfix">
                    <span>
                        <span style="font-size:1rem;" class="dangerIntegral" v-html="Math.ceil(item.Gift_Score)"></span>
                        <span style="font-size:0.8rem;">积分</span>
                    </span>
                    <span @click="goPageDetail(item.ID,item.Gift_Type)">兑换</span>
                </p>
            </div>
        </div>
    </div>
    <!-- <div id="categroy-cnt" class="categroy-cnt">
      <ul class="categroy-list">
		<li class="category-item selected" v-on:click="selectCate('',$event)" id="cate">
			<a href="javascript:void(0);" class="category-item-a">
				全部
			</a>
		</li>
        <li class="category-item" v-for="item in CateList" :id="'cate'+item.ID" :key="item.ID" v-on:click="selectCate(item.ID,$event)">
				<a href="javascript:void(0);"  class="category-item-a">
					{{item.GiftGroup_Name}}
				</a> 
		</li>
      </ul>
    </div>
    <div class="categroy-rgt" id="categroy-rgt">
        <dl class="goods-list" id="LoadGoods">
            <dd class="goods_dd"  v-for="item in DataList" :key="item.ID">
                <a href="javascript:;" @click="goPageDetail(item.Gift_Type)">
                    <div class="goods-pic"><img v-bind:src="item.Gift_ProductImg"></div>
                    <dl class="goods-info">
                        <dt class="goods-name">{{item.Gift_Name}}</dt>
                        <dd class="goods-pay">
                            <em>{{Math.ceil(item.Gift_Score)}}</em>积分
                        </dd>
                        <dd class="floatright"> <span @click="goPageDetail(item.ID,item.Gift_Type)">兑换</span></dd>
                    </dl>
                </a>
            </dd>
	    </dl>
    </div>
    <div style="clear:both;"></div> -->
    <div class="footercom">
    <footer class="f-box fixed-Width">
        <a class="index" href="javascript:void(0);" @click="goPage('9')"><span>首页</span></a>
        <a class="classify current" @click="goPage('13')"><span>分类</span></a>
        <a class="mine" @click="goPage('20')"><span>我的</span></a>
    </footer>
    </div>
</div>
</template>
<style scoped>
img{border:0;}
img[src=""],img:not([src]){opacity:0;}
.background-white{background-color: #fff;}
ul{margin: 0;padding:0;display: block;}
ul li{list-style-type: none;}
.categroyPage{display:flex;height:100vh;background-color:#e6e6e9;}
.categroy-left{width:24%;height:100%;}
.categroy-left .categroy-item{padding:0.8rem 0.4rem;background-color: #f2f2f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.categroy-left .categroy-item:not(:last-child){border-bottom: 1px solid #e6e6e9;}
.categroy-left .categroy-item.selected{background-color:#fff;border-left:0.2rem solid #c03546;padding-left:0.2rem;}
.categroy-right{height:100%;background-color:blud;flex:1;padding: 0 0.4rem;overflow: auto; }
.categroy-right .product-Item{display: flex;min-height: 4.2rem;padding: 0.4rem 0;padding-bottom:0.6rem; }
.categroy-right .product-Item:nth-last-of-type(1){margin-bottom:3rem;}
.productImg{width: 5rem;margin-right: 0.2rem;}
.productImg img{width: 100%;height: 5rem;margin-top: 5%; }
.productContent{flex: 1;position: relative;}
.productContent .productName{font-size: 1rem;margin-bottom:1rem;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;height: 2.76rem;}
.productContent .clearfix{color: #b3b3b3;}
.productContent .clearfix >span:nth-of-type(1){float: left;}
.productContent .clearfix .dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
.productContent .clearfix >span:nth-last-of-type(1){float: right;margin-right: 0.4rem;padding: 0.1rem 0.8rem;background-color: #c03546;border-radius: 0.8rem;color:#fff;}

.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>
<script> 
import $ from 'jquery'
import { Indicator } from 'mint-ui';
import JfapiHelper from "../assets/js/JfapiHelper.js";
export default {
  name: 'JfCompClassGift',
  props: ["cfg", "comp"],
  data() { 
    return {
      CateList:[],
      DataList:[],
      vh:false,
      height:"100%"
    }
  },
  methods: {
      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");
          }
      },
      selectCate(cid,e){
          Indicator.open();
          var that=this;
           that.loadGiftList(cid);
           $(e.target).parent().addClass("selected").siblings().removeClass("selected");
      },
      LoadGroupList() {
        var that=this; 
        var url = "/integral/CompGetMallGiftGroupList";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            MemberID:"323232",
            UserToken:JfapiHelper.GetUserToken()
        };
        var cbSuccess = function(res){
            if(res.flag)
             {
                that.CateList=res.data;
             }
        };
        //请求后端
        JfapiHelper.CommonCallService(url,dataParams,cbSuccess,null,null,null)
    },loadGiftList(cid){
        var that=this;
        var url = "/integral/CompGetMallGiftListByGroup";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            GroupId:cid,
            UserToken:JfapiHelper.GetUserToken()
        };
        var cbError = function(res){
            Indicator.close();
        }
        var cbSuccess = function(res){
            if(res.flag)
             {
                that.DataList=res.data.Rows;
             }
             $("#cate"+cid).addClass("selected").siblings().removeClass("selected");
             Indicator.close();
        };
       //加载分组商品  
        JfapiHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    }
  },
  created(){
      var that=this;
      if(JfapiHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno))
      { Indicator.open();
        that.LoadGroupList(); 
        var GroupID="";
        if(sessionStorage.getItem("JfCompClassID")!=null)
        {
            GroupID=sessionStorage.getItem("JfCompClassID");
        }
        that.loadGiftList(GroupID);
      }
  },
  mounted: function () {
      /**样式兼容设计器 **/
    if(location.pathname.indexOf("/design")!=-1)
    {
        $(".footercom").css({"position":"absolute","height":"100%","width":"100%"});
        $(".f-box").css({"position":"absolute","width":"100%"});
    }

     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";
      },1000);
  }
}
</script>
