<template>
  <view class="wanlshop-classify-container">
    <block v-if="categoryStyle === 1">
      <scroll-view :style="{ height: mainHeight + 'px' }" scroll-y class="wanlshop-classify-container__one">
        <view class="item" v-for="(item, index) in categoryData" :key="item.id" @tap="handleProduct(item.id, item.name)">
          <image :src="item.image" class="list-image" mode="aspectFill" />
          <view class="category-title">
            <view>{{ item.description }}</view>
            <text class="text-sm text-bold text-black">- {{ item.name }} -</text>
          </view>
        </view>
      </scroll-view>
    </block>
    <block v-else-if="categoryStyle === 2">
      <scroll-view class="wanlshop-classify-container__grid" :style="{ height: mainHeight + 'px' }" scroll-y>
        <view class="cu-list grid col-3 no-border">
          <view class="cu-item" v-for="(item, index) in categoryData" :key="item.id" @tap="handleProduct(item.id, item.name)">
            <image :src="item.image" class="list-image" />
            <text>{{ item.name }}</text>
          </view>
          <view class="safeAreaBottom"></view>
        </view>
      </scroll-view>
    </block>
    <block v-else-if="categoryStyle === 3">
      <view class="wanlshop-classify-container__list">
        <scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop" :style="{ height: mainHeight + 'px' }">
          <view v-for="(item, index) in categoryData" :key="item.id" class="item"
            :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav">
            <text>{{ item.name }}</text>
          </view>
        </scroll-view>
        <block v-for="(item, index) in categoryData" :key="item.id">
          <scroll-view scroll-y class="right" :style="{ height: mainHeight + 'px' }" v-if="currentTab == index">
            <view class="list-cat">
              <view class="padding-top-sm">
                <view class="list-item radius-bock">
                  <view class="list-container">
                    <view class="list-box" v-for="(category, infokey) in item.childlist"
                      :key="category.id" @tap="handleProduct(category.id, category.name)">
                      <image :src="category.image" class="list-image" />
                      <view class="text-sm">{{ category.name }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </block>
      </view>
    </block>
    <block v-else-if="categoryStyle === 4">
      <view class="wanlshop-classify-container__list">
        <scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
          :style="{ height: mainHeight + 'px' }">
          <view v-for="(item, index) in categoryData" :key="item.id" class="item"
            :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav">
            <text>{{ item.name }}</text>
          </view>
          <view class="edgeInsetBottom"></view>
        </scroll-view>
        <block v-for="(item, index) in categoryData" :key="item.id">
          <scroll-view scroll-y class="right" :style="{ height: mainHeight + 'px' }" v-if="currentTab == index">
            <view class="list-cat">
              <view class="padding-top-sm">
                <view class="list-item radius-bock" v-for="(childlist, childkey) in item.childlist"
                  :key="childlist.id">
                  <view class="flex justify-between text-sm"
                    @tap="handleProduct(childlist.id, childlist.name)">
                    <text>{{ childlist.name }}</text>
                    <text class="wlIcon wlIcon-fanhui2 wanl-gray-light"></text>
                  </view>
                  <view class="list-container">
                    <view class="list-box" v-for="(category, infokey) in childlist.childlist"
                      :key="category.id" @tap="handleProduct(category.id, category.name)">
                      <image :src="category.image" class="list-image" />
                      <view class="text-sm">{{ category.name }}</view>
                    </view>
                  </view>
                </view>
                <view class="edgeInsetBottom"></view>
              </view>
            </view>
          </scroll-view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    shopId: { type: Number, default: 0 },
    categoryStyle: { type: Number, default: 1 },
    mainHeight: { type: Number, default: 0 },
    categoryData: { type: Array, default: () => [] }
  },
  data() {
    return {
      currentTab: 0,
      scrollTop: 0
    }
  },
  methods: {
    handleNav(e) {
      let cur = e.currentTarget.dataset.current
      if (this.currentTab == cur) return false
      this.currentTab = cur
      this.checkCor()
    },
    handleProduct(category_id, category_name) {
      if (this.shopId === 0) {
        const dataStr = encodeURIComponent(JSON.stringify({ category_id, category_name }))
        uni.navigateTo({ url: `/pages/product/list?data=${dataStr}` })
      } else {
        uni.navigateTo({
          url: `/pages/product/list?shop_id=${this.shopId}&category_id=${category_id}&category_name=${encodeURIComponent(category_name)}`
        })
      }
    },
    checkCor() {
      if (this.currentTab > 7) {
        this.scrollTop = 500
      } else {
        this.scrollTop = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wanlshop-classify-container {
  &__one {
    padding-left: 25rpx;
    padding-right: 25rpx;
    padding-bottom: 100rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    image {
      width: 100%;
      height: 300rpx;
      border-radius: 15rpx;
      overflow: hidden;
    }
    .item {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 25rpx;
      .category-title {
        font-size: 26rpx;
        position: absolute;
        bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        color: #666666;
        background-color: rgba(255, 255, 255, 0.6);
        width: 60%;
        text-align: center;
        padding: 4rpx 0;
      }
    }
  }
  &__grid {
    padding-bottom: 100rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    .cu-list {
      background-color: rgba(255, 255, 255, 0);
      & > .cu-item {
        padding: 25rpx 0;
        align-items: center;
        image {
          width: 160rpx;
          height: 160rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
  &__list {
    display: flex;
    .left {
      width: 200rpx;
      z-index: 10;
      background: #fbfbfb;
      .item {
        width: 200rpx;
        height: 110rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        &.active {
          position: relative;
          color: #000;
          font-size: 30rpx;
          font-weight: 600;
          background: white;
          &::before {
            content: '';
            position: absolute;
            border-left: 6rpx solid #fe6600;
            height: 32rpx;
            left: 0;
          }
        }
      }
    }
    .right {
      width: 100%;
      padding-left: 25rpx;
      box-sizing: border-box;
      .list-cat {
        width: 100%;
        overflow: hidden;
        padding-top: 10rpx;
        padding-right: 20rpx;
        box-sizing: border-box;
      }
      .list-item {
        background: #ffffff;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        margin-bottom: 20rpx;
      }
      .list-container {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .list-box {
        width: 33.3333%;
        text-align: center;
        padding-top: 40rpx;
      }
      .list-image {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
}
.safeAreaBottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.edgeInsetBottom {
  height: 100rpx;
}
</style>