<template>
  <view class="content">
    <!-- 左边tab栏开始 -->
    <scroll-view class="left" scroll-with-animation="all 0.2s ease" :scroll-into-view="toLeftId" scroll-y>
      <view
        :upper-threshold="500"
        :id="`l_id${index}`"
        v-for="(item, index) in lists"
        :key="index"
        class="item text-center"
        :class="{ active: index == currentId }"
        @click="handleSelect(index)"
      >
        {{ item.name }}
        <view class="cuIconlujing226"></view>
      </view>
    </scroll-view>
    <!-- 左边tab栏结束 -->
    <!-- 右边列表开始 -->
    <scroll-view
      class="right"
      scroll-with-animation="all 0.2s ease"
      refresher-background="transparent"
      scroll-y
      @scroll="scroll"
      :scroll-top="scrollTop"
      :refresher-triggered="refresherTriggered"
      :refresher-enabled="true"
      :refresher-threshold="100"
      @refresherrefresh="refresherrefresh"
    >
      <view class="cate-box-wrap">
        <!-- <view class="flex align-center justify-between text-333">
          <text class="cate-box-wrap-title text-bold text-lg">{{ item.name }}</text>
        </view> -->
        <fu-loading v-if="isShowLoading"></fu-loading>
        <fu-empty-ui v-if="goodsList.length === 0 && isInit"></fu-empty-ui>
        <view class="cate-box">
          
          <view class="cate-box-item flex " v-for="(ele, j) in goodsList" :key="j" @tap.stop="handlerClassify(ele)">
            <image style="width: 168rpx; height: 168rpx;border-radius: 16rpx;margin-right: 16rpx;" :src="ele.thumb" mode="aspectFill" />
            <view class="" style="width: 350rpx;">
            	<view class="text-lg text-bold goodsname" v-if="ele.name ">{{ ele.name }}</view>
				<view class="text-lg text-bold goodsname" v-if="!ele.name ">{{ ele.goods_name}}</view>
							<view class="text-lm text-999 sales">月销{{ele.sales_num_new}}</view>
							<view class="flex align-center justify-between">
								<view class="">
									<text class="price text-bold">¥{{ele.shop_price}}</text>
									<text class="text-sm line text-999">¥{{ele.market_price}}</text>
								</view>
								<view v-if="ele.is_spec==1" @tap.stop="skuFunc(ele)" class="skuclass flex align-center justify-center text-xs text-white">选规格</view>
								<image v-else class="skuimg" @tap.stop="skuFunc(ele)" :src='STATIC_URL+"102.png"'></image>
							</view>
            </view>
          </view>
          
        </view>
        <uni-load-more v-if="goodsList.length !=0 " :status="status"></uni-load-more>
      </view>
    </scroll-view>
    <!-- 右边列表结束 -->
  </view>
</template>
<script>
export default {
  name: 'benben-goods-classify',
  props: {
    // 分类列表
    lists: {
      type: Array,
      default: () => [],
    },
    top: {
      type: [Number, String],
      default: 88,
    },
    handleId: {
      type: [Number, String],
      default: '',
    },
    sid: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      refresherTriggered: false,
      heightArr: [],
      flag: false,
      setTimeoutFn: null,
      setTimeoutLists: null,
      scrollTop: '',
      toLeftId: '',
      currentId: 0, //选中id
      setTimeoutHandle: null,
      goodsList: [],
      isShowLoading: false,
      isInit: false,
      status: 'more', // 表示是否有数据可以请求
      page: 1,
      address: ''
    }
  },
  watch: {
    lists: {
      handler() {
        this.setTimeoutLists && clearTimeout(this.setTimeoutLists)
        this.setTimeoutLists = setTimeout(this.getHeight, 300)
      },
      deep: true,
      immediate: true,
    },
  },
  components: {},
  computed: {},
  mounted() {
    console.log(this.lists)
    if (this.lists.length) {
      this.getShopGoodsList(this.lists[0].aid, true)
    }
  },
  methods: {
    getShopGoodsList(aid, value) {
      if (this.status != 'more') return;
      this.status = 'loading';
      let data = {
        list_rows: 20,
        page: this.page,
        store_id: this.sid,
        cid: aid
      };
      // console.log('请求的数据', data);
      if (this.page == 1 && value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.getGoodsDetailGoodsList, data)
        .then(res => {
          console.log('订单列表', res);
          this.isShowLoading = false;
          if (res.data.code == 1) {
            var curPageData = res.data.data.data;
            curPageData.map((item) => {
              item.num = 0;
            })
            if (this.page == 1) this.goodsList = [];
            this.goodsList = this.goodsList.concat(curPageData);
            console.log('上拉加载', curPageData.length, this.size);
            if (res.data.data.last_page > this.page) {
              this.status = 'more';
              this.page++;
            } else {
              this.status = 'noMore';
            }
          } else {
            this.$message.info(res.data.msg);
          }
          this.isInit = true;
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          this.isShowLoading = false;
          uni.stopPullDownRefresh();
        });
      
    },
    refresherrefresh() {
      this.refresherTriggered = true
      setTimeout(() => {
        this.refresherTriggered = false
        this.$emit('refresh')
      }, 500)
    },
    scroll(e) {
      this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
      this.setTimeoutFn = setTimeout(() => {
        let height = e.target.scrollTop
        let index = this.heightArr.findIndex((item) => height >= item.minHeight && height < item.maxHeight)
        this.currentId = index == -1 ? 0 : index
        this.toLeftId = `l_id${index >= 3 ? index - 3 : 0}`
      }, 100)
    },
    /**
     * @event
     * @description  tab切换
     * @param {Number} item -当前选中数据  //暂时没用
     * @param {Number} index - 选中下标
     * @return {Boolean}
     * */
    handleSelect(index) {
      if (this.currentId == index) return false;
      this.currentId = index;
      this.status = 'more';
      this.page = 1;
      this.isInit = false;
      this.goodsList = [];
      this.getShopGoodsList(this.lists[index].aid, true);
      // this.scrollTop = this.heightArr[index].minHeight
    },
    handlerClassify(item) {
      // this.$emit('update:handle-id', item.aid)
      // this.$emit('handle-item', item)
			uni.navigateTo({
				url:"/pages/shop/productDetails/productDetails?goods_id=" + item.aid
			})
    },
		skuFunc(item){
			this.$emit('skuFunc', item)
		},
    getHeight() {
      uni
        .createSelectorQuery()
        .in(this)
        .selectAll('.cate-box-wrap')
        .boundingClientRect()
        .exec((res) => {
          console.log(res)
          let heightArr = []
          let height = 0
          res[0].map((item) => {
            let obj = { minHeight: height > 0 ? height - 10 : height }
            height += Math.floor(item.height)
            obj.maxHeight = height - 10
            heightArr.push(obj)
          })
          this.heightArr = heightArr
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  background-color: #fff;
  text-align: center;
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}
.goods_title {
  width: 146rpx;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //用省略号显示
  white-space: nowrap; //不换行
}
.content {
  border-top: 1px solid #f8f8f8;
	border-radius: 16rpx 16rpx 0 0;
	padding-top: 40rpx;
	padding-bottom: 140rpx;
  // position: fixed;
  bottom: var(--window-bottom);
  display: flex;
	background: #fff;
  .left {
    width: 180rpx;
    height: 100%;
		// margin-top: 50rpx;
    background-color: #F6F7F9;
    box-sizing: border-box;
    .item {
      width: 100%;
      height: 99rpx;
      line-height: 99rpx;
      font-size: 24rpx;
      color: #666666;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .item.active {
      background-color: #fff;
      color: #FF9300;
      font-weight: bold;
      position: relative;
      // &::before {
      //   content: '';
      //   width: 8rpx;
      //   height: 34rpx;
      //   background: #ff6464;
      //   border-radius: 4rpx;
      //   position: absolute;
      //   top: 50%;
      //   left: 0;
      //   transform: translateY(-50%);
      // }
    }
  }
  .right {
    width: 570rpx;
    height: 100%;
    background-color: #fff;
  }
}
.cate-box-wrap {
  .cate-box-wrap-title {
    line-height: 80rpx;
    padding: 0 32rpx;
  }
  &:last-child {
    // min-height: calc(100vh - var(--window-bottom) - var(--window-top));
    min-height: 100%;
  }
  .cate-box {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10rpx;
    box-sizing: border-box;
    .cate-box-item {
      padding-bottom: 20rpx;
			.goodsname{
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.price{
				color: #E32121;
				margin-right: 16rpx;
			}
			.sales{
				margin: 12rpx 0 40rpx 0;
			}
			.line{
				text-decoration: line-through;
			}
			.skuclass{
				width: 94rpx;
				height: 42rpx;
				background: #FF9300;
				border-radius: 21rpx;
			}
			.skuimg{
				width: 40rpx;
				height: 40rpx;
			}
    }
  }
}
</style>
