<template>
  <view>
    <layout>
      <uv-sticky
          bgColor="#fff"
          customNavHeight="0"
      >
        <uv-navbar
            :fixed="false"
            title="全部订单"
            @leftClick="goBack"
        />
        <uv-tabs
            :list="navList"
            @click="click"
            lineColor="#f56c6c"
            :current="actionType"
        >
        </uv-tabs>
      </uv-sticky>
      <view class="orderList">
        <template v-if="!listEmpty">
          <order
              :data="item"
              v-for="(item, index) in dataList"
              :key="actionType + '_' + index"
              @refresh="handleRefresh"
              @pay="openPay"
          />
        </template>
        <Empty
            :iconSrc="emptyIcon"
            v-else
        >
          您还没有相关订单~
        </Empty>
        <!-- 加载中 -->
        <ListLoadLoading v-if="loading" />
        <!-- 加载完毕-->
        <ListLoadOver v-if="loadend" />
      </view>
    </layout>
  </view>
  <!-- 支付弹窗 -->
  <PayPopup
      ref="payPopupRef"
      @confirm="paySuccess"
  />
</template>

<script setup>
import { ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderList } from '@/api/order'
import { useRouter } from "@/hooks/useRouter";
import Empty from '@/components/Empty/index.vue'
import emptyIcon from '@/static/icon/empty/订单.png'
import PayPopup from '@/components/PayPopup/index.vue'
import { usePage } from "@/hooks";
import { getProductList } from "@/api/product";

const {type, refresh, dataList, loadend, loading, listEmpty} = usePage(orderList)

const {getParams, goBack, push} = useRouter()

const actionType = ref(0)


const navList = ref([
  {name: "全部", value: -1,},
  {name: "未支付", value: 0,},
  {name: "待发货", value: 1,},
  {name: "待收货", value: 2,},
  {name: "待评价", value: 3,},
  {name: "已完成", value: 4,},
  // { name: "退款中", value: 5, },
  // { name: "已退款", value: 6, },
  // { name: "退款", value: 7, },
])


// const handleOrderList = async (option) => {
//   orderListData.value = []
//   orderListData.value = await orderList(option)
//   orderListData.value.forEach(item => {
//     item.status = item.paid === 1 && item.status === 0 ? 99 : item.status
//   })
// }

const handleRefresh = () => {
  // 确认收货
  if (actionType.value === 2) {
    actionType.value++
    type.value++
  }
  refresh()
}


const click = (data) => {
  type.value = data.value
  refresh()
}

// ============================== 支付相关 ===============================
const payPopupRef = ref()

function openPay(orderId) {
  unref(payPopupRef).show(orderId)
}

function paySuccess() {
  // push({url: '/pages/payStatus/index?type=1'})
}


onLoad((options) => {
  const params = getParams(options)
  type.value = params.type
  refresh()
  if (Number(type.value < 0)) {
    actionType.value = 0
    return
  }
  actionType.value = type.value + 1
})


</script>

<style lang="scss">
.orderList {
  padding: 20rpx 0;
}
</style>
