<template>
  <view class="catstyle4" style="height: 100%;">
    <div class="left-slider">
      <sidebar
        :active="tid"
        name="Name"
        :active-color="mainColor"
        :border="false"
        :list="d"
        @change="changeHandler"
      ></sidebar>
    </div>
    <div class="right-slider">
      <scroll-view
        :scroll-y="true"
        @scrolltolower="lower"
        :enable-back-to-top="true"
        :enable-flex="true"
        :style="{ height: '100%' }"
      >
        <div
          class="adbox"
          v-if="d[tid].advert_pic"
          @click="clickHandler(d[tid].advert_url)"
        >
          <image
            mode="aspectFit"
            :src="d[tid].advert_url"
            style="width: 100%; height: 100%;"
          />
        </div>
        <div
          class="good"
          v-for="(cx, ci) in g"
          :key="ci"
          @click="clickHandler(cx)"
        >
          <div class="good-img">
            <image
              mode="aspectFit"
              :src="cx.cover_pic"
              style="width: 100%; height: 100%;"
            />
          </div>
          <div class="good-info">
            <div class="good-name">{{ cx.name }}</div>
            <div class="goodprice">
              <div class="left">
                <div v-if="cx.is_level==1">
                  <!-- todo VIP价格显示-->
				  <u-tag size="mini" shape="circle" text="会员价" type="warning" />
                  <!-- <u-tag color="#f39800" type="warning">会员价</u-tag> -->
                  <span class="vip">￥{{cx.level_price}}</span>
                </div>
                <div class="price" :style="{ color: mainColor }">
                  {{ cx.price_content }}
                </div>
                <div class="sell">{{ cx.sales }}</div>
              </div>
              <div @click.stop="showSkuHandler(cx)" class="right">
                <!-- todo 点击加入购物车-->
                <u-icon name="cart-circle-o" size="44" :color="mainColor" />
              </div>
            </div>
          </div>
        </div>
        <u-divider v-if="isover"  :margin-top="20" :margin-bottom="20">没有更多商品了</u-divider>
      </scroll-view>
    </div>
	<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
  </view>
</template>

<script>
import goodSku from '../goods/goodsku';
import sidebar from "../sidebar/index";
export default {
  props: ["d", "h"],
  
  data() {
    return {
      mainColor: "",
      activeStyle: "",
      page: 1,
      page_count: 1,
      mh: 0,
      g: [],
      isover: false,
      loading: false,
      tid: 0,
      active: 0,
	  msg:{
		  pageIndex: 1,
		  pageSize:14,
		  Name:'',
		  GoodsType:0,
		  CategoryIds:'',
		  OrderBy:1,
		  UserId:0,
	  },
	  sku: {},
	  showSku: false
    };
  },
  components: {
    sidebar,goodSku
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = `background:${this.mainColor};`;
  },
  mounted() {
    this.init();
  },
  methods: {
	  // 购物车
	  showSkuHandler(g) {
	  	this.sku = g;
	  	this.showSku = true;
	  },
    changeHandler(i) {
	  this.msg.CategoryIds= this.d[i].Id+'';
	  this.msg.page = 1;
      this.tid = i;
      this.g = [];
      this.init();
    },
    clickHandler(item) {
      uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id });
    },
    init() {
      this.isover = false;
      this.loading = true;
	  this.request2(
	  	{
	  		url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
	  		data: this.msg
	  	},
	  	res => {
	  			this.loading = false;
	  		console.log("resggg",res);
	  		if(res.resultCode==1){
	  			this.g = this.g.concat(res.data.pageData);
	  			this.page_count = res.data.pageCount;
	  			if (this.page_count == 1 || this.page_count==0) {
	  			  this.isover = true;
	  			}
	  			
	  		}
	  		
	  		uni.hideNavigationBarLoading();
	  	}
	  );
      // this.request(
      //   {
      //     url: "",
      //     data: {
      //       r: "api/default/goods-list",
      //       page: this.page,
      //       cat_id: this.d[this.tid].id,
      //     },
      //   },
      //   (res) => {
      //     this.g = this.g.concat(res.data.list);
      //     this.page_count = res.data.pagination.page_count;
      //     if (this.page_count == 1) {
      //       this.isover = true;
      //     }
      //     this.loading = false;
      //   }
      // );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        if (!this.loading) {
          this.msg.pageIndex++;
          this.init();
        }
      } else {
        this.isover = true;
      }
    },
  },
};
</script>

<style>
.catstyle4 {
  display: flex;
}
.catstyle4 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle4 .right-slider {
  padding: 10px;
  height: 100%;
  width: 1px;
  flex: 1;
}
.catstyle4 .van-tabs__line {
  display: none;
}
.catstyle4 .van-tab {
  height: 24px;
  line-height: 24px;
  margin-top: 10px;
}
.catstyle4 .van-tab--active {
  border-radius: 24px;
  color: #fff !important;
  font-weight: 400 !important;
}
.catstyle4 .van-tabs__wrap {
  padding: 0 10px;
}
.catstyle4 .good {
  border-bottom: 1rpx solid #f1f1f1;
  display: flex;
  padding: 10px 0;
}
.catstyle4 .good .good-img {
  width: 77px;
  height: 77px;
}
.catstyle4 .good .good-info .good-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 3px;
  font-size: 14px;
  height: 36px;
  margin-bottom: 5px;
}
.catstyle4 .good .good-info {
  margin-left: 5px;
  width: 1px;
  flex: 1;
  min-height: 70px;
}
.catstyle4 .good .good-info .goodprice {
  display: flex;
  align-items: flex-end;
}
.catstyle4 .good .good-info .left {
  flex: 1;
  width: 1px;
}
.catstyle4 .good .good-info .right {
  width: 30px;
  height: 30px;
  display: flex;
  justify-items: right;
  align-items: flex-end;
}
.catstyle4 .good .good-info .left .vip {
  font-size: 14px;
  font-weight: 600;
  color: #f39800;
}
.catstyle4 .good .good-info .goodprice .left .price {
  font-size: 16px;
}
.catstyle4 .good .good-info .goodprice .left .sell {
  font-size: 12px;
  color: gray;
}
.catstyle4 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
}
</style>
