<template>
  <div class="products_center">
    <!--标签栏 -->
    <ProductsTabsItem :title="9" :product-tabs="productTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
    <!-- 分类栏-->
    <div class="product_types">
      <el-row type="flex">
        <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
        <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
          <div class="spaceList">
            <strong>分类：</strong>
            <ul>
              <li v-for="(item,index) in classifyList" @click.stop="changeClassify(item,index)" :id="'classify_'+index">
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="spaceList">
            <strong>空间：</strong>
            <ul>
              <li v-for="(item,index) in spaceList" @click.stop="changeSpace(item,index)" :id="'space_'+index">
                {{ item.title }}
              </li>
            </ul>
          </div>
          <div class="spaceList">
            <strong>风格：</strong>
            <ul>
              <li v-for="(item,index) in styleList" @click.stop="changeStyle(item,index)" :id="'style_'+index">
                {{ item.title }}
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--图片栏-->
    <PicturesBox :image-list="imgList" :type="33"/>
    <Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage"
                v-if="showPagination"/>
    <div class="nullData" v-show="showNull">
      暂时没有数据！
    </div>
  </div>
</template>

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";
import Pagination from "@/components/Pagination";
import PicturesBox from "@/components/PicturesBox";
import {getGoodsCategory, getGoodsList, getPublicData} from "../../api";

export default {
  name: "index",
  metaInfo() {
    return {
      title: "产品中心 | " + localStorage.getItem("corporate_name")
    };
  },
  components: {PicturesBox, Pagination, ProductsTabsItem},
  data() {
    return {
      showNull: false,
      showPagination: true,
      classifyList: [],
      spaceList: [],
      styleList: [],
      pageSize: 12,
      total: 0,
      imgList: [],
      classIndex: "",
      productTabs: []
    };
  },
  watch: {
    $route(to) {
      //点击产品中心的一级分类切换
      if (to.query.menu != undefined && to.query.classify == undefined && to.query.style == undefined && to.query.space == undefined) {
        //改变二级分类
        for (let i = 0; i < this.productTabs.length; i++) {
          if (this.productTabs[i].id == to.query.menu) {
            this.$refs.ProductsTabsItem.activeName = i + "";
          }
        }
        this.getCategory(to.query.menu);
        //获取产品列表
        this.getList(to.query.menu, 1, this.pageSize,'','');
      }else {
        if (to.query.classify == 0) {
          if (to.query.style == "全部") {
            this.getList(to.query.menu, 1, this.pageSize, 0, to.query.space);
            if (to.query.space == "全部") {
              this.getList(to.query.menu, 1, this.pageSize, 0, 0);
            }
          } else if (to.query.space == "全部") {
            this.getList(to.query.menu, 1, this.pageSize, to.query.style, 0);
            if (to.query.style == "全部") {
              this.getList(to.query.menu, 1, this.pageSize, 0, 0);
            }
          } else {
            this.getList(to.query.menu, 1, this.pageSize, to.query.style, to.query.space);
          }
        } else if (to.query.classify != 0) {
          if (to.query.style == "全部") {
            this.getList(to.query.classify, 1, this.pageSize, 0, to.query.space);
            if (to.query.space == "全部") {
              this.getList(to.query.classify, 1, this.pageSize, 0, 0);
            }
          } else if (to.query.space == "全部") {
            this.getList(to.query.classify, 1, this.pageSize, to.query.style, 0);
            if (to.query.style == "全部") {
              this.getList(to.query.classify, 1, this.pageSize, 0, 0);
            }
          } else {
            this.getList(to.query.classify, 1, this.pageSize, to.query.style, to.query.space);
          }
        }
      }

    }
  },
  //点击分类,字体颜色变红
  beforeUpdate() {
    if (this.$route.query.menu) {
      for (let i = 0; i < this.productTabs.length; i++) {
        if (this.productTabs[i].id == this.$route.query.menu) {
          this.$refs.ProductsTabsItem.activeName = i + "";
        }
      }
    }
    if (this.$route.query.classify) {
      for (let i = 0; i < this.classifyList.length; i++) {
        const red = document.getElementById("classify_" + i);
        if (this.classifyList[i].id == this.$route.query.classify) {
          red.style = "color: #f00!important;text-decoration: underline!important;";
        } else {
          red.style = "color: #000!important;";
        }
      }
    } else {
      for (let i = 0; i < this.classifyList.length; i++) {
        const red = document.getElementById("classify_" + i);
        red.style = "color: #000!important;";
      }
    }
    if (this.$route.query.space || this.$route.query.menuTitle) {
      for (let i = 0; i < this.spaceList.length; i++) {
        const red = document.getElementById("space_" + i);
        if (this.spaceList[i].title == this.$route.query.space) {
          red.style = "color: #f00!important;text-decoration: underline!important;";
        } else if (this.spaceList[i].title == this.$route.query.menuTitle) {
          red.style = "color: #f00!important;text-decoration: underline!important;";
          this.getList(this.$route.query.menu, 1, this.pageSize, "", this.$route.query.menuTitle);
        } else {
          red.style = "color: #000!important;";
        }
      }
    } else {
      for (let i = 0; i < this.spaceList.length; i++) {
        const red = document.getElementById("space_" + i);
        red.style = "color: #000!important;";
      }
    }
    if (this.$route.query.style || this.$route.query.menuTitle) {
      for (let i = 0; i < this.styleList.length; i++) {
        const red = document.getElementById("style_" + i);
        if (this.styleList[i].title == this.$route.query.style) {
          red.style = "color: #f00!important;text-decoration: underline!important;";
        } else if (this.styleList[i].title == this.$route.query.menuTitle) {
          red.style = "color: #f00!important;text-decoration: underline!important;";
          this.getList(this.$route.query.menu, 1, this.pageSize, this.$route.query.menuTitle, "");
        } else {
          red.style = "color: #000!important;";
        }
      }
    } else {
      for (let i = 0; i < this.styleList.length; i++) {
        const red = document.getElementById("style_" + i);
        red.style = "color: #000!important;";
      }
    }
  },
  mounted() {
    //获取一级分类和空间和风格数据
    getPublicData().then(res => {
      this.productTabs = res.data.goodscategory_list;
      this.spaceList = [
        {
          title: "全部"
        },
        ...res.data.space_list
      ];
      this.styleList = [
        {
          title: "全部"
        },
        ...res.data.style_list
      ];
    });

    //点击了空间风格,之后重新加载, 内容不变
    if (this.$route.query.menu) {
      this.getCategory(this.$route.query.menu);
      this.getList(this.$route.query.menu, 1, this.pageSize, this.$route.query.style, this.$route.query.space);
    } else if (this.$route.query.menu == undefined) {
      //进入页面时, 获取第一个列表的类别
      this.getCategory(1);
      this.getList(1, 1, this.pageSize);
    }
  },
  methods: {
    //获取二级分类
    getCategory(category) {
      getGoodsCategory(category).then(res => {
        this.classifyList = [
          {
            id: 0,
            name: "全部"
          },
          ...res.data.categorylist
        ];
      });
    },
    //获取产品列表
    getList(classid, page, limit, stylename, spacename) {
      getGoodsList({
        classid: classid,
        page: page,
        limit: limit,
        stylename: stylename,
        spacename: spacename
      }).then(res => {
        this.total = res.data.count;
        this.imgList = res.data.list;
        if (res.data.list.length == 0) {
          this.showNull = true;
          this.showPagination = false;
        } else {
          this.showNull = false;
          this.showPagination = true;
        }
      });
    },
    //点击一级分类切换数据及切换不同二级分类
    handleClick(tab) {
      let index = parseInt(tab.index) + 1;
      this.classIndex = index;
      this.$router.push({
        path: "/products_center",
        query: {
          menu: index
        }
      });
      this.getCategory(index);
      this.getList(index, 1, this.pageSize);
    },
    //产品分页
    handleChangePage(value) {
      this.getList(this.classIndex, value, this.pageSize);
    },
    //点击二级分类,筛选产品数据
    changeClassify(item) {
      let menu = this.$route.query.menu;
      let space = this.$route.query.space;
      let style = this.$route.query.style;
      if (menu === undefined) {
        const menuOne = 1;
        menu = menuOne;
      }
      if (space === undefined || space === "全部") {
        const menuOne = 0;
        space = menuOne;
      }
      if (style === undefined || style === "全部") {
        const menuOne = 0;
        style = menuOne;
      }
      this.$router.push({
        path: `/products_center?menu=${menu}&space=${space}&style=${style}`,
        query: {
          classify: item.id
        }
      });
    },
    //点击空间分类,筛选产品数据
    changeSpace(item) {
      let menu = this.$route.query.menu;
      let style = this.$route.query.style;
      let classify = this.$route.query.classify;
      if (menu === undefined) {
        const menuOne = 1;
        menu = menuOne;
      }
      if (style === undefined) {
        const menuOne = 0;
        style = menuOne;
      }
      if (classify === undefined) {
        const menuOne = 0;
        classify = menuOne;
      }
      this.$router.push({
        path: `/products_center?menu=${menu}&classify=${classify}&style=${style}`,
        query: {
          space: item.title
        }
      });
    },
    //点击风格分类,筛选产品数据
    changeStyle(item) {
      let menu = this.$route.query.menu;
      let space = this.$route.query.space;
      let classify = this.$route.query.classify;
      if (menu === undefined) {
        const menuOne = 1;
        menu = menuOne;
      }
      if (space === undefined) {
        const menuOne = 0;
        space = menuOne;
      }
      if (classify === undefined) {
        const menuOne = 0;
        classify = menuOne;
      }
      this.$router.push({
        path: `/products_center?menu=${menu}&classify=${classify}&space=${space}`,
        query: {
          style: item.title
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.becomeRed {
  color: #f00;
  text-decoration: underline;
}

.nullData {
  display: block;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

.products_center {
  min-width: 1300px;

  .product_types {
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    background-color: #fff;

    .spaceList {
      padding: 6px 0;
      border-bottom: 1px dotted #e9e9e9;
      display: flex;
      line-height: 36px;
      height: 36px;
      font-size: 14px;

      strong {
        font-weight: bold;
      }

      ul {
        display: flex;

        li {
          margin-right: 15px;
          cursor: pointer;
        }

        li:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

</style>
