<template>
  <view class="goods-list-page">
    <view class="tab-list" :style="{ '--primary-color': primaryColor }">
      <view
        class="tab-item"
        :class="{ 'tab-item-active': curTab === '-createTime' }"
        @click="onClickTab('-createTime')"
      >
        <text class="tab-item-text">新品</text>
      </view>
      <view class="tab-item" :class="{ 'tab-item-active': curTab === '-sellSpu' }" @click="onClickTab('-sellSpu')">
        <text class="tab-item-text">销量</text>
      </view>
      <view class="tab-item" :class="{ 'tab-item-active': curTab === '-priceFrom' }" @click="onClickTab('-priceFrom')">
        <text class="tab-item-text">价格降序</text>
      </view>
      <view class="tab-item" :class="{ 'tab-item-active': curTab === 'priceFrom' }" @click="onClickTab('priceFrom')">
        <text class="tab-item-text">价格升序</text>
      </view>
    </view>
    <view class="goods-list-wrap">
      <!--      <u-waterfall v-model="goodsList" ref="uWaterfall" idKey="mid">-->
      <!--        <template v-slot:left="{ leftList }">-->
      <!--          <yi-goods-item-->
      <!--            v-for="(item, index) in leftList"-->
      <!--            position="left"-->
      <!--            :key="index"-->
      <!--            :index="index"-->
      <!--            :mid="item.mid"-->
      <!--            :icon-spu="item.iconSpu"-->
      <!--            :name-spu="item.nameSpu"-->
      <!--            :price-old="item.priceOldFrom"-->
      <!--            :price="item.priceFrom"-->
      <!--            @click="goToGoodsDetail"-->
      <!--          ></yi-goods-item>-->
      <!--        </template>-->
      <!--        <template v-slot:right="{ rightList }">-->
      <!--          <yi-goods-item-->
      <!--            v-for="(item, index) in rightList"-->
      <!--            position="right"-->
      <!--            :key="index"-->
      <!--            :index="index"-->
      <!--            :mid="item.mid"-->
      <!--            :icon-spu="item.iconSpu"-->
      <!--            :name-spu="item.nameSpu"-->
      <!--            :price-old="item.priceOldFrom"-->
      <!--            :price="item.priceFrom"-->
      <!--            @click="goToGoodsDetail"-->
      <!--          ></yi-goods-item>-->
      <!--        </template>-->
      <!--      </u-waterfall>-->
      <u-loadmore
        bg-color="rgb(240, 240, 240)"
        :load-text="loadText"
        :status="loadStatus"
        @loadmore="loadMoreGoodsList"
      ></u-loadmore>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { queryGoodsList } from '../../mall/api';
import { Setting } from '@';
export default {
  name: 'goodsWaterfall',
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
    }),
  },
  data() {
    return {
      category: null,
      curTab: '-createTime',
      goodsList: [],
      goodsListMeta: null,
      isTabChange: false,
      loadStatus: 'loadmore',
      loadText: {
        loadmore: '上拉加载更多 ',
        loading: '努力加载中',
        nomore: '暂无更多数据',
      },
    };
  },
  async onLoad(options) {
    if (options.category) {
      this.category = options.category;
    }
    await this.initGoodsList();
  },
  async onPullDownRefresh() {
    await this.initGoodsList();
    await uni.stopPullDownRefresh();
  },
  async onReachBottom() {
    await this.loadMoreGoodsList();
  },
  methods: {
    // 点击 tab 排序
    async onClickTab(tabName) {
      this.isTabChange = true;
      // console.log('%c [点击 tab 排序]: ', 'color:#1989fa;', tabName);
      if (tabName === this.curTab) {
        this.curTab = '';
      } else {
        this.curTab = tabName;
      }
      console.log('%c [点击 tab 排序 222]: ', 'color:#1989fa;', this.curTab);
      this.goodsList = [];
      this.$refs.uWaterfall.clear();
      await this.initGoodsList();
      console.log('%c [点击 tab 排序 333]: ', 'color:#1989fa;', this.goodsList);
    },
    // 格式化参数
    formatParams(pageNum) {
      let keyJson = {};
      let sort = [];
      if (this.category) {
        keyJson.category = this.category;
      }
      // if (this.storeId) {
      //   keyJson.sid = this.storeId;
      // }
      // if (this.searchKey) {
      //   keyJson['nameSpu$like$'] = `%${this.searchKey}%`;
      // }

      const parameters = {
        query: {
          limit: 10,
          page: pageNum,
        },
      };
      if (this.curTab !== '') {
        sort.push(this.curTab);
      }
      if (sort.length > 0) {
        parameters.query.sort = sort;
      }
      if (Object.keys(keyJson).length > 0) {
        parameters.query.keyJson = JSON.stringify(keyJson);
      }
      return parameters;
    },
    async getGoodsList(page = 0) {
      try {
        const params = this.formatParams(page);
        return await queryGoodsList(params);
      } catch (e) {
        console.log('err', e);
        throw e;
      }
    },
    // 获取商品列表
    async initGoodsList() {
      const { data, meta } = await this.getGoodsList();
      data.forEach(item => {
        item.iconSpu = Setting.getImgPath() + item.iconSpu;
      });
      this.goodsList = this.goodsList.concat(data);
      this.goodsListMeta = meta;
      return this.goodsList;
    },
    // 上拉加载更多商品列表的回调
    async loadMoreGoodsList() {
      if (this.goodsListMeta.num < 10 || this.goodsListMeta.num === null) {
        this.loadStatus = 'nomore';
        return;
      }
      this.loadStatus = 'loading';
      const { data, meta } = await this.getGoodsList(this.goodsListMeta.page + 1);
      data.forEach(item => {
        item.iconSpu = Setting.getImgPath() + item.iconSpu;
      });
      this.goodsList = this.goodsList.concat(data);
      this.goodsListMeta = meta;
      this.loadStatus = 'loadmore';
    },
    // 跳转页面
    navigateToPage(url) {
      uni.navigateTo({
        url,
      });
    },
    // 跳转到商品详情
    goToGoodsDetail(mid) {
      this.navigateToPage('/demo/packageMall/goods?mid=' + mid);
    },
  },
};
</script>

<style scoped lang="scss">
$primary-color: var(--primary-color);

.goods-list-page {
  background-color: #f1f1f1;
  min-height: 100vh;
  position: relative;
  .tab-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2020;
    .tab-item {
      flex: 1;
      padding: 20rpx 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .tab-item-text {
        text-align: center;
        font-size: 28rpx;
        color: #555;
      }
    }
    .tab-item-active {
      .tab-item-text {
        color: $primary-color;
      }
    }
  }
  .goods-list-wrap {
    margin-top: 40px;
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  }
}
</style>
