<template>
  <view class="catstyle8" style="height: 100%;">
    <view class="left-slider">
      <sidebar
        :active="tid"
        name="Name"
        :active-color="mainColor"
        :border="false"
        :list="d"
        @change="changeHandler"
      ></sidebar>
    </view>
    <view class="right-slider">
      <view
        class="adbox"
        v-if="d[tid].advert_pic && d[tid].advert_pic.length>0"
        @click="clickHandler(d[tid].advert_url)"
      >
        <image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
      </view>
      <view class="second-box">
        <view class="second">
          <view
            class="item"
            :style="{
              'border-color': stid == i ? mainColor : '#999',
              color: stid == i ? mainColor : '#999',
            }"
            v-for="(x, i) in d[tid].ChildList"
            :key="i"
            @click="clickSecondHandler(i)"
          >{{ x.Name }}</view>
        </view>
      </view>

      <view :style="{'height':scrollHeight}">
        <scroll-view
          :scroll-y="true"
          @scrolltolower="lower"
          :enable-back-to-top="true"
          :enable-flex="true"
          :style="{ height: '100%', padding: '0 0 0 10px' }"
        >
          <view class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
            <view class="good-img">
              <image mode="aspectFit" :src="cx.cover_pic" style="width: 100%; height: 100%;" />
            </view>
            <view class="good-info">
              <view class="good-name">{{ cx.name }}</view>
              <view class="goodprice">
                <view class="left">
                  <view v-if="cx.is_level==1">
                    <van-tag plain color="#f39800">会员价</van-tag>
                    <span class="vip">￥{{cx.level_price}}</span>
                  </view>
                  <view class="price" :style="{ color: mainColor }">{{ cx.price_content }}</view>
                  <view class="sell">{{ cx.sales }}</view>
                </view>
                <view @click.stop="showSkuHandler(cx)" class="right">
                  <u-icon name="cart-circle-o" size="44" :color="mainColor" />
                </view>
              </view>
            </view>
          </view>
          <u-divider
            contentPosition="center"
            v-if="isover"
            :margin-top="20"
            :margin-bottom="20"
          >没有更多商品了</u-divider>
        </scroll-view>
      </view>
    </view>
	<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
  </view>
</template>

<script>
import sidebar from "../sidebar/index";
import goodSku from '../goods/goodsku';
import auth from '@/components/auth/index.vue';
export default {
  props: ["d", "h"],
  data() {
    return {
      mainColor: "",
      page: 1,
      page_count: 1,
      mh: 0,
      g: [],
      isover: false,
      loading: false,
      tid: 0,
      stid: 0,
      active: 0,
      scrollHeight: "calc(100% - 33px)",
	  msg:{
		  pageIndex: 1,
		  pageSize:14,
		  Name:'',
		  GoodsType:0,
		  CategoryIds:'',
		  OrderBy:1,
		  UserId:0,
	  },
	  CategoryIdsList:[],
	  CategoryIds1:'',
	  CategoryIds2:'',
	  sku: {},
	  showSku: false,
	  showAuth: false,
	  u: {}
    };
  },
  components: {
    sidebar,goodSku,auth
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    if (this.d[this.tid].advert_pic && this.d[this.tid].advert_pic.length > 0) {
      this.scrollHeight += " - (100vw - 105px / 3.37))";
    } else {
      this.scrollHeight += ")";
    }
  },
  mounted() {
	  this.CategoryIdsList=[];
	  this.CategoryIds1=this.d[0].Id;
	  this.CategoryIds2=this.d[0].ChildList[0].Id;
    this.init();
  },
  methods: {
	  // 购物车
	  showSkuHandler(g) {
	  	this.sku = g;
	  	this.u = uni.getStorageSync('mall_UserInfo');
	  	if (!this.u) {
	  		this.u = {
	  			nickName: '未登录',
	  			avatarUrl: ''
	  		};
	  		this.showAuth = true;
	  	} else {
	  		this.showSku = true;
	  	}
	  },
    changeHandler(i) {
      this.active=i;
      this.CategoryIds1=this.d[i].Id;
	  this.CategoryIds2=this.d[i].ChildList[0].Id;
      this.msg.page = 1;
	  this.tid = i;
	  this.stid = 0;
      this.g = [];
      this.init();
    },
    clickSecondHandler(i) {
      let tid=this.tid;
      this.CategoryIds2=this.d[tid].ChildList[i].Id;
      this.stid = i;
      this.msg.page = 1;
      this.g = [];
      this.init();
    },
    clickHandler(item) {
      uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id });
    },
    init() {
	  this.CategoryIdsList=[];
	  this.CategoryIdsList.push(this.CategoryIds1,this.CategoryIds2);
	  this.msg.CategoryIds=this.CategoryIdsList.join(',');
      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].child[this.stid].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;
      }
    },
	reloadUserinfo() {
		this.u = uni.getStorageSync('mall_UserInfo');
		this.showAuth = false;
	},
	//关闭登录窗口
	gbAuth() {
		this.showAuth = false;
	}
  }
};
</script>

<style>
.catstyle8 {
  display: flex;
}
.catstyle8 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle8 .right-slider {
  padding: 10px 0;
  height: 100%;
  width: 1px;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.catstyle8 .good {
  border-bottom: 1rpx solid #f1f1f1;
  display: flex;
  padding: 10px 0;
  margin-right: 16px;
}
.catstyle8 .good .good-img {
  width: 77px;
  height: 77px;
}
.catstyle8 .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;
}
.catstyle8 .good .good-info {
  margin-left: 5px;
  width: 1px;
  flex: 1;
  min-height: 70px;
}
.catstyle8 .good .good-info .goodprice {
  display: flex;
  align-items: flex-end;
}
.catstyle8 .good .good-info .left {
  flex: 1;
  width: 1px;
}
.catstyle8 .good .good-info .right {
  width: 30px;
  height: 30px;
  display: flex;
  justify-items: right;
  align-items: flex-end;
}
.catstyle8 .good .good-info .left .vip {
  font-size: 14px;
  font-weight: 600;
  color: #f39800;
}
.catstyle8 .good .good-info .goodprice .left .price {
  font-size: 16px;
}
.catstyle8 .good .good-info .goodprice .left .sell {
  font-size: 12px;
  color: gray;
}
.catstyle8 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
}
.catstyle8 .second-box {
  width: 100%;
  overflow-x: auto;
}
.catstyle8 .second {
  padding: 10px 0;
  margin: 0 10px;
  white-space: nowrap;
  background: #fff;
  overflow-x: auto;
}
.catstyle8 .second .item {
  margin-right: 10px;
  display: inline-block;
  padding: 5px 10px;
  height: 23px;
  line-height: 23rpx;
  box-sizing: border-box;
  border-radius: 23px;
  border: 1px solid transparent;
  font-size: 12px;
}
</style>
