<template>
  <div class="catstyle10" style="height:100%">
    <div class="left-slider">
      <sidebar
        :active="tid"
        name="Name"
        :active-color="mainColor"
        :border="false"
        :list="d"
        @change="changeHandler"
      ></sidebar>
    </div>
    <div class="right-slider">
      <div
        class="adbox"
        v-if="d[tid].advert_pic"
      >
        <image
          mode="aspectFit"
          :src="d[tid].advert_url"
          style="width: 100%; height: 100%;"
        />
      </div>
      <div v-for="(c, i) in sd" :key="i">
        <div @click="clickHandler(c)" class="sec-title">{{ c.Name }}</div>
        <u-grid :column-num="3" :border="false">
          <template v-if="c.ChildList && c.ChildList.length > 0">
            <u-grid-item
              v-for="(cc, ci) in c.ChildList"
              :key="ci"
              
            >
              <image
                :src="getIconLink(c.IconPath)"
                mode="widthFix"
                style="width: 80rpx; height: 80rpx;"
              />
              <text class="grid-text">{{ c.Name }}</text>
            </u-grid-item>
          </template>
          <template v-else>
            <u-grid-item>
              <u-icon name="photo-o" size="80" :color="'#999'" />
              <text class="grid-text" style="color:#999">无三级分类</text>
            </u-grid-item>
          </template>
        </u-grid>
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from "../sidebar/index";
export default {
  props: ["d", "h"],
  data() {
    return {
      mainColor: "",
      activeStyle: "",
      page: 1,
      page_count: 1,
      mh: 0,
      tid: 0,
      active: 0,
      sd: [],
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = `background:${this.mainColor};`;
    this.sd = this.d[this.tid].ChildList;
  },
  components:{
      sidebar
  },
  methods: {
    changeHandler(e) {
      this.tid = e;
      this.page = 1;
      this.sd = this.d[this.tid].ChildList;
    },
    clickHandler(item) {
      let Id1=this.d[this.tid].Id;
      let Id2=item.Id;
      let CategoryIds=Id1+','+Id2;
      uni.navigateTo({ url: '/pages/goods/list?CategoryIds='+CategoryIds });
    }
  },
};
</script>

<style>
.catstyle10 {
  display: flex;
}
.catstyle10 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle10 .right-slider {
  padding: 10px;
  height: 100%;
  width: 1px;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.catstyle10 .right-slider .van-icon--image,
.catstyle10 .right-slider .van-icon {
  width: 80rpx;
  height: 80rpx;
  font-size: 80rpx;
  color: gray;
}
.catstyle10 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
  margin-bottom: 10px;
}
.catstyle10 .sec-title {
  font-size: 13px;
  font-weight: 500;
  margin: 10px 0;
}
</style>
