<template>
  <view class="good-list">
    <view class="sortbox">
      <view
        class="item"
        @click="change(0)"
        :style="{ color: msg.OrderBy == 0 ? mainColor : '#222' }"
        >综合</view
      >
      <view
        class="item"
        @click="change(1)"
        :style="{ color: msg.OrderBy == 1 ? mainColor : '#222' }"
        >最新</view
      >
      <view
        class="item"
        :style="{ color: msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222' }"
        style="display: flex; justify-content: center;"
        @click="change(2,1)"
      >
        <text>价格</text>
        <u-icon
          :name="msg.OrderBy == 2 ? 'descending' : 'ascending'"
          size="36"
          :color="msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222'"
        ></u-icon>
      </view>
      <view
        class="item"
        @click="change(4)"
        :style="{ color: msg.OrderBy == 4 ? mainColor : '#222' }"
        >销量</view
      >
    </view>
    <view
      v-if="g.length > 0"
      style="
        height: calc(100vh - 50px);
        width: calc(100vw - 20px);
        margin-left: 10px;
        overflow: hidden;
        padding-top: 10px;
      "
    >
      <scroll-view
        :scroll-y="true"
        @scrolltolower="lower"
        :enable-back-to-top="true"
        :enable-flex="true"
        :scroll-top="scrollTop"
        @scroll="scroll"
        style="height: 100%; padding-bottom: 0px;"
      >
        <goodlist :list="g"></goodlist>
        <u-loadmore
          v-if="showLoading"
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#F5F5F5"
        />
      </scroll-view>
    </view>
    <u-empty
      text="没有找到商品信息"
      font-size="36"
      mode="list"
      v-if="g.length == 0 && !loading"
    ></u-empty>
    <view class="quick" v-if="!loading">
      <view class="item">
        <u-icon name="cart-o" size="48" color="#333" />
      </view>
      <view class="item" @click="goTop">
        <u-icon name="arrow-up" size="48" color="#333" />
      </view>
    </view>
  </view>
</template>

<script>
import goodlist from '@/components/goods/list'
export default {
  data() {
    return {
      status: "loadmore",
      sortStatus: 1,
      mainColor: "",
      isover: false,
      loading: false,
      page: 1,
      page_count: 1,
      g: [],
      sort: 1,
      sortType: -1,
      catId: 0,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多商品了",
      },
      showLoading: false,
      sortShowType: 1,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
	  coupon_id:0,
	  msg:{
		  pageIndex:1,
		  pageSize:14,
		  Name:'',
		  GoodsType:0,
		  CategoryIds:'',
		  OrderBy:0,
	  },
	  newsortType:1,
    };
  },
  components:{
    goodlist
  },
  onLoad(option) {
	  console.log("option",option)
    this.mainColor = this.$uiConfig.mainColor;
    this.catId = option.cat_id;
	if(option.coupon_id!=undefined){
		this.coupon_id = option.coupon_id //优惠券带过来的参数
	}
	if(option.CategoryIds){
		this.msg.CategoryIds=option.CategoryIds;
	}
  },
  mounted() {
    this.init();
  },
  methods: {
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
    change(sort, t) {
      
	  if(t){
		  if(this.msg.OrderBy==2){
			  this.msg.OrderBy=3;
		  }else{
			  this.msg.OrderBy=2;
		  }
	  }else{
		  this.msg.OrderBy=sort;
	  }
      this.g = [];
      this.init();
    },
    init() {
      this.isover = false;
      this.loading = true;
      this.showLoading = this.msg.pageIndex != 1;
	  this.request2(
	  	{
	  		url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
	  		data: this.msg
	  	},
	  	res => {
	  		console.log("res",res);
	  		this.isloading = false;
	  		if(res.resultCode==1){
	  			    this.g = this.g.concat(res.data.pageData);
	  			    this.page_count = res.data.pageCount;
	  			    if (this.page_count == 1) {
	  			      this.isover = true;
	  			      this.status = "nomore";
	  			    } else {
	  			      this.status = "loadmore";
	  			    }
	  		}
	  		
	  		uni.hideNavigationBarLoading();
	  	}
	  );
      // this.request(
      //   {
      //     url: "",
      //     data: {
      //       r: "api/default/goods-list",
      //       page: this.page,
      //       cat_id: this.catId,
      //       sort: this.sort,
      //       sort_type: this.sortType,
      //       keyword: "",
      //       coupon_id: this.coupon_id,
      //     },
      //   },
      //   (res) => {
      //     this.showLoading = true;
      //     this.g = this.g.concat(res.data.list);
      //     this.page_count = res.data.pagination.page_count;
      //     if (this.page_count == 1) {
      //       this.isover = true;
      //       this.status = "nomore";
      //     } else {
      //       this.status = "loadmore";
      //     }
      //     this.loading = false;
      //   }
      // );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
          this.status = "loading";
          this.msg.pageIndex++;
          this.init();
      } else {
        this.isover = true;
        this.status = "nomore";
      }
    },
    clickHandler(u) {
      console.log(u)
      uni.navigateTo({
        url: u,
      });
    },
  },
};
</script>

<style>
.good-list {
  height: 100%;
  background: #f5f5f5;
  position: relative;
}
.good-list .quick {
  right: 50rpx;
  bottom: 50rpx;
  position: absolute;
}
.good-list .quick .item {
  background: #fff;
  border: 1px solid #aaa;
  height: 90rpx;
  width: 90rpx;
  color: #333;
  border-radius: 90rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.good-list .sortbox {
  display: flex;
  background: #fff;
}
.good-list .sortbox .item {
  height: 40px;
  line-height: 40px;
  flex: 1;
  text-align: center;
}

</style>
