<template>
  <view class="dec-goodList" v-if="showGoods.length > 0">
    <view class="group-tab">
      <view class="tab-wrap" :style="fixedStyle">
        <view
          v-for="(item, i) in tabs"
          :key="item"
          class="tab-item"
          :class="{ active: activeTab == i }"
          @tap="tabClick(i)"
        >
          <text class="text">{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="group-wrap">
      <view
        v-for="key in groups"
        :key="key"
        class="group two-group"
        style="width: 50%"
      >
        <goodWrap
          moudle="goodIntegral"
          v-for="code in showGoods"
          :key="code"
          arg="two"
          :groupKey="key"
          :goodKey="code"
        />
      </view>
    </view>
    <li-load-more v-if="arg.autoLoad == 'Y'" :status="loadMore" />
  </view>
</template>

<script>
// 设置列表
import variable from "../style/variable.js";
import goodWrap from "./goodWrap";
export default {
  inject: ["decAxios", "decImgDomain"],
  components: { goodWrap },
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      loadMore: "",
      arg: {},
      show: null,
      isStatic: false,
      activeTab: 0,
      fixedStyle: "",
      tabs: ["全部", "1-1000", "1001-5000", "5001-10000", "10000以上"],
      groups: ["left", "right"], //数据组
      allGoods: {}, //所有数据集合
      showGoods: [], //显示的商品数据
      pager: {
        tab: 0,
        pages: 0,
        pageNo: 0, //页面页码
        pageSize: 30,
      },
      img: {
        h2: "",
      },
    };
  },
  onUnload() {
    this.loadMore = "";
  },
  created() {
    this.arg = this.tab.arg;
    this.show = this.arg.show;
    //图片直接默认是正方形图片
    const w2 = variable["@phoneWidth"] - variable["@space"] * 3;
    const h2 = parseInt(w2 * 50);
    this.img.h2 = uni.upx2px(h2) / 100 + "px";
    this.pager.pageNo = 0;
    this.initApiData(true);
  },
  methods: {
    tabClick(index) {
      if (this.activeTab != index) {
        (this.pager = {
          tab: index,
          pages: 0,
          pageNo: 0,
          pageSize: 30,
        }),
          this.initApiData(true);
      }
    },
    initApiData(isInit) {
      if (!this.loading) {
        this.loading = true;
        const api = this.decAxios.getGoodIntegralData;
        const { tab, pages, pageSize } = this.pager;
        let pageNo = this.pager.pageNo;
        pageNo = pageNo + 1;
        //处理参数
        let params = { range: this.tabs[tab] };
        if (this.arg.autoLoad == "Y") {
          params = Object.assign({}, params, { pageNo, pageSize });
        } else {
          const pageSize2 = this.arg.dataNum || pageSize;
          params = Object.assign({}, params, { pageNo, pageSize: pageSize2 });
        }
        //获取数据
        api(params).then((res) => {
          this.loading = false;
          const result = res.result || {};
          const records =
            res.code == "200" ? result.records || result || [] : [];
          const goodList = this.listStyleChange(records) || { left: [] };
          const pageKey = `${tab}-${pageNo}-${pageSize}`;

          //加入到数据源中
          if (pageNo == 1) {
            this.allGoods = {};
            this.showGoods = [];
          }
          this.groups.forEach((val) => {
            const key = `${val}-${pageKey}`;
            this.allGoods[key] = goodList[val];
          });
          //页码更新
          this.activeTab = tab;
          this.pager.pages = result.pages || 1;
          this.pager.pageNo = params.pageNo || 1;
          //初次加载需要进行额外请求一次
          if (isInit) {
            this.reachBottomFn();
            if (this.arg.autoLoad == "Y") this.$emit("inited");
          } else {
            this.loadMore = "";
          }
        });
      }
    },
    reachBottomFn() {
      const { tab, pageNo, pageSize, pages } = this.pager;
      const showKey = `${tab}-${pageNo}-${pageSize}`;
      this.loadMore = "";
      if (this.arg.autoLoad != "Y" || this.loading) {
        if (!this.showGoods.includes(showKey)) this.showGoods.push(showKey);
      } else if (pageNo > 0 && pageNo == pages) {
        if (!this.showGoods.includes(showKey)) this.showGoods.push(showKey);
        this.loadMore = "noMore";
      } else {
        this.loadMore = "loading";
        if (!this.showGoods.includes(showKey)) this.showGoods.push(showKey);
        this.initApiData();
      }
    },
    setTabFixed(val, fixTop) {
      const fixedStyle = val ? `position:fixed;top:${fixTop}px;left:0;` : "";
      this.fixedStyle = fixedStyle;
    },
    listStyleChange(res) {
      let newRes = { right: [], left: [] };
      res.forEach((item, i) => {
        if ((i + 1) % 2 == 1) {
          newRes.left.push(item);
        } else {
          newRes.right.push(item);
        }
      });
      return newRes;
    },
  },
};
</script>
