<template>
  <div class="page page__nopad">
    <cr-tabs
      v-model="currentTab"
      title-inactive-color="#333"
      sticky-inactive-color="#333"
      sticky
      z-index="4"
      @change="handleTabChange"
    >
      <cr-tab v-for="(item, index) in navList" :key="index" :title="item.title" :name="index">
        <list
          :list="item.list"
          :loading="item.loading"
          :finished="item.finished"
          @load="handleLoad"
          @option-click="handleOptionClick"
          @finish-time="finishTimeChange"
        />
      </cr-tab>
    </cr-tabs>
  </div>
</template>
<script>
import groupBuyApi from '@/api/groupBuy';
import List from './components/List';
import { EventBus, firstGroupShare } from '@/service/utils.service';

const commonParams = {
  loading: false,
  finished: false,
  page: 1,
  pageSize: 5,
  list: []
};
export default {
  name: 'OrderList',
  components: {
    List
  },
  data() {
    return {
      sharePicData: {},
      showCancelPopup: false,
      showExpressPopup: false,
      currentTab: 0,
      // -1-全部  1-拼团中,未支付  2-拼团成功
      navList: [
        {
          status: -1,
          title: '全部',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 1,
          title: '拼团中',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 2,
          title: '已成团',
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ],
      currentOrder: {}
    };
  },
  mounted() {
    this.getstatusQuery();
    this.getList();
  },
  methods: {
    finishTimeChange() {
      // 倒计时结束之后刷新
      this.setNavListData('list', []);
      this.setNavListData('finished', false);
      this.setNavListData('page', 1);
      this.getList();
    },
    getstatusQuery() {
      const { status } = this.$route.params || {};
      status && (this.currentTab = Number(status));
      firstGroupShare(
        {
          skuName: '我的拼团',
          skuImg:
            'https://img.lkbang.net/activity/share/default/shareDefault.png?imageMogr2/thumbnail/500x500/quality/75/interlace/1'
        },
        1
      );
    },
    handleTabChange(name) {
      this.currentTab = name;
      this.getList();
    },
    handleLoad() {
      this.getList();
    },
    handleOptionClick(info) {
      this.currentOrder = info;
      switch (info.eventType) {
        case 'share':
          EventBus.$emit('goods_share_info', { shareInfo: info.orderNo, type: 1 });
          break;
        default:
          this.currentOrder = {};
          break;
      }
    },
    setNavListData(key, val) {
      this.$set(this.navList[this.currentTab], key, val);
    },
    async getList() {
      let { finished, page, pageSize, list, status } = this.navList[this.currentTab];
      if (finished) return;
      this.setNavListData('loading', true);
      const [res] = await groupBuyApi.getGroupOrderList({
        pageNo: page,
        pageSize,
        status
      });
      if (res?.records?.length) {
        this.setNavListData('loading', false);
        list = [...list, ...res.records];
        this.setNavListData('list', list);
        if (!res.hasNext) {
          this.setNavListData('finished', true);
        } else {
          page++;
          this.setNavListData('page', page);
        }
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
