<template>
  <div class="goods_cate wrapper_1200">
    <div class="nav">
      <div class="nav_sort">
        <div class="sort acea-row">
          <div class="name">排序：</div>
          <div class="acea-row row-middle">
            <div
              class="item"
              :class="iSdefaults === 0 ? 'font-color' : ''"
              @click="defaults"
            >
              默认
            </div>
            <template v-if="userInfo.show_price">
              <div
                class="item"
                :class="iSdefaults === 1 ? 'font-color' : ''"
                @click="priceSort('desc')"
                v-if="priceOrder === 'asc'"
              >
                价格
                <i class="el-icon-caret-top"></i>
              </div>
              <div
                class="item"
                :class="iSdefaults === 1 ? 'font-color' : ''"
                @click="priceSort('asc')"
                v-else-if="priceOrder === ''"
              >
                价格
                <i class="el-icon-d-caret"></i>
              </div>
              <div
                class="item"
                :class="iSdefaults === 1 ? 'font-color' : ''"
                @click="priceSort('')"
                v-else
              >
                价格
                <i class="el-icon-caret-bottom"></i>
              </div>
            </template>
            <!-- <div class="item" :class="iSdefaults === 2 ? 'font-color' : ''" @click="timeNews">
              上架时间
              <span class="iconfont icon-shangjiashijian" :class="news ? 'font-color' : ''"></span>
            </div>-->
          </div>
        </div>
      </div>

      <div class="nav_screen acea-row">
        <div class="name">全部</div>
        <div class="screen">
          <el-checkbox-group v-model="screenCheckList" @change="changeCategory">
            <el-checkbox
              :label="item"
              v-for="(item, index) in categoryList"
              :key="index"
              >{{ item.category_name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="content">
      <Guess
        v-if="commodityList.length"
        :guessTitle="false"
        :Page="Page"
        :guessList="commodityList"
        @changePage="changePage"
      ></Guess>
    </div>
  </div>
</template>
<script>
import Utils from "../assets/js/util.js";
import Guess from "@/components/guess.vue";
export default {
  components: { Guess },
  auth: false,
  data() {
    return {
      isSignin: localStorage.getItem("token") ? true : false,
      userInfo: {},
      keyword: "",
      categoryCurrent: [],
      current: 0,
      moreCurrent: 0,
      seen: false,
      titleName: "",
      erCurrent: 0,
      productslist: [],
      pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
      // page: 1, //代表页面的初始页数
      // limit: 4,
      scollY: null, // 离底部距离有多少
      pageTotal: 0, //总页数
      title: "下拉加载更多",
      cid: 0, //一级分类
      sid: 0, //二级分类
      sortNav: false,
      brandNav: false,
      brandList: [],
      brandCurrent: 0,
      brandArray: [],
      moreBrand: true,
      checkList: [],
      commodityList: [],
      //
      crumbsName: "商品",
      iSdefaults: 0,
      news: 0,
      priceOrder: "",
      sortType: "",
      screenCheckList: [],
      goods_ids: [],
      // 分类
      categoryList: [],
      Page: {
        total: 0,
        pageSize: 8,
        currentPage: 1,
      },
    };
  },
  async asyncData({ app, route }) {
    let [categoryData] = await Promise.all([
      //获取banner分类
      app.$axios.post("/goodscategory/tree"),
    ]);
    return {
      categoryList: categoryData.data,
    };
  },
  created() {
    // 已登录
    if (this.isSignin) {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
  },
  mounted() {
    var that = this;
    Utils.$on("demo", function (msg) {
      that.getCurrentData(msg);
    });
    this.Page = {
      total: 0,
      pageSize: 8,
      currentPage: 1,
    };
    // 判断页面是否从首页分类列表跳转到此页面
    let current = this.$route.query.current;
    //从首页跳转 路由携带分类下标
    if (current) {
      this.categoryList.map((item, index) => {
        if (index == current) {
          // 根据下标选中多选框并查询商品
          this.screenCheckList.push(item);
          this.getCurrentData([item.category_id], current);
        }
      });
    }
    //不是首页跳转，默认查询全部
    else {
      this.getCurrentData();
    }
  },
  methods: {
    // 初始数据
    getCurrentData(keyword) {
      let obj = {
        category_ids: this.goods_ids,
        page: this.Page.currentPage,
        page_size: this.Page.pageSize,
        sort: this.priceOrder,
        order: this.sortType,
        keyword: keyword,
        province_name: "成都",
      };
      this.$axios
        .post(`/goodssku/page`, obj)
        .then((res) => {
          res.data.list.forEach((item) => {
            item["num"] = 0;
          });
          this.commodityList = res.data.list;

          this.Page.total = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    changePage(e) {
      console.log(11111, e);
      this.Page.currentPage = e;
      this.getCurrentData();
    },
    changeCategory(val) {
      this.goods_ids = val.map((item) => {
        return item.category_id;
      });
      this.getCurrentData();
    },
    // 默认排序
    defaults() {
      this.iSdefaults = 0;
      this.sortType = "";
      this.getCurrentData();
    },
    // 价格排序
    priceSort(sort) {
      this.iSdefaults = 1;
      this.priceOrder = sort;
      this.sortType = "discount_price";
      this.getCurrentData();
    },
    timeNews() {
      this.iSdefaults = 2;
    },

    category(index) {
      this.moreBrand = true;
      this.current = index;
      this.moreCurrent = index;
      this.categoryCurrent = this.categoryList[index].children;
      this.titleName = this.categoryList[index].cate_name;
      this.iSdefaults = 0;
      this.productslist = [];
      this.pullRefreshss = true;
      this.page = 1;
      this.cid = this.categoryList[index].id;
      this.sid = 0;
      this.erCurrent = 0;
      this.priceOrder = "";
      this.news = 0;
      this.getBrandList();
      this.$router.push({
        path: "/goods_cate",
        query: {
          cid: this.cid,
          sid: this.sid,
          cidIndex: this.current,
          sidIndex: this.erCurrent,
        },
      });
    },
    moreItem(index) {
      this.moreBrand = true;
      this.moreCurrent = index;
      this.categoryCurrent = this.categoryList[index].children;
      this.titleName = this.categoryList[index].cate_name;
      this.iSdefaults = 0;
      this.seen = false;
      this.current = index;
      this.productslist = [];
      this.pullRefreshss = true;
      this.page = 1;
      this.cid = this.categoryList[index].id;
      this.sid = 0;
      this.erCurrent = 0;
      this.priceOrder = "";
      this.news = 0;
      this.getBrandList();
    },
    erCategory(id, index) {
      this.moreBrand = true;
      this.erCurrent = index;
      this.iSdefaults = 0;
      this.productslist = [];
      this.pullRefreshss = true;
      this.page = 1;
      this.sid = id;
      this.priceOrder = "";
      this.news = 0;
      this.getBrandList();
      this.$router.push({
        path: "/goods_cate",
        query: {
          cid: this.categoryList[this.current].id,
          sid: this.sid,
          cidIndex: this.current,
          sidIndex: this.erCurrent,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.goods_cate {
  // .crumbs {
  //   margin: 20px 0;
  // }
  .nav {
    width: 1198px;
    margin: 20px auto;
    min-height: 145px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(102, 102, 102, 0.28);
    border-radius: 6px;

    padding: 30px 30px 10px 30px;
    .nav_sort {
      display: flex;
      padding-bottom: 15px;
      border-bottom: 1px solid #eaeaea;
      .sort {
        display: flex;
        // margin-top: 20px;
        .acea-row {
          width: 1090px;
        }
        .item {
          margin: 0px 20px 10px 20px;
          &:hover {
            color: var(--themeColor);
            cursor: pointer;
          }
          .icon {
            font-size: 15px;
            margin-left: 5px;
          }
          .iconfont {
            font-size: 15px;
            color: #e2e2e2;
            margin-left: 5px;
          }
        }
      }
      /deep/ .el-button {
        color: #999;
        margin-right: 20px;
      }
      .btn_active {
        color: var(--themeColor);
      }
    }
    .nav_screen {
      display: flex;
      padding-top: 15px;

      /deep/.el-checkbox-group {
        width: 1090px;
        .el-checkbox {
          margin: 0px 20px 10px 20px;
        }
      }
    }
  }
  .content {
    min-height: 200px;
  }
}
</style>
