<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" :background="{ background: '#ffffff' }">
      <view class="pl-base w-full" @tap="$u.route('/pages/search/search')">
        <u-search disabled placeholder="搜索商品名称" :show-action="false"></u-search>
      </view>
      <template #right>
        <view class="mx-base relative" @tap="$u.routeAuth('/pageA/news/index')">
          <u-icon name="chat" size="48"></u-icon>
          <block v-if="news_num > 0">
            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
          </block>
        </view>
      </template>
    </u-navbar>
    <view class="rounded-b-md bg-white fixed top-0 left-0 w-full z-50">
      <view class="w-full" :style="[{ height: StatusBar + 44 + 'px' }]"></view>
      <u-tabs
        class="cu-tabs w-full"
        active-color="#378264"
        inactive-color="#808080"
        height="60"
        bar-height="8"
        :list="tabsList"
        :is-scroll="true"
        :current="tabsCurrent"
        @change="tabChange"
      ></u-tabs>
      <view class="h-80rpx flex justify-between items-center px-40rpx">
        <view class="text-txGray text-lg" :class="filterSort == '' ? 'text-primary' : ''" @tap="onChangeFilter('')">综合 </view>
        <view
          class="text-txGray text-lg flex items-center"
          :class="filterSort == 'price' || filterSort == '-price' ? 'text-primary' : ''"
          @tap="onPriceSort"
        >
          <text> 价格 </text>
          <view>
            <trigonometry :key="'a' + key" direction="up" :color="filterSort == 'price' ? '#378264' : '#808080'"> </trigonometry>
            <trigonometry :key="'b' + key" direction="down" :color="filterSort == '-price' ? '#378264' : '#808080'"> </trigonometry>
          </view>
        </view>
        <view
          class="text-txGray text-lg flex items-center"
          :class="filterSort == 'sales' || filterSort == '-sales' ? 'text-primary' : ''"
          @tap="onSaleSort"
        >
          <text> 销量 </text>
          <view>
            <trigonometry :key="'c' + key" direction="up" :color="filterSort == 'sales' ? '#378264' : '#808080'"> </trigonometry>
            <trigonometry :key="'d' + key" direction="down" :color="filterSort == '-sales' ? '#378264' : '#808080'"> </trigonometry>
          </view>
        </view>
        <view class="text-txGray text-lg" :class="filterSort == 'release_at' ? 'text-primary' : ''" @tap="onChangeFilter('release_at')">上新</view>
      </view>
    </view>

    <mescroll-body
      :height="height"
      :bottombar="false"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
    >
      <view class="px-rowSm mt-20rpx pt-base" :style="[{ marginTop: 150 + 'rpx' }]">
        <!-- <view class="grid grid-cols-2 gap-x-10rpx px-10rpx gap-y-20rpx">
          <goods-item v-for="(item, index) in goods" :goods="item" :key="index"></goods-item>
        </view> -->
        <goods-list ref="uWaterfall" :list="goods"></goods-list>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import CartMixin from '@/pages/shop_cart/mixin';
export default {
  mixins: [MescrollMixin, CartMixin],
  data() {
    return {
      key: 0,
      firstLoading: true,
      tabsCurrent: 0,
      tabsList: [],
      filter: {
        sort: '', //排序：price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
      },
      downOption: {
        // use: false,
      },
      upOption: {
        auto: false,
      },
    };
  },
  computed: {
    StatusBar() {
      const { statusBarHeight } = this.$u.sys();
      return statusBarHeight;
    },
    filterSort() {
      return this.filter.sort;
    },
    goods() {
      return this.tabsList[this.tabsCurrent]?.goods ?? [];
    },
    height() {
      const { windowHeight, statusBarHeight } = this.$u.sys();
      return windowHeight - statusBarHeight - 44 + 'px';
    },
  },
  onShow() {
    const params = uni.getStorageSync('/pages/sort/index') ?? '';
    uni.removeStorageSync('/pages/sort/index');
    this.id = params.id;
    if (!!this.id && this.tabsList.length > 0) {
      const index = this.tabsList?.findIndex(({ id }) => id == this.id);
      if (index != this.tabsCurrent) {
       setTimeout(()=>{
           this.tabChange(index >= 0 ? index : 0);
       },200)
      }
    }
  },
  methods: {
    async downCallback() {
      this.mescroll.resetUpScroll();
    },
    async upCallback(page) {
      if (this.firstLoading) {
        await this.getCategories();
      }
      this.getGoodsList(page);
      this.firstLoading = false;
    },
    //改变筛选条件
    onChangeFilter(type) {
      if (type == this.filter.sort) return;
      this.$u.throttle(() => {
        this.$refs.uWaterfall.clear();
        this.$nextTick(() => {
          this.filter.sort = type;
          this.mescroll.resetUpScroll();
        });
      });
    },
    //价格排序
    onPriceSort() {
      this.Refresh();
      const type = this.filter.sort == 'price' ? '-price' : 'price';
      this.onChangeFilter(type);
    },
    //销量排序
    onSaleSort() {
      this.Refresh();
      const type = this.filter.sort == 'sales' ? '-sales' : 'sales';
      this.onChangeFilter(type);
    },
    //刷新子组件
    Refresh() {
      this.$nextTick(() => {
        this.key++;
      });
    },
    // 切换
    tabChange(index) {
      this.filter.sort = '';
      if (!this.tabsCurrent) this.tabsCurrent = 0;

      this.$refs.uWaterfall.clear();
    
      this.$nextTick(() => {
        console.log("=======");
        console.log(index);
        let preTab = this.tabsList[this.tabsCurrent];
        preTab.y = this.mescroll.getScrollTop();
        this.tabsCurrent = index;
        
        const curTab = this.tabsList[index];
        if (!curTab.goods) {
          this.mescroll.resetUpScroll();
        } else {
          this.mescroll.setPageNum(curTab.num + 1);
          this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext);
          this.$nextTick(() => {
            this.mescroll.scrollTo(curTab.y, 0);
          });
        }
      });
    },
    async getCategories() {
      return new Promise((resolve, reject) => {
        this.$api
          .get('/v1/product/categories')
          .then((resData) => {
            resData.unshift({
              icon: "",
              id: -999,
              name: "全部"
            })
            this.tabsList = resData.map((e) => {
              return {
                ...e,
                num: 1,
                y: 0,
                curPageLen: 0,
                hasNext: true,
                goods: null,
              };
            });
            if (!!this.id) {
              const index = resData.findIndex(({ id }) => id == this.id);
              this.tabChange(index >= 0 ? index : 0);
            }
            resolve(resData);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    async getGoodsList({ num, size }) {
      let keyword = this.tabsList[this.tabsCurrent].id;
      try {
        const resData = await this.$api.get('/v1/product/products', {
          params: {
            sort: this.filter.sort,
            per_page: size,
            page: num,
            category: keyword == -999 ? '' : keyword,
          },
        });
        const { data } = resData;
        let curTab = this.tabsList[this.tabsCurrent];
        if (num === 1) curTab.goods = [];
        curTab.goods = curTab.goods.concat(data);
        curTab.num = num;
        curTab.curPageLen = data.length;
        curTab.hasNext = this.mescroll.optUp.hasNext;
        this.mescroll.endSuccess(data.length, size == data.length);
      } catch (error) {
        this.mescroll.endErr();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.badge {
  @apply bg-badge;
}
</style>
