<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>
    <cancel-popup
      v-model="showCancelPopup"
      :order-info="currentOrder"
      @complete="handleCancelState"
    />
    <cr-action-sheet
      v-model="showExpressPopup"
      title="请选择物流单号"
      cancel-txt="关闭"
      round
      :actions="expressActions"
      @click="toExpress"
    />
  </div>
</template>
<script>
import orderApi from '@/api/order.api';
import List from './components/List';
import { isApp } from '@/service/validation.service';
import CancelPopup from './components/CancelPopup';
import localStorage from '@/service/localStorage.service';
const commonParams = {
  loading: false,
  finished: false,
  page: 1,
  pageSize: 5,
  list: []
};
export default {
  name: 'OrderList',
  components: {
    List,
    CancelPopup
  },
  data() {
    return {
      isApp,
      showCancelPopup: false,
      showExpressPopup: false,
      currentTab: 0,
      navList: [
        {
          state: 0,
          title: '全部',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          state: 11,
          title: '待付款',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          state: 21,
          title: '待发货',
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ],
      currentOrder: {},
      expressActions: [],
      orderStatusInfo: {}
    };
  },
  mounted() {
    this.getStateQuery();
    this.getList();
    // this.$track.registeredEvents('H5_2B_MyOrderPageExposure');
  },
  methods: {
    getStateQuery() {
      const { state } = this.$route.params || {};
      state && (this.currentTab = Number(state));
    },
    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('操作成功');
              }
            });
        }
      });
    },
    handleCancelState() {
      this.updateCurrentOrder(51, '交易关闭');
    },
    updateCurrentOrder(state, txt) {
      this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, state);
      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, state: orderStatus } = this.navList[this.currentTab];
      if (finished) return;
      this.setNavListData('loading', true);
      const [res] = await orderApi.orderList({
        pageNo: page,
        pageSize,
        orderStatus
      });
      if (res) {
        this.setNavListData('loading', false);
        list = [...list, ...res.orderList];
        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>
