<template>
  <div class="catstyle5" 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
        class="item gg"
        v-for="(x, index) in sd"
        :key="index"
        @click="clickHandler(x)"
      >
        <div class="left">{{ x.Name }}</div>
        <div class="right">
          <image
            v-if="x.IconPath && x.IconPath.length > 0"
            mode="aspectFit"
            :src="getIconLink(x.IconPath)"
            style="width: 100%; height: 100%;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from "../sidebar/index";
export default {
  props: ["d", "h"],
  data() {
    return {
      mainColor: "",
      page: 1,
      page_count: 1,
      mh: 0,
      tid: 0,
      active: 0,
      sd: [],
    };
  },
  components: {
    sidebar,
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.sd = this.d[this.tid].ChildList;
  },
  methods: {
    changeHandler(i) {
      this.tid = i;
      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>
.catstyle5 {
  display: flex;
}
.catstyle5 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle5 .right-slider {
  padding: 10px;
  height: 100%;
  width: 1px;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.catstyle5 .right-slider .item {
  height: 80px;
  display: flex;
  background: #f5f5f5;
  margin-bottom: 10px;
}
.catstyle5 .right-slider .item .left {
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #666;
  flex: 1;
  width: 1px;
}
.catstyle5 .right-slider .item .right {
  margin-top: 16px;
  width: 80px;
  height: 64px;
  text-align: right;
  margin-right: 0px;
}
.catstyle5 .right-slider .item .right img {
  width: 80px;
  height: 64px;
}
.catstyle5 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
  margin-bottom: 10px;
}
</style>
