<template>
  <view>
    <u-navbar :border-bottom="false" back-icon-color="#000000" :background="{ background: '#ffffff' }">
      <view class="pl-base w-full">
        <u-search @change="Change" placeholder=" " @search="Search"  v-model="searchText" :show-action="false"></u-search>
      </view>
      <view slot="right" class="pr-base" @tap="$u.routeAuth('/pages/auxiliary_cart/index')">
        <image class="w-48rpx h-48rpx" src="/static/images/cart/short-cart.png" mode="scaleToFill" />
      </view>
    </u-navbar>
    <!-- tabs -->
    <view
      class="fixed left-0 right-0 z-8 text-txGray text-lg w-full bg-white h-90rpx shadow-down flex items-center justify-around">
      <view @tap.stop="handType('')" :class="!sort?'text-primary':''">综合</view>
      <view @tap.stop="onPriceSort" class=" flex items-center "
        :class="(sort=='price'||sort=='-price')?'text-primary':''">
        <view>价格</view>
        <view>
          <trigonometry :key="'a'+key" direction="up" :color="sort=='price' ? '#378264' : '#808080'"></trigonometry>
          <trigonometry :key="'b'+key" direction="down" :color="sort=='-price' ? '#378264' : '#808080'"></trigonometry>
        </view>
      </view>
      <view @tap.stop="onSaleSort" :class="(sort=='sales'||sort=='-sales')?'text-primary':''"
        class=" flex items-center ">
        <view>销量</view>
        <view class="flex items-center justify-center flex-col ml-5rpx">
          <trigonometry :key="'c'+key" direction="up" :color="sort=='sales' ? '#378264' : '#808080'"></trigonometry>
          <trigonometry :key="'d'+key" direction="down" :color="sort=='-sales' ? '#378264' : '#808080'"></trigonometry>
        </view>
      </view>
      <view @tap.stop="handType('release_at')" :class="sort=='release_at'?'text-primary':''">上新</view>
    </view>
    <mescroll-body top="90" :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
      @up="upCallback" :down="downOption" :up="upOption">
      <view class="px-rowSm mt-20rpx">
        <u-waterfall v-model="dataList" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
              <goods-item :goods="item"></goods-item>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
              <goods-item :goods="item"></goods-item>
            </view>
          </template>
        </u-waterfall>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        key: 0,
        sort: '', //price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
        searchText: '',
        category:'',
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    onLoad({ searchText,category}) {
      this.searchText = searchText
      this.category = category
    },
    methods: {
      Change(e) {
        if (e == '') uni.navigateBack()
      },
      Search(){
        this.category=''
        this.downCallback()
      },
      downCallback() {
        this.dataList = []
        this.$refs.uWaterfall.clear();
        this.mescroll.resetUpScroll();
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        let obj = {
          page: page.num,
          per_page: page.size,
          category:this.category ,
          keyword: this.searchText,
          sort: this.sort
        }
        this.$api.get(`/v1/product/products`, {
          params: obj
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
      //筛选
      handType(val) {
        if (this.sort == val) return;
        this.$u.throttle(() => {
          this.sort = val
          this.downCallback()
        })
      },
      //价格排序
      onPriceSort() {
        this.Refresh()
        this.sort = this.sort == 'price' ? '-price' : 'price'
        this.downCallback()
      },
      //销量排序
      onSaleSort() {
        this.Refresh()
        this.sort = this.sort == 'sales' ? '-sales' : 'sales'
        this.downCallback()
      },
      //刷新子组件
      Refresh() {
        this.$nextTick(() => {
          this.key++;
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
