<template>
	<view class="page">
		<!-- <uni-nav-bar left-icon="left" title="我的兑换" fixed color="#8B2316" height="180rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" /> -->
		<!-- <navBar :title="'我的兑换'"  /> -->
		<view class="navbox">
    <view class="status_bar"></view>
    <uni-nav-bar
      left-icon="left"
      title="我的兑换"
      @clickLeft="goBack"
      color="#8B2316"
      :border="false"
      backgroundColor="#eeeeee"
    >
      
    </uni-nav-bar>
  </view>
		<scroll-view 
			scroll-y 
			class="content"
			refresher-enabled
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="onReachBottom"
			:lower-threshold="80"
		>     
		   <empty v-if="!orderList.length" />
			<!-- <view v-if="!orderList.length" class="empty">暂无兑换记录</view> -->
			<view v-for="item in orderList" :key="item.uuid" class="card" @click="goDetail(item)">
				<view class="row" style="align-items: flex-start;">
					<text class="label">兑换物品：</text>
					<text class="value oneline">{{ item.goods_name }}</text>
				</view>
				<view class="row">
					<text class="label">兑换时间：</text>
					<text class="value">{{ formatDate(item.create_date) }}</text>
				</view>
				<view class="row">
					<text class="label">状态：</text>
					<text class="status" >{{ statusText(item.status) }}</text>
				</view>
			</view>
			<view class="list-footer" v-if="isLoading">加载中...</view>
			<view class="list-footer" v-else-if="noMore && orderList.length">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script setup>
import goods_api from '@/api/goods_api'
import { ref, onMounted } from 'vue'
import navBar from '@/components/navBar/navBar.vue'
import empty from '@/components/empty/empty.vue'
import  navTo  from '@/utils/navTo.js'		
import { onLoad,onBackPress} from '@dcloudio/uni-app'
const orderList = ref([])
const page = ref(1)
const pageSize = ref(10)
const isLoading = ref(false)
const noMore = ref(false)
const refresherTriggered = ref(false);
const from = ref('')

onLoad((options) => {
	if(options.from){
		from.value = options.from
	}
})
const goBack = () => {
	if(from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
}
onBackPress(() => {
	if(from.value){
		plus.runtime.quit();
		return true;
	}
});
const goDetail=(item)=>{
	navTo({	
		url: `/pages_goods/exchange/exchangeDetail?id=${item.uuid}`
	})
}

const fetchList = () => {
	if (isLoading.value || noMore.value) return
	isLoading.value = true
	goods_api.getGoodsOrderList({ page: page.value, pageSize: pageSize.value }).then(res => {
		if (res.code == 200 && res.data) {
			const list = Array.isArray(res.data.list) ? res.data.list : []
			orderList.value = page.value === 1 ? list : orderList.value.concat(list)
			noMore.value = !!res.data.isLastPage
			page.value = (res.data.pageNum || page.value) + 1
		}
	}).finally(() => {
		isLoading.value = false
		refresherTriggered.value = false
	})
}

const onRefresh = () => {
	refresherTriggered.value = true
	noMore.value = false
	page.value = 1
	fetchList()
}

const onReachBottom = () => {
	fetchList()
}

const formatDate = (sec) => {
	if (!sec) return ''
	const d = new Date(Number(sec) * 1000)
	const y = d.getFullYear()
	const m = String(d.getMonth() + 1).padStart(2, '0')
	const day = String(d.getDate()).padStart(2, '0')
	return `${y}-${m}-${day}`
}

const statusText = (s) => {
	if (s === 1 ) return '待支付'
	if (s === 2 ) return '已支付'
	if (s === 3) return '已取消'
	if (s === 4) return '已发货'
	if (s === 5) return '已收货'
	if(s === 6) return '订单异常'
	
}

const statusClass = (s) => {
	return (s === 1 || s === 2) ? 'paid' : 'unpaid'
}

onMounted(() => {
	page.value = 1
	noMore.value = false
	orderList.value = []
	fetchList()
})

</script>

<style scoped>
.page { min-height: 100vh; background: #fff; }
.content { position: absolute; top: calc(var(--status-bar-height) + 44px); bottom: 0; left: 0; right: 0; background: #fff; }
.card { background: #fff; padding: 24rpx; border-bottom: 2rpx solid #eee; }
.row { display: flex; align-items: center; padding: 10rpx 0; }
.label { color: #333; white-space: nowrap;font-size: 30rpx; width: 157rpx; }
.value { color: #666; font-size: 30rpx; }
.status { font-size: 30rpx; color: #666;}
.status.paid { color: #666; }
.status.unpaid { color: #666; }
.list-footer { text-align: center; color: #999; padding: 24rpx 0; }
.empty { text-align: center; color: #999; padding: 40rpx 0; }
</style>

