<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>
    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :style="{ height: '100%' }">
      <!-- 空布局 -->
      <mescroll-empty v-if="!isTabChange && goodsList.length === 0"></mescroll-empty>
      <yi-goods-list :list="goodsList" @goToGoodsDetail="goToGoodsDetail"></yi-goods-list>

      <!-- 适配iPhoneX -->
      <view class="mescroll-safearea"></view>
    </mescroll-body>
  </view>
</template>

<script>
import { queryGoodsList } from '../../mall/api';
import MescrollBody from '@/components/mescroll-uni/mescroll-body';
import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty';
import MeScrollMixin from '@/components/mescroll-uni/mescroll-mixins';
import { mapState } from 'vuex';
export default {
  name: 'goodsListDemo',
  components: {
    MescrollBody,
    MescrollEmpty,
  },
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
    }),
  },
  mixins: [MeScrollMixin],
  data() {
    return {
      category: null,
      curTab: '-createTime',
      goodsList: [],
      goodsListMeta: null,
      isTabChange: false,
    };
  },
  onLoad(options) {
    if (options.category) {
      this.category = options.category;
    }
  },
  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.mescroll.resetUpScroll();
    },
    // 格式化参数
    formatParams(pageNum) {
      let keyJson = { kind$ne$: 'active' };
      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;
      }
    },
    // 跳转页面
    navigateToPage(url) {
      uni.navigateTo({
        url,
      });
    },
    // 跳转到商品详情
    goToGoodsDetail(mid) {
      this.navigateToPage('/demo/packageMall/goods?mid=' + mid);
    },

    /*下拉刷新的回调 */
    async downCallback() {
      console.log('%c [下拉刷新的回调]: ', 'color:#1989fa;');
      this.isTabChange = false;
      if (this.mescroll) {
        this.mescroll.resetUpScroll();
      }
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    async upCallback(page) {
      console.log('%c [上拉加载的回调]: ', 'color:#1989fa;', page.num);
      const { data, meta } = await this.getGoodsList(page.num - 1);
      if (page.num === 1) {
        this.goodsList = [];
      }
      this.goodsList = this.goodsList.concat(data);
      this.goodsListMeta = meta;
      this.isTabChange = false;
      this.mescroll.endSuccess(meta.count);
    },
  },
};
</script>

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

.goods-list-page {
  background-color: #f8f8f8;
  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;
      }
    }
  }
}
</style>
