<template>
  <view class="search">
    <view class="search-list">
      <view class="navbar">
        <view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">
          综合
        </view>
        <view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">
          <text class="p-title" :class="{ active: filterIndex === 1 }">价格</text>
          <view class="p-box">
            <text
              class="iconfont icon-sort-up-round"
              :class="{ active: searchParam.rankType === 2 && filterIndex === 1 }"
            />
            <text
              class="iconfont icon-sort-down-round"
              :class="{ active: searchParam.rankType === 3 && filterIndex === 1 }"
            />
          </view>
        </view>
        <view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
          <text class="p-title" :class="{ active: filterIndex === 2 }">销量</text>
          <view class="p-box">
            <text
              class="iconfont icon-sort-up-round"
              :class="{ active: searchParam.rankType === 4 && filterIndex === 2 }"
            />
            <text
              class="iconfont icon-sort-down-round"
              :class="{ active: searchParam.rankType === 5 && filterIndex === 2 }"
            />
          </view>
        </view>
      </view>
      <view v-if="!goodsList.length && loadingType === 'noMore'" class="home-container-noData"
        >没有找到相关宝贝哦～</view
      >
      <scroll-view
        v-else
        class="home-container"
        scroll-y
        :scroll-top="tabScrollTop"
        scroll-with-animation
        @scrolltolower="loadData"
        @scroll="pageScroll"
      >
        <goods-list :goods-list.sync="goodsList" />
        <uni-load-more :status="loadingType" />
      </scroll-view>
    </view>
    <view class="goods-top">
      <to-top :scroll-top="scrollTop" @toTop="toTop" />
    </view>
  </view>
</template>
<script>
import goodsList from "@/components/goodsList";
import { landingSearch } from "@/api/home.api.js";
import toTop from "@/components/toTop";
import { mapState } from "vuex";
export default {
  components: {
    goodsList,
    toTop
  },
  data() {
    return {
      pageForm: {
        pageNo: 1,
        pageSize: 10
      },
      searchParam: {
        rankType: 1 //排序类型 1:综合; 2:价格倒序; 3: 价格 正序; 4. 销量倒序; 5: 销量正序;
      },
      filterIndex: 0,
      goodsList: [],
      loadingType: "loading",
      tabScrollTop: 0,
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    };
  },
  computed: {
    ...mapState(["cartCount"])
  },
  onShow() {
    console.log("cartCount-----landing", this.cartCount);
  },
  onLoad(option) {
    if (option.mark == "urlScheme") {
      option.title = this.UnicodeAnalysis(option.title.replace(/#/g, "\\"));
      uni.setStorageSync("is_landingpage", 1);
    }
    if (!option.categoryIds && option.categoryId) option.categoryIds = option.categoryId;
    uni.setNavigationBarTitle({
      title: option.title
    });
    this.searchParam = {
      ...this.searchParam,
      labelIds: option.labelId,
      rearCategoryIds: option.categoryIds
    };
    this.search();
  },
  methods: {
    async search() {
      this.loadingType = "loading";
      this.goodsList = [];
      this.pageForm.pageNo = 1;
      let searchCount = 10;
      // eslint-disable-next-line
        const firstSearch = async () =>{
        searchCount--;
        if (!searchCount || this.loadingType === "noMore" || this.goodsList.length) {
          return;
        }
        const [res] = await landingSearch({ ...this.searchParam, ...this.pageForm });
        if (res) {
          this.pageForm.pageNo++;
          this.goodsList = (res && res.goodsList) || [];
          this.searchParam.searchId = res.searchId;
        }

        this.loadingType = res && res.hasNext ? "more" : "noMore";
        return firstSearch();
      };
      firstSearch();
    },
    async loadData() {
      if (this.loadingType === "noMore") {
        return;
      }
      this.pageForm.pageNo++;
      this.loadingType = "loading";
      const [res] = await landingSearch({ ...this.searchParam, ...this.pageForm });
      if (res) {
        if (res.goodsList) {
          this.goodsList = [...this.goodsList, ...res.goodsList];
        }
        this.searchParam.searchId = res.searchId;
        this.loadingType = res.hasNext ? "more" : "noMore";
      } else {
        this.loadingType = "noMore";
      }
    },
    UnicodeAnalysis(v) {
      if (!v) return "";
      v = v.split("\\u");
      var str = "";
      for (var i = 0, len = v.length; i < len; i++) {
        if (v[i]) {
          str += String.fromCharCode(parseInt(v[i], 16).toString(10));
        }
      }
      return str;
    },
    tabClick(rankType) {
      this.filterIndex = rankType;
      switch (rankType) {
        case 0:
          this.searchParam.rankType = 1;
          break;
        case 1:
          this.searchParam.rankType === 2
            ? (this.searchParam.rankType = 3)
            : (this.searchParam.rankType = 2);
          break;
        case 2:
          this.searchParam.rankType === 5
            ? (this.searchParam.rankType = 4)
            : (this.searchParam.rankType = 5);
          break;
      }
      this.search();
    },
    pageScroll(val) {
      this.scrollTop = val.detail.scrollTop;
      this.old.scrollTop = val.detail.scrollTop;
    },
    //滚动到顶部
    toTop() {
      this.tabScrollTop = this.old.scrollTop;
      this.$nextTick(function() {
        this.tabScrollTop = 0;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/icon.scss";

.search {
  height: 100vh;
  background: $white;
  &-list {
    height: calc(100% - 80rpx);
    .navbar {
      display: flex;
      width: 100%;
      height: 80rpx;
      background: $white;
      z-index: 10;
      box-shadow: 0rpx 20rpx 24rpx -20rpx rgba(100, 101, 102, 0.08);
      .nav-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: $font-lg;
        // color: $font-color-base;
        color: $font-color-light;
        position: relative;
        &.current {
          color: $font-color-dark;
          font-weight: bold;
        }
      }
      .p-title {
        line-height: 30rpx;
        &.active {
          font-weight: bold;
        }
      }
      .p-box {
        display: flex;
        flex-direction: column;
        margin-left: 4rpx;
        margin-top: 4rpx;
        justify-content: center;

        text {
          font-size: 20rpx;
          color: #999;
          &.active {
            color: $font-color-dark;
            font-weight: bold;
          }
          &:nth-child(1) {
            margin-bottom: -19rpx;
          }
        }

        // .yticon{
        // 	display: flex;
        // 	align-items: center;
        // 	justify-content: center;
        // 	width: 30rpx;
        // 	height: 14rpx;
        // 	line-height: 1;
        // 	margin-left: 4rpx;
        // 	font-size: $font-md;
        // 	color: $text-color-n2;
        // 	&.active{
        // 		color: $font-color-dark;
        // 	}
        // }
        // .xia{
        // 	transform: scaleY(-1);
        // }
      }
    }
    .home-container {
      height: calc(100% - 0rpx);
      &-noData {
        font-size: 30rpx;
        color: #999;
        text-align: center;
        margin-top: 250rpx;
      }
    }
  }
}
</style>
