<template>
  <div class="container">
    <van-tabs swipeable>
      <van-tab title="全部">
        <scroll-view scroll-y class="content">
          <order-card v-for="item in list0" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
          <no-data :options="list0"/>
        </scroll-view>
      </van-tab>
      <van-tab title="待付款">
        <scroll-view scroll-y class="content">
          <order-card v-for="item in list1" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
          <no-data :options="list1"/>
        </scroll-view>
      </van-tab>
      <van-tab title="已付款">
        <scroll-view scroll-y class="content">
          <order-card v-for="item in list3" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
          <no-data :options="list3"/>
        </scroll-view>
      </van-tab>
      <van-tab title="已取消">
        <scroll-view scroll-y class="content">
          <order-card v-for="item in list2" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
          <no-data :options="list2"/>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderCard from '@/components/OrderCard';
import { customerBundleList } from '@/api/bundle';
import NoData from '@/components/NoData';
export default {
  components: { 'order-card': OrderCard, 'no-data': NoData },
  name: 'package',

  data() {
    return {
      list0: [],
      list1: [],
      list2: [],
      list3: []
    };
  },
  methods: {
    getOrderList() {
      const _this = this;
      customerBundleList({}).then(res => {
        if (res.status === '200') {
          _this.list0 = res.data;
          // 未结算
          _this.list1 = res.data.filter(item => item.orderFlag === 'UNPA');
          // 取消
          _this.list2 = res.data.filter(item => item.orderFlag === 'CAEL' || item.orderFlag === 'SYCA');
          // 已结清
          _this.list3 = res.data.filter(item => item.orderFlag === 'PAED');
        } else {
          wx.showToast({
            title: res.message,
            icon: 'none',
            duration: 2500
          });
        }
        wx.hideLoading();
      });
    }
  },

  onShow() {
    wx.showLoading({
      mask: true,
      title: '加载中'
    });
    this.getOrderList();
  }

};
</script>

<style lang="stylus" scoped>
.container {
  height: 100%;
  overflow: hidden;
}

.content {
  height: calc(100vh - 60px);
  background-color: #f8f8f9;
  padding-top: 0.5rpx;
}
</style>