<template>
  <view class="catstyle9" style="height: 100%;">
    <view class="left-slider">
      <sidebar
        :active="tid"
        name="Name"
        :active-color="mainColor"
        :border="false"
        :list="d"
        @change="changeHandler"
      ></sidebar>
    </view>
    <view class="right-slider">
      <view
        class="adbox"
        v-if="d[tid].advert_pic"
      >
        <image
          mode="aspectFit"
          :src="d[tid].advert_url"
          style="width: 100%; height: 100%;"
        />
      </view>
      <view v-for="(x, index) in sd" :key="index">
        <view @click="clickHandler(x)" class="sec-title">{{ x.Name }}
		</view>
        <template v-if="x.ChildList && x.ChildList.length > 0">
          <view
            class="item"
            v-for="(cx, ci) in x.ChildList"
            :key="ci"
            
            :data-url="cx.page_url"
          >
            <view class="left">{{ cx.Name }}</view>
            <view class="right">
              <image
                v-if="cx.IconPath && cx.IconPath!=''"
                mode="aspectFit"
                :src="getIconLink(cx.IconPath)"
                style="width: 100%; height: 100%;"
              />
            </view>
          </view>
        </template>
        <template v-else>
          <view class="item">
            <view class="left">无三级分类</view>
            <view class="right"></view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import sidebar from "../sidebar/index";
export default {
  props: ["d", "h"],
  components: {
    sidebar,
  },
  data() {
    return {
      mainColor: "",
      page: 1,
      page_count: 1,
      mh: 0,
      tid: 0,
      active: 0,
      sd: [],
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.sd = this.d[this.tid].ChildList;
  },
  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;
		let CategoryIds=Id2;
		uni.navigateTo({ url: '/pages/goods/list?CategoryIds='+CategoryIds });
    },
  },
};
</script>

<style>
.catstyle9 {
  display: flex;
}
.catstyle9 .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}
.catstyle9 .right-slider {
  padding: 10px;
  height: 100%;
  width: 1px;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.catstyle9 .right-slider .item {
  height: 80px;
  display: flex;
  background: #f5f5f5;
  margin-bottom: 10px;
}
.catstyle9 .right-slider .item .left {
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  flex: 1;
  width: 1px;
}
.catstyle9 .right-slider .item .right {
  margin-top: 16px;
  width: 80px;
  height: 64px;
  text-align: right;
  margin-right: 0px;
}
.catstyle9 .right-slider .item .right img {
  width: 80px;
  height: 64px;
}
.catstyle9 .right-slider .adbox {
  width: 100%;
  height: calc(100vw - 105px / 3.37);
  margin-bottom: 10px;
}
.catstyle9 .sec-title {
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
}
</style>
