<template>
  <view class="container page-order-list">
    <!-- 头部菜单 -->
    <view class="order-tit">
      <text
        data-sts="0"
        :class="sts===0 ? 'on' : ''"
        @tap="onStsTap"
      >
        全部
      </text>
      <text
        data-sts="1"
        :class="sts===1 ? 'on' : ''"
        @tap="onStsTap"
      >
        待付款
      </text>
      <text
        data-sts="2"
        :class="sts===2 ? 'on' : ''"
        @tap="onStsTap"
      >
        待发货
      </text>
      <text
        data-sts="3"
        :class="sts===3 ? 'on' : ''"
        @tap="onStsTap"
      >
        待收货
      </text>
      <text
        data-sts="5"
        :class="sts===5 ? 'on' : ''"
        @tap="onStsTap"
      >
        已完成
      </text>
    </view>
    <!-- end 头部菜单 -->
    <view class="main">
      <!-- 订单列表 -->
      <block
        v-for="(item, orderId) in list"
        :key="orderId"
      >
        <view class="prod-item">
          <!-- 店铺 -->
          <view class="shop-box">
            <view class="shop-icon">
              <image src="/static/images/icon/shop.png" />
            </view>
            <view class="shop-name">
              {{ item.shopName }}
            </view>
          </view>
          <!-- 订单编号 -->
          <view class="order-num">
            <text>订单编号：{{ item.orderId }}</text>
            <view class="order-state">
              <text :class="['order-sts' , {red: (item.status < 5) }]">
                {{ ['','待付款','待发货','待收货','待评价','已完成','已取消','拼团中'][item.status] }}
              </text>
            </view>
            <view
              v-if="item.refundStatus"
              class="order-state red"
            >
              <!-- refundStatus 订单退款状态 1.申请退款 2.退款完成 3.部分退款完成 4.退款失败 -->
              <text>({{ ['','退款中','退款完成','部分退款','退款关闭'][item.refundStatus] }})</text>
            </view>
          </view>
          <!-- 商品列表 -->
          <!-- 一个订单单个商品的显示 -->
          <block v-if="item.orderItems.length===1">
            <block
              v-for="(prod, prodId) in item.orderItems"
              :key="prodId"
            >
              <view
                class="item-cont"
                @tap="onToOrderDetailPage(item.orderId, item.refundStatus)"
              >
                <view class="prod-pic">
                  <image
                    v-if="prod.pic"
                    :src="util.addDomain(prod.pic)"
                    @error="prod.pic = ''"
                  />
                  <image
                    v-else
                    src="/static/images/icon/def.png"
                  />
                </view>
                <view class="prod-info">
                  <view class="prodname">
                    {{ prod.spuName }}
                  </view>
                  <view class="prod-info-cont">
                    {{ prod.skuName }}
                  </view>
                  <view class="price-nums">
                    <text class="prodprice">
                      <text
                        v-if="prod.price"
                        class="symbol"
                      >
                        ￥
                      </text>
                      <text
                        v-if="prod.price"
                        class="big-num"
                      >
                        {{ wxs.parsePrice(prod.price)[0] }}
                      </text>
                      <text
                        v-if="prod.price"
                        class="small-num"
                      >
                        .{{ wxs.parsePrice(prod.price)[1] }}
                      </text>
                      <text
                        v-if="prod.price && item.orderType===3"
                        class="small-num"
                        decode="true"
                      >
                        &emsp;+&emsp;
                      </text>
                      <text
                        v-if="prod.useScore && item.orderType===3"
                        class="small-num"
                      >
                        {{ prod.useScore }} 积分
                      </text>
                    </text>
                    <text
                      v-if="item.orderMold===1&&item.orderVirtualInfoList && item.orderVirtualInfoList.length>0"
                      class="prodcount"
                    >
                      × {{ item.virtualCount }}
                    </text>
                    <text
                      v-else
                      class="prodcount"
                    >
                      × {{ prod.count }}
                    </text>
                  </view>
                </view>
              </view>
            </block>
          </block>
          <!-- 一个订单多个商品时的显示 -->
          <block v-else>
            <view
              class="item-cont"
              @tap="onToOrderDetailPage(item.orderId, item.refundStatus)"
            >
              <scroll-view
                scroll-x="true"
                scroll-left="0"
                scroll-with-animation="false"
                class="categories"
              >
                <block
                  v-for="(prod, prodId) in item.orderItems"
                  :key="prodId"
                >
                  <view class="prod-pic">
                    <image
                      v-if="prod.pic"
                      :src="util.addDomain(prod.pic)"
                      @error="prod.pic = ''"
                    />
                    <image
                      v-else
                      src="/static/images/icon/def.png"
                    />
                  </view>
                </block>
              </scroll-view>
            </view>
          </block>
          <view class="total-num">
            <view
              v-if="item.orderType"
              class="spell-group-icon"
            >
              <!-- orderType 订单类型(0普通订单 1团购订单 2秒杀订单) -->
              {{ ['','拼团','秒杀','积分'][item.orderType] }}
            </view>
            <view
              v-if="item.orderMold !== 0"
              class="spell-group-icon"
            >
              {{ item.orderMold===1?'虚拟':(item.deliveryType===2?'自提':'优惠券') }}
            </view>
            <!-- <view class="spell-group-icon">自提</view> -->
            <view class="right">
              <view class="prodcount">
                共 {{ item.allCount }} 件商品
              </view>
              <view class="prodprice">
                合计：
                <text
                  v-if="item.actualTotal"
                  class="symbol"
                >
                  ￥
                </text>
                <text
                  v-if="item.actualTotal"
                  class="big-num"
                >
                  {{ wxs.parsePrice(item.actualTotal)[0] }}
                </text>
                <text
                  v-if="item.actualTotal"
                  class="small-num"
                >
                  .{{ wxs.parsePrice(item.actualTotal)[1] }}
                </text>
                <text
                  v-if="(item.actualTotal && item.actualTotal > 0) && (item.orderType===3 || item.orderToataluseScore > 0)"
                  class="small-num"
                >
                  +
                </text>
                <text
                  v-if="item.orderType===3 || item.orderToataluseScore > 0"
                  class="small-num"
                >
                  {{ item.orderToataluseScore }} 积分
                </text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>

    <!-- 到底了~ -->
    <view
      v-if="list.length > 10 && loadAll"
      class="loadall"
    >
      已加载全部数据
    </view>

    <!-- 空 -->
    <view
      v-if="!list.length"
      class="empty"
    >
      <view class="empty-icon">
        <image src="/static/images/icon/empty.png" />
      </view>
      <view class="empty-text">
        这里还没有相关订单~
      </view>
    </view>
  </view>
<!-- end 订单列表 -->
</template>

<script setup>
import util from '@/utils/util.js'
const wxs = number()

/**
 * 生命周期函数--监听页面加载
 */
const sts = ref(0)

onLoad((options) => {
  if (options.sts) {
    sts.value = options.sts
  }
})
/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  onLoadOrderData(sts.value, 1)
})

/**
 * 页面上拉触底事件的处理函数
 */
let current = 1
let pages = 0
const loadAll = ref(false) // 已加载全部
onReachBottom(() => {
  if (current < pages) {
    current++
    onLoadOrderData(sts.value, current)
  } else {
    loadAll.value = true
  }
})

/**
 * 加载订单数据
 */
const list = ref([])
let stationId = 0
let newList = []
const onLoadOrderData = (sts, isCurrent) => {
  uni.showLoading() // 加载订单列表
  http.request({
    url: '/mall4cloud_order/station/order_list_by_status',
    method: 'GET',
    data: {
      pageNum: isCurrent,
      pageSize: 10,
      status: sts
    }
  }).then(({ data }) => {
    data.list.forEach(order => {
      order.orderToataluseScore = 0
      order.orderItems.forEach(orderItem => {
        if (orderItem.useScore) {
          order.orderToataluseScore += orderItem.useScore
        }
      })
      stationId = uni.getStorageSync('cloudStationId') ? JSON.parse(uni.getStorageSync('cloudStationId')) : ''
      if (order.orderMold === 1 && order.orderVirtualInfoList && order.orderVirtualInfoList.length > 0) {
        let virtualCount = 0
        order.orderVirtualInfoList.forEach((virtualItem) => {
          if (virtualItem.stationId === stationId) {
            virtualCount++
          }
        })
        order.virtualCount = virtualCount
      }
    })
    if (isCurrent === 1) {
      newList = data.list
    } else {
      newList = list.value.concat(data.list)
    }
    list.value = newList
    pages = data.pages
    current = isCurrent
    uni.hideLoading()
  })
}

/**
 * 状态点击事件
 */
const onStsTap = (e) => {
  sts.value = Number(e.currentTarget.dataset.sts)
  onLoadOrderData(sts.value, 1)
}

/**
 * 查看订单详情
 */
const onToOrderDetailPage = (orderNum, refundStatus) => {
  const sts = refundStatus || 0
  uni.navigateTo({
    url: '/pages/order-detail/order-detail?orderNum=' + orderNum + '&refundStatus=' + sts
  })
}
</script>
<style lang="scss" scoped>
@import "./order-list.scss";
</style>
