<template>
  <view class="app-container">
    <HeaderBar title="购买记录" enable-back text-align="center" />
    <view class="order-list">
      <view v-for="(item, index) in orderList" :key="index" class="order-item">
        <view class="order-header">
          <text class="order-no">{{ item.no }}</text>
          <text class="order-time">{{ item.createTime }}</text>
        </view>
        <view class="order-content">
          <view class="order-info">
            <text class="vip-level">{{ VipLevel.getName(item.vipLevel) }}</text>
            <text class="days">{{ item.days }}天</text>
          </view>
          <text class="amount">¥{{ item.amount | fix2 | dv}}</text>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadStatus(loading, orderList.length, total)" />
  </view>
</template>

<script>
import { mchListVipOrder } from '@/api/mch/vipOrder'
import HeaderBar from '@/components/HeaderBar.vue'
import { $loadList } from '@/utils/mixins'
import { VipOrderStatus, VipLevel } from '@/utils/enums'

export default {
  mixins: [$loadList],
  components: {
    HeaderBar
  },
  data() {
    return {
      VipLevel,
      orderList: [],
      queryParams: {
        pageNum: 0,
        pageSize: 20,
        orderByColumn: 'createTime',
        isAsc: 'desc',
        status: VipOrderStatus.SUCCESS
      },
      total: null,
      loading: false,
    }
  },
  onShow() {
    this.getOrderList()
  },
  onReachBottom() {
    this.loadOrderList()
  },
  methods: {
    getOrderList() {
      this.queryParams.pageNum = 0;
      this.total = null;
      this.loading = false;
      this.queryParams.mchId = this.$store.getters.mchId;
      this.loadOrderList();
    },
    loadOrderList() {
      this.loadMore(() => {
        this.loading = true;
        this.queryParams.pageNum++;
        mchListVipOrder(this.queryParams).then(res => {
          this.orderList.push(...res.rows);
          this.total = res.total;
        }).finally(() => {
          this.loading = false;
        })
      }, this.loadStatus(this.loading, this.orderList.length, this.total))
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  padding: 20rpx;

  .order-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .order-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .order-no {
        color: #333;
        font-size: 28rpx;
      }

      .order-time {
        color: #999;
        font-size: 24rpx;
      }
    }

    .order-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .order-info {
        .vip-level {
          color: #333;
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }

        .days {
          color: #666;
          font-size: 28rpx;
        }
      }

      .amount {
        color: #ff6b6b;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
  }
}
</style>