<template>
  <div v-if="!isloading">
    <search :styleStr="searchStyle"></search>
    <div
      :style="{ height: contentHeight + 'px' }"
      style="voerflow: hidden; overflow-y: auto;"
    >
      <style1
        v-if="cstyle.Type == 1 && cstyle.Style == 1"
        :d="types"
        :h="(navHeight+54)"
      ></style1>
      <style2
        v-if="cstyle.Type == 1 && cstyle.Style == 2"
        :d="types"
        :h="(navHeight+54)"
      ></style2>
      <style3
        v-if="cstyle.Type == 1 && cstyle.Style == 3"
        :d="types"
        :h="(navHeight+54)"
      ></style3>
      <style4
        v-if="cstyle.Type == 1 && cstyle.Style == 4"
        :d="types"
        :h="(navHeight+54)"
      ></style4>
      <style5
        v-if="cstyle.Type == 2 && cstyle.Style == 1"
        :d="types"
        :h="(navHeight+54)"
      ></style5>
      <style6
        v-if="cstyle.Type == 2 && cstyle.Style == 2"
        :d="types"
        :h="(navHeight+54)"
      ></style6>
      <style7
        v-if="cstyle.Type == 2 && cstyle.Style == 3"
        :d="types"
        :h="(navHeight+54)"
      ></style7>
      <style8
        v-if="cstyle.Type == 2 && cstyle.Style == 4"
        :d="types"
        :h="(navHeight+54)"
      ></style8>
      <style9
        v-if="cstyle.Type == 3 && cstyle.Style == 1"
        :d="types"
        :h="(navHeight+54)"
      ></style9>
      <style10
        v-if="cstyle.Type == 3 && cstyle.Style == 2"
        :d="types"
        :h="(navHeight+54)"
      ></style10>
      <style11
        v-if="cstyle.Type == 3 && cstyle.Style == 3"
        :d="types"
        :h="(navHeight+54)"
      ></style11>
    </div>
    <tabbars></tabbars>
  </div>
</template>

<script>
import search from "@/components/search/index";
import tabbars from "@/components/tabbar/index";
import style1 from "@/components/cats/style1";
import style2 from "@/components/cats/style2";
import style3 from "@/components/cats/style3";
import style4 from "@/components/cats/style4";
import style5 from "@/components/cats/style5";
import style6 from "@/components/cats/style6";
import style7 from "@/components/cats/style7";
import style8 from "@/components/cats/style8";
import style9 from "@/components/cats/style9";
import style10 from "@/components/cats/style10";
import style11 from "@/components/cats/style11";
export default {
  data() {
    return {
	  cat_style:2,
	  isloading: true,
	  pageTitle: "分类",
	  navHeight: 0,
	  searchStyle: {
		placeholder: "搜索",
		background: "rgb(240,239,244)",
		textPosition: "center",
		textColor: "rgb(200,200,200)",
		color: "#FFF",
		radius: 100,
	  },
	  types: [],
	  changeHeight: 0,
	  contentHeight: 0,
	  cstyle: {
		  Type:1,
		  Style:1
	  },
	  cat_id:''
    };
  },
  components: {
    search,
    tabbars,
    style1,
    style2,
    style3,
    style4,
    style5,
    style6,
    style7,
    style8,
    style9,
    style10,
    style11,
  },
  onLoad(option) {
    this.navHeight = this.$navHeight - 2;
    // this.cstyle = uni.getStorageSync("basedata")
    //   ? uni.getStorageSync("basedata").cat_style
    //   : [];
    if (this.cstyle.cat_style == "4") {
      // this.searchStyle.p = {
      //   position: "fixed",
      //   top: this.navHeight,
      //   width: "100%",
      //   left: "0",
      // };
    }
	if(option&&option.cat_id){
		this.cat_id=option.cat_id;
	}
  },
  mounted() {
    let currentPages = getCurrentPages();
    let c = this.$uiConfig.is_bang ? 80 : 52;
    this.contentHeight = this.$utils.calcContentHeight(c);
    console.log(this.contentHeight);
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = uni.getStorageSync("basedata")
      ? uni.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.init();
	this.getStyle();
    uni.showNavigationBarLoading();
  },
  methods: {
    goHome() {
      uni.redirectTo({ url: "/pages/index/main" });
    },
	getStyle(){
		this.request2(
			{
				url: '/api/AppletGoods/GetProductCategoryTreeList',
				data: {
					RootId:this.cat_id
				}
			},
			res => {
				console.log("res",res);
				this.isloading = false;
				if(res.resultCode==1){
					this.types = res.data;
					console.log("this.types",this.types)
					// this.types.forEach((x) => {
					//   if (x.IconPath == "") {
					// 	x.IconPath =
					// 	  "https://cdnimg.iotweixin.com/uploads/mall1285/20200330/2099ca5e58ff3e0548d730bfaae14f7a.png";
					//   }
					// });
				}
				
				uni.hideNavigationBarLoading();
			}
		);
	},
    init() {
		this.request2(
			{
				url: '/api/AppletGoods/GetProductCategoryStyleInfo',
				data: {}
			},
			res => {
				console.log("res",res);
				if(res.resultCode==1){
					this.cstyle=res.data;
				}
				
				uni.hideNavigationBarLoading();
			}
		);
    //   this.request(
    //     {
    //       url: "",
    //       data: {
    //         r: "api/cat/list",
    //         cat_id: "",
    //         select_cat_id: "",
    //       },
    //     },
    //     (res) => {
    //       this.types = res.data.list;
		  // console.log("this.types",this.types)
    //       this.types.forEach((x) => {
    //         if (x.pic_url == "") {
    //           x.pic_url =
    //             "https://cdnimg.iotweixin.com/uploads/mall1285/20200330/2099ca5e58ff3e0548d730bfaae14f7a.png";
    //         }
    //       });
    //       this.isloading = false;
    //       uni.hideNavigationBarLoading();
    //     }
    //   );
    },
  },
};
</script>

<style></style>
