<template>
  <div class="goods-box" :class="goods.catPosition == 'left' ? 'flex' : ''">
    <view :style="{ margin: goods.catStyle == 1 ? '0px' : '10px 5px' }">
      <u-tabs
        v-if="
          goods.showCat &&
          goods.catPosition == 'top' &&
          goods.catList.length > 1
        "
        name="menuName"
        :list="goods.catList"
        :is-scroll="true"
        :active-color="mainColor"
        :current="activeKey"
        :show-bar="goods.catStyle == 1"
        :bold="false"
        :type-style="goods.catStyle"
        :height="goods.catStyle == 1 ? '88' : '44'"
        @change="tabChangeHandler"
      ></u-tabs>
    </view>
    <div :class="goods.catPosition == 'top' ? 'right-slider' : ''">
      <!-- 有分类 -->
      <template v-if="goods.showCat">
        <template v-if="goods.catPosition == 'top'">
          <!-- 一行一个 -->
          <style1
            v-if="goods.listStyle == 1"
            :goods-info="goods"
            :good-list="currentList"
          ></style1>
          <!-- 一行两个 -->
          <style2
            v-if="goods.listStyle == 2"
            :goods-info="goods"
            :good-list="currentList"
          ></style2>
          <!-- 一行三个 -->
          <style3
            v-if="goods.listStyle == 3"
            :goods-info="goods"
            :good-list="currentList"
          ></style3>
          <!-- 左右滚动 -->
          <style5
            v-if="goods.listStyle == 0"
            :goods-info="goods"
            :good-list="currentList"
          ></style5>
          <!--列表模式-->
          <style6
            v-if="goods.listStyle == -1"
            :goods-info="goods"
            :good-list="currentList"
          ></style6>
          <!-- 教育有星星模式 -->
          <style7
            v-if="goods.listStyle == 4"
            :goods-info="goods"
            :good-list="currentList"
          ></style7>
        </template>
        <template v-else-if="goods.catPosition == 'left'">
          <!-- 左侧分类 -->
          <view>
            <view class="left-slider">
              <sidebar
                :active="activeKey"
                v-if="goods.showCat && goods.catPosition == 'left'"
                :list="goods.catList"
                name="menuName"
                :active-color="mainColor"
                :border="false"
                @change="tabChangeHandler"
              ></sidebar>
            </view>
            <!-- 右侧列表 -->
            <view class="style4View">
              <style4 :goods-info="goods" :good-list="currentList"></style4>
            </view>
          </view>
        </template>
      </template>
      <!-- 只是商品 -->
      <template v-else>
        <!--一行一个-->
        <style1
          v-if="goods.listStyle == 1"
          :goods-info="goods"
          :good-list="currentList"
        ></style1>
        <!--一行两个-->
        <style2
          v-if="goods.listStyle == 2"
          :goods-info="goods"
          :good-list="currentList"
        ></style2>
        <!--一行三个-->
        <style3
          v-if="goods.listStyle == 3"
          :goods-info="goods"
          :good-list="currentList"
        ></style3>
        <!--左右滚动-->
        <style5
          v-if="goods.listStyle == 0"
          :goods-info="goods"
          :good-list="currentList"
        ></style5>
        <!--列表模式-->
        <style6
          v-if="goods.listStyle == -1"
          :goods-info="goods"
          :good-list="currentList"
        ></style6>
        <!-- 教育有星星模式 -->
        <style7
          v-if="goods.listStyle == 4"
          :goods-info="goods"
          :good-list="currentList"
        ></style7>
      </template>
    </div>
  </div>
</template>

<script>
import style1 from "./style1";
import style2 from "./style2";
import style3 from "./style3";
import style4 from "./style4";
import style5 from "./style5";
import style6 from "./style6";
import style7 from "./style7";
import sidebar from "../sidebar/index";
export default {
  props: ["goods"],
  components: {
    style1,
    style2,
    style3,
    style4,
    style5,
    style6,
    style7,
    sidebar,
  },
  data() {
    return {
      mainColor: "",
      activeKey: 0,
      currentList: [],
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    if (this.goods.showCat) {
      this.currentList = this.goods.catList[0].goodsList;
    } else {
      this.currentList = this.goods.list;
    }
  },
  methods: {
    tabChangeHandler(i) {
      this.currentList = this.goods.catList[i].goodsList;
      this.activeKey = i;
    },
  },
};
</script>

<style>
.style4View {
  display: inline-block;
  width: 100%;
  padding-left: 80px;
  box-sizing: border-box;
}

.goods-box {
  /* margin: 20rpx 0; */
}

.goods-box .tips {
  z-index: 50 !important;
}

.goods-box .flex {
  display: flex;
}

.goods-box.flex .left-slider {
  width: 80px;
  position: absolute;
}

.goods-box.flex .right-slider {
  flex: 1;
  width: 1rpx;
}

.defaultz .van-sticky {
  z-index: 1 !important;
}

.goods-box .van-tabs__scroll {
  background: none;
}

.goods-box ._div {
  width: 100%;
}
</style>
