<template>
  <view class="themes-classify">
    <image class="themes-classify__img" :src="shopData.bgimg" mode="widthFix"></image>
    <block v-if="flag">
      <themes-head
        :navHeight="navHeight"
        :shopData="shopData"
        :isShowNav="false"
        :navIndex="1"
      ></themes-head>
      <view class="themes-content">
        <view class="themes-content__left">
          <view
            class="classify-item"
            :class="{ actived: currentIndex === '' }"
            @tap="selectAll()"
            >全部</view
          >
          <view
            class="classify-item"
            v-for="(item, index) in shopCategory"
            :key="index"
            :class="{ actived: currentIndex === index }"
            @tap="categoryHandle(item.id, index)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="themes-content__right">
          <view class="classify-tabs">
            <view
              class="classify-tabs__item"
              :class="{ actived: isSelectAll }"
              @tap="selectCategoryAll()"
              >全部</view
            >
            <view
              class="classify-tabs__item"
              v-for="(item, index) in shopCategorychild"
              :key="index"
              :class="{ actived: curidx === index && !isSelectAll }"
              @tap="categoryChildHandle(item.id, index)"
              >{{ item.name }}</view
            >
          </view>
          <scroll-view
            class="themes-content__scroll"
            :scroll-y="true"
            @scrolltolower="getmorecomment"
          >
            <classifyShop :shopProduct="shopProduct"></classifyShop>
            <loading v-if="loading"></loading>
            <nomore v-if="nomore"></nomore>
            <nodata text="没有查找到相关商品" v-if="nodata"></nodata>
          </scroll-view>
        </view>
      </view>
    </block>
    <loading v-else></loading>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
  </view>
</template>

<script>
import { myMixin } from '../logic/classify.js';
import themesHead from "./components/themes-head.vue";
import classifyShop from "./components/classify-shop.vue";

export default {
  mixins: [myMixin],
  components: {
    themesHead,
    classifyShop,
  }
}
</script>

<style lang="scss" scoped>
.themes-classify {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  &__img {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 1020rpx;
  }
}
.themes-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 28rpx;
  background: #fff;
  position: relative;
  border-radius: 12rpx 12rpx 0 0;
  display: flex;
  flex: 1;
  &__left {
    width: 180rpx;
    flex-shrink: 0;
    background: #f8f9fa;
    overflow-y: scroll;
    & ::-webkit-scrollbar {
      display: none;
    }
  }
  &__right {
    flex: 1;
    box-sizing: border-box;
    padding: 28rpx 28rpx 0;
    position: relative;
    /deep/ .nodata {
      margin-left: -30rpx;
    }
  }
  &__scroll {
    height: calc(100% - 86rpx);
    & ::-webkit-scrollbar {
      display: none;
    }
  }
  .classify-item {
    height: 110rpx;
    line-height: 110rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666666;
    &.actived {
      color: #1870C5;
      background: #fff;
      font-weight: 500;
    }
  }
  .classify-tabs {
    display: flex;
    margin-bottom: 30rpx;
    overflow-x: scroll;
    & ::-webkit-scrollbar {
      display: none;
    }
    &__item {
      flex-shrink: 0;
      min-width: 80rpx;
      box-sizing: border-box;
      margin-right: 20rpx;
      padding: 0 18rpx;
      font-size: 22rpx;
      line-height: 42rpx;
      border-radius: 42rpx;
      color: #666666;
      background: #f7f7f7;
      &.actived {
        background: #E6EFFF;
        color: #1870C5;
      }
    }
  }
  /deep/ .nomore {
    margin-left: 32rpx;
  }
  /deep/ .nodata {
    width: calc(100vw - 180rpx);
  }
}
</style>