<template>
    <uv-sticky
        bgColor="#fff"
        customNavHeight="0"
    >
      <uv-navbar
          :fixed="false"
          :title="title"
          @leftClick="goUser"
      />
      <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="emptyOrderIcon"
          v-else
      >
        您还没有相关订单~
      </Empty>
      <!-- 加载中 -->
      <ListLoadLoading v-if="loading" />
      <!-- 加载完毕-->
      <ListLoadOver v-if="loadend" />
    </view>
    <!-- 支付弹窗 -->
    <PayPopup
        ref="payPopupRef"
        @confirm="paySuccess"
    />
  <ReturnTop :scroll-top="scrollTop" />
</template>

<script setup>
import { computed, ref, unref } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { orderList } from '@/api/order'
import { useRouter } from "@/hooks/useRouter";
import ListLoadOver from "@/components/ListLoadOver/index.vue"
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
import Empty from '@/components/Empty/index.vue'
import { emptyOrderIcon } from "@/utils/images";
import PayPopup from '@/components/PayPopup/index.vue'
import { usePage } from "@/hooks";
import Header from "@/components/Header/index.vue"
import { getProductList } from "@/api/product";
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";

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

const {getParams, pushToTab, 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 title = computed(() => {
  const find = navList.value.find(item => item.value === type.value);
  return find ? `${ find.name }订单` : '订单'
})


// 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'}, {})
}

function goUser() {
  pushToTab({url: '/pages/user/user'}, {})
}

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
})


onPageScroll((e)=>{
})


</script>

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