<template>
  <div class="catstyle6" 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"
        @click="clickHandler(d[tid].advert_url)"
      >
        <image
          mode="aspectFit"
          :src="d[tid].advert_url"
          style="width: 100%; height: 100%;"
        />
      </div>
      <u-grid :col="3" :border="false">
        <u-grid-item
          v-for="(c, i) in sd"
          :key="i"
          @click="clickHandler(c)"
        >
          <image
			class="imgclass"
            :src="getIconLink(c.IconPath)"
            style="width: 80rpx; height: 80rpx;"
          />
          <text class="grid-text">{{ c.Name }}</text>
        </u-grid-item>
      </u-grid>
    </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: [],
    };
  },
  components: {
    sidebar,
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = `background:${this.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;
		let CategoryIds=Id2;
      uni.navigateTo({ url: '/pages/goods/list?CategoryIds='+CategoryIds });
    },
  },
};
</script>

<style>
.catstyle6 .imgclass{
	display: block;
	width: 80rpx; height: 80rpx;
}
.catstyle6 {
  display: flex;
}
.catstyle6 .grid-text {
  font-size: 24rpx;
  margin-top: 4rpx;
  color: "#330330";
}
.catstyle6 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle6 .right-slider {
  padding: 10px;
  height: 100%;
  width: 1px;
  flex: 1;
}
.catstyle6 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
  margin-bottom: 10px;
}
</style>
