<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"
        />
      </cr-tab>
    </cr-tabs>

    <!-- <cr-action-sheet
      v-model="showExpressPopup"
      title="请选择物流单号"
      cancel-txt="关闭"
      round
      :actions="expressActions"
      @click="toExpress"
    /> -->
  </div>
</template>
<script>
import groupBuyApi from '@/api/groupBuy';
import List from './components/List';
import { isApp } from '@/service/validation.service';
import localStorage from '@/service/localStorage.service';
const commonParams = {
  loading: false,
  finished: false,
  page: 1,
  pageSize: 5,
  list: []
};
export default {
  name: 'OrderList',
  components: {
    List
  },
  data() {
    return {
      isApp,
      showCancelPopup: false,
      showExpressPopup: false,
      currentTab: 0,
      // 0-全部 1 -拼团中  2-拼团成功
      navList: [
        {
          status: 0,
          title: '全部',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 1,
          title: '拼团中',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 2,
          title: '已成团',
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ],
      currentOrder: {},
      expressActions: [],
      orderStatusInfo: {}
    };
  },
  mounted() {
    this.getstatusQuery();
    this.getList();
    // this.$track.registeredEvents('H5_2B_MyOrderPageExposure');
  },
  methods: {
    getstatusQuery() {
      const { status } = this.$route.params || {};
      status && (this.currentTab = Number(status));
    },
    handleTabChange(name) {
      this.currentTab = name;
      this.getList();
    },
    handleLoad() {
      this.getList();
    },
    handleOptionClick(info) {
      const { orderInfo } = info || {};
      const { cashCouponCancelNote, showCashCouponCancelNote } = orderInfo || {};
      this.currentOrder = orderInfo;
      switch (info.eventType) {
        case 'cancel':
          this.orderCancelPopup();
          break;
        case 'pay':
          this.toPay();
          break;
        case 'notify':
          this.orderNotify();
          break;
        case 'again':
          this.toGoods();
          break;
        case 'logistics':
          this.expressActionsCheck();
          break;
        case 'confirm':
          this.orderConfirmPopup();
          break;
        case 'toRefund':
          this.orderRefundPopup(cashCouponCancelNote, showCashCouponCancelNote);
          break;
        case 'refund':
          this.toRefund();
          break;
        default:
          this.currentOrder = {};
          break;
      }
    },
    orderRefundPopup(cashCouponCancelNote, showCashCouponCancelNote) {
      let tips = {
        message: this.currentOrder.cancelNote || '宝贝马上就要发货了，您真的要取消吗？',
        confirmButtonText: '仍要取消',
        cancelButtonText: '留下商品',
        onConfirm: () => {
          this.showCancelPopup = true;
        }
      };
      if (
        this.currentOrder.skuList[0].skuSource === 5 ||
        this.currentOrder.skuList[0].skuSource === 6
      ) {
        tips = {
          message: '该商品暂不支持取消，您可以在收货时直接拒收，钱款原路退回付款账户中',
          confirmButtonText: '知道了',
          showCancelButton: false
        };
      }
      if (showCashCouponCancelNote) {
        tips = {
          message: cashCouponCancelNote,
          confirmButtonText: '确认退货',
          cancelButtonText: '不退了',
          onConfirm: () => {
            this.showCancelPopup = true;
          }
        };
      }
      this.$dialog(tips);
    },
    orderCancelPopup() {
      this.showCancelPopup = true;
    },
    // 售后中
    toRefund() {
      if (this.currentOrder.currentSku.havingService) {
        localStorage.set('orderInfo', this.currentOrder);
        this.$router.push({
          name: 'refundDetail'
        });
        return;
      }
      if ([2, 5, 6].indexOf(this.currentOrder.currentSku.skuSource) > -1) {
        this.$dialog({
          message: '您购买的商品确认收货后才可以申请售后哦！',
          confirmButtonText: '知道了',
          showCancelButton: false
        });
        return;
      }
    },
    toPay() {
      this.$router.push({ name: 'pay', query: { orderNo: this.currentOrder.orderNo } });
    },
    toGoods() {
      this.$router.push({
        path: '/goodDetail',
        query: { skuNo: this.currentOrder.skuList[0].skuNo }
      });
    },
    orderConfirmPopup() {
      if (!this.currentOrder.orderNo) return;
      // this.$dialog({
      //   title: '确定该订单已收货吗？',
      //   onConfirm: () => {
      //     orderApi
      //       .orderConfirm({
      //         orderNo: this.currentOrder.orderNo,
      //         status: 41
      //       })
      //       .then(res => {
      //         if (res[0]) {
      //           this.updateCurrentOrder(41, '交易完成');
      //           this.$toast('操作成功');
      //         }
      //       });
      //   }
      // });
    },
    handleCancelstatus() {
      this.updateCurrentOrder(51, '交易关闭');
    },
    updateCurrentOrder(status, txt) {
      this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, status);
      this.$set(
        this.navList[this.currentTab].list[this.currentOrder.index],
        `orderStatusText`,
        txt
      );
    },
    expressActionsCheck() {
      const { expressInfoList } = this.currentOrder;
      if (expressInfoList.length > 1) {
        this.expressActions = expressInfoList.map(item => {
          return {
            name: item.deliveryNo,
            deliveryNo: item.deliveryNo,
            expressCompanyCode: item.expressCompanyCode
          };
        });
        this.showExpressPopup = true;
      } else {
        this.toExpress(expressInfoList[0]);
      }
    },
    toExpress(item) {
      this.$router.push({
        path: '/expressDetail',
        query: { ...item, deliveryOrderId: this.currentOrder.orderNo }
      });
    },
    orderNotify() {
      this.$toast.success('已通知卖家');
    },
    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
      });
      // console.log(res.records);
      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>
