<script>
import {getPointOrderList} from '@/api/pointOrder'
import webviewPoint from "@/components/webviewPoint.vue";
import {getIsLottery} from '@/api/index'
export default {
  components: { webviewPoint },
  name: "orderList",
  data(){
    return {
      orderList: [],
      // 加载状态
      loading: false,
      // 是否有更多数据
      hasMore: true,
      // 分页数据
      page: 1,
      pageSize: 10
    }
  },
  onReady() {
    this.getListOrder();
  },
  mounted(){
    getIsLottery({types:[2]}).then(res=>{
      if(res.data.data?.isLottery === 1){
        this.$refs.webviewRef?.getRow(res.data.data);
      }
    })
  },
  methods:{
    async getListOrder(isLoadMore = false) {
      this.loading = true
      try {
        const res = await getPointOrderList({
          current: this.page,
          size: this.pageSize,
          openId: uni.getStorageSync('wx_copenid')
        })
        const {data} = res;
        if (data.code === 200) {
          // 初始加载数据
          data.data.records = data.data.records.map(item=>{
            let skuspecStr = '';
            try {
              const skuspec = item?.skuSpec;
              if (skuspec && skuspec !== 'undefined' && skuspec !== 'null') {
                const parsedSpec = JSON.parse(skuspec);
                if (Array.isArray(parsedSpec)) {
                  skuspecStr = parsedSpec.map(t=>t?.specValue).filter(Boolean).toString();
                }
              }
            } catch (error) {
              console.error('解析 skuspec 失败:', error);
            }
            return{
              ...item,
              skuspec: skuspecStr
            }
          })
          if (isLoadMore) {
            this.orderList = [...this.orderList, ...data.data.records]
          } else {
            this.orderList = data.data.records;
          }
          this.hasMore = this.orderList.length < data.data.total
        }
      } catch (error) {
        console.error('获取积分订单失败:', error)
      } finally {
        this.loading = false
      }
    },
    loadMore(){
      if (this.loading || !this.hasMore) return
      this.loading = true
      this.page++
      this.getListOrder(true)
    },
    viewDetail(order) {
      //payStatus": 0 未支付， 1已支付
      //订单状态(0：待付款 1：待发货 2：待收货 3：已收货 4：售后中  11：取消订单)
      if (order.orderStatus==0 || order.orderStatus==11) { //0：待付款 11：已取消----跳转到待支付页面
        uni.navigateTo({
          url: `/points/productDetails/pendingPayment?orderNo=${order.orderNo}`
        });
        return
      }
      uni.navigateTo({
        url: '/points/order/orderDetails?orderNo=' + order.orderNo,
      });
    }
  }
}
</script>

<template>
  <view class="order-box">
    <webviewPoint ref="webviewRef"/>
    <u-list @scrolltolower="loadMore" style="height:calc(100vh - 100rpx)">
      <u-list-item v-for="(item, index) in orderList" :key="`${item.id}-${index}`" class="order-item">
        <view class="order-header">
          <text class="order-time">下单时间: {{ item.createTime }}</text>
          <text class="order-status" :class="item.status">{{ item.orderStatusName }}</text>
        </view>
        <view class="order-body">
          <view class="product-info">
            <text class="product-name">{{ item.productName }}</text>
            <text class="product-spec">{{ item.skuspec }}</text>
            <text class="product-price" v-if="item.paymentType == 1">{{ item.pointsUsed }}积分</text>
            <text class="product-price" v-if="item.paymentType == 2">¥{{ item.totalAmount }}</text>
            <text class="product-price" v-if="item.paymentType == 3">¥{{ item.totalAmount }}+{{ item.pointsUsed }}积分</text>
          </view>
          <button class="detail-button" @click="viewDetail(item)">查看详情</button>
        </view>
      </u-list-item>
      <!-- 空数据状态 -->
      <u-empty
          class="emptytop"
        v-if="orderList.length === 0"
        icon="order"
        text="暂无订单"
        mode="page"
      >
      </u-empty>
      <!-- 加载更多 -->
      <u-loadmore
        v-if="orderList.length > 0"
        :status="loading ? 'loading' : (hasMore ? 'more' : 'nomore')"
        loading-text="加载中..."
        nomore-text="没有更多订单了"
        @loadmore="loadMore"
      >
      </u-loadmore>
    </u-list>
  </view>
</template>

<style scoped lang="scss">
.order-box {
  width: 750rpx;
  min-height: 100vh;
  background: #F5F8F8;
  padding: 32rpx;
  .u-empty{
    margin-top: 30vh!important;
  }
  .order-item{
    width: 686rpx;
    height: 256rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 28rpx;
    .order-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #EEEEEE;
      padding-bottom: 20rpx;
      .order-time{
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
        line-height: 24rpx;
      }
      .order-status{
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 24rpx;
        &.pending{
          color: #34c7c2;
        }
        &.shipped{
          color: #34c7c2;
        }
        &.delivered{
          color: #999999;
        }
      }
    }
    .order-body{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-top: 20rpx;
      .product-info{
        flex: 1;
        .product-name{
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          line-height: 32rpx;
          margin-bottom: 20rpx;
          display: block;
        }
        .product-spec{
          font-family: PingFang SC, PingFang SC;
          font-size: 24rpx;
          color: #666666;
          line-height: 24rpx;
          margin-bottom:32rpx;
          display: block;
        }
        .product-price{
          font-family: PingFang SC, PingFang SC;
          font-size: 32rpx;
          color: #F53E54;
          font-weight: 500;
          line-height: 24rpx;
        }
      }
      .detail-button{
        height: 48rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        border: 2rpx solid #BBBBBB;
        font-family: PingFang SC, PingFang SC;
        font-size: 26rpx;
        color: #999999;
        line-height: 43rpx;
        text-align: center;
        margin-top: 100rpx;
      }
    }
  }
}
</style>
