<template>
  <view class="businessType-container">
    <!-- <u-subsection
      :list="list"
      :current="active"
      @change="handleSubsection"
    ></u-subsection> -->
    <view class="title">
      <view class="">主营品类</view>
      <view class="">到账比例</view>
    </view>

    <scroll-view
      scroll-y
      :scroll-with-animation="isTap"
      scroll-anchoring
      class="tab-view"
      :scroll-into-view="scrollView_leftId"
      :style="{ height: height + 'px', top: top + 'px' }"
    >
      <view
        :id="`left_${index}`"
        v-for="(item, index) in tabbar"
        :key="index"
        class="tab-bar-item"
        :class="[currentTab == index ? 'active' : '']"
        :data-current="index"
        @tap.stop="swichNav"
      >
        <text>{{ item.store_category_name }}</text>
      </view>
    </scroll-view>
    <scroll-view
      @scroll="scroll"
      scroll-anchoring
      scroll-y
      scroll-with-animation
      class="right-box"
      :scroll-into-view="scrollView_rightId"
      :style="{ height: height + 'px', top: top + 'px' }"
    >
      <!--内容部分 start 自定义可删除-->
      <view class="" v-if="active == 0">
        <view
          class="tab3-item"
          v-for="(item, index) of tabbar3[currentTab]"
          :key="index"
          @click="handerTypeItem(item)"
        >
          <view class="category-name">{{ item.store_category_name }}</view>
          <view class="commission">{{ item.split_ratio }}%</view>
        </view>
      </view>
      <!-- <view class="" v-if="active == 1">
        <block v-for="(item, index) in tabbar4" :key="index">
          <view class="" v-for="(group, index2) of item" :key="index + index2">
            <view class="tab3-item" v-if="currentTab == index">{{
              group
            }}</view>
          </view>
        </block>
      </view> -->
      <!--内容部分 end 自定义可删除-->
    </scroll-view>
  </view>
</template>

<script>
import {
  GetMeritoCategory,
  GetTreeCategory,
  GetBizCategoryList,
} from "../../api/audit";
export default {
  components: {
    // tLinkage
  },
  data() {
    return {
      list: [
        {
          name: "主营品类",
        },
        {
          name: "辅营品类",
        },
      ],
      active: 0,
      tabbar: [
        "推荐分类",
        "进口超市",
        "国际名牌",
        "奢侈品",
        "海囤全球",
        "男装",
        "女装",
      ],
      tabbar2: [
        "钟表珠宝",
        "手机数码",
        "电脑办公",
        "家用电器",
        "玩具乐器",
        "运动户外",
        "宠物生活",
        "特产馆",
      ],
      tabbar3: [],
      // tabbar4: [
      //   ["asdasd", "44524", "31"],
      //   ["asdasghghgg", "asdasd"],
      // ],
      height: 0, //scroll-view高度
      top: 0,
      currentTab: 0, //预设当前项的值
      scrollView_leftId: "left_0",
      scrollView_rightId: "right_0",
      scrollTop: 0,
      distanceTop: uni.upx2px(92),
      isScroll: true,
      isTap: true,
    };
  },
  onLoad: function (options) {
    setTimeout(() => {
      uni.getSystemInfo({
        success: (res) => {
          let header = 92;
          let top = 0;
          //#ifdef H5
          top = 44;
          //#endif
          this.height = res.windowHeight - uni.upx2px(header);
          this.top = top + uni.upx2px(header);
        },
      });
    }, 50);
  },
  onShow() {
    this.getBizCategoryList();
    // this.getMeritoCategory();
  },
  methods: {
    async getBizCategoryList() {
      let res = await GetBizCategoryList();
      if (res && res.status == 200) {
        // 使用 map 创建一个新的数组，不包含 children 字段
        this.tabbar = res.data.map((item) => {
          // 使用对象解构来复制对象，同时省略 children 字段
          const { children, ...rest } = item;
          return rest;
        });

        this.tabbar3 = res.data.map((item) => {
          const { children, ...rest } = item;
          return [...[rest], ...children];
        });
      }
    },
    handleSubsection(e) {
      this.active = e;
    },
    handerTypeItem(item) {
      // bizCategory 一级分类 biz_second_category 二级分类
      let group = {
        bizCategory: {
          id: this.tabbar[this.currentTab].store_category_id,
          name: this.tabbar[this.currentTab].store_category_name,
        },
        bizSecondCategory: {
          id: item.store_category_id,
          name: item.store_category_name,
        },
      };
      uni.setStorageSync("typeItem", group);

      uni.navigateBack();
    },
    // 点击标题切换当前页时改变样式
    swichNav: function (e) {
      let cur = e.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
        this.checkCor();
      }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function (isScroll) {
      if (!isScroll) {
        this.isScroll = false;
        this.isTap = true;
        if (this.currentTab > 6) {
          this.scrollView_leftId = `left_${this.currentTab - 2}`;
        } else {
          this.scrollView_leftId = `left_0`;
        }
        this.scrollView_rightId = `right_${this.currentTab}`;
      } else {
        this.scrollView_leftId = `left_${this.currentTab}`;
      }
    },
    productList(e) {
      let key = e.currentTarget.dataset.key;
      uni.navigateTo({
        url: "/pages/template/mall/productList/productList?searchKey=" + key,
      });
    },
    search: function () {
      uni.navigateTo({
        url: "/pages/template/news/search/search",
      });
    },
    scroll(e) {
      //动画时长固定300ms
      if (!this.isScroll) {
        setTimeout(() => {
          this.isScroll = true;
        }, 150);
      } else {
        this.scrollTop = e.detail.scrollTop;
      }
    },
    linkage(e) {
      if (e.isLinkage && e.index != this.currentTab) {
        this.isTap = false;
        this.currentTab = e.index;
        this.checkCor(true);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fcfcfc;
}

.businessType-container {
  .tui-searchbox {
    width: 100%;
    height: 92rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    z-index: 100;
  }

  .tab3-item {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    height: 110rpx;
    line-height: 110rpx;
    border-bottom: 1px solid #f7f7f7;
  }

  .tui-searchbox::after {
    content: "";
    position: absolute;
    border-bottom: 1rpx solid #d2d2d2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
  }

  .tui-search-input {
    width: 100%;
    height: 60rpx;
    background: #f1f1f1;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-search-text {
    padding-left: 16rpx;
  }

  .tab-view {
    /* height: 100%; */
    width: 200rpx;
    position: fixed;
    left: 0;
    z-index: 10;
  }

  .tab-bar-item {
    width: 200rpx;
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    padding: 0 20rpx;
  }

  .active {
    position: relative;
    color: #000;
    font-size: 30rpx;
    font-weight: 600;
    background: #fcfcfc;
  }

  .active::before {
    content: "";
    position: absolute;
    border-left: 8rpx solid #e41f19;
    height: 30rpx;
    left: 0;
  }

  /* 左侧导航布局 end*/

  .right-box {
    width: 100%;
    position: fixed;
    padding-left: 220rpx;
    box-sizing: border-box;
    left: 0;
  }

  .page-view {
    width: 100%;
    overflow: hidden;
    padding-top: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .class-item {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
  }

  .class-name {
    font-size: 26rpx;
    font-weight: bold;
  }

  .g-container {
    /* padding-top: 20rpx; */
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .g-box {
    width: 33.3333%;
    text-align: center;
    padding-top: 40rpx;
  }

  .g-image {
    width: 120rpx;
    height: 120rpx;
  }

  .g-title {
    font-size: 22rpx;
  }

  .title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    font-weight: bold;
    background: #f7f7f7;
  }

  .commission {
    padding: 0 40rpx;
    color: #ccc;
  }

  .category-name {
    flex: 1;
    min-width: 138rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
  }
}

/* 左侧导航布局 start*/
</style>
