<template>
	<view class="graybg">
		<view class="pads">
			<view class="box">
				<view class="billItem" @click="showDetail(b)" v-for="b in billsList" :key="b.id">
					<!-- parentType -->
					<view>
						订单编号：
						<text>{{ b.orderCode }}</text>
					</view>
					<view v-if="b.verificationCode">
						验证码：
						<text>【{{ b.verificationCode }}】</text>
					</view>
					<view v-if="b.siteName">
						预订项目：
						<text>{{b.projectName||b.sonList[0].projectName}} {{ b.siteName }}</text>
					</view>
					<view v-if="b.orderDate">
						预订时间：
						<text>{{ b.orderDate }} {{ b.orderTimePeriod.replace(/,/,'-') }}</text>
					</view>
					<view class="billFoot">
						<view class="status" v-if="b.payStatus == 1">{{ b.payStatusStr }}</view>
						<view class="status warning" v-else>{{ b.payStatusStr }}</view>
						<view class="price">
							<text class="tip" v-if="b.payStatus == 0 && b.parentType == 2">*子订单不支持独立支付</text>
							<!--payStatus 0 未支付  1 已支付 2 部分退款 3 已退款-->
							<!--orderType 预定类型 0 普通预定 1 长租预定 2 预留 3 锁场 -->
							
							<text v-if="b.payStatus==0">原价￥{{b.orderAmount}}</text>
							<text v-if="b.payStatus>0">￥{{b.finalOrderAmount}}</text>
							<text class="danger" v-if="b.payStatus==2||b.payStatus==3">
								(已退款￥{{b.refundAmount}})</text>
							
							
							<button class="billbtn" v-if="b.payStatusStr == '未支付' && b.parentType != 2" @click.stop="goBooking(b)">去支付</button>
						</view>
					</view>
				</view>
				
				<view v-show="isLoadMore" @click="clickLoadMore"> 
					<uni-load-more :status="loadStatus" :content-text="contentText"></uni-load-more>
				</view>
				<view class="nodata" v-if="billsList.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app';
import * as api from '@/common/api.js';
import _ from 'lodash';
const billsList = ref([]);
const alertDialog = ref(null);
const isLoadMore = ref(false);
const loadStatus = ref('loading');
const contentText = ref({
	contentdown: '点击查看更多',
	contentrefresh: '正在加载...',
	contentnomore: '没有更多数据了'
})
const queryparam = ref({
	pageNum:1,
	pageSize: 10
})
onShow(() => {
	billsList.value = []
	getBills()
});
function clickLoadMore() {
	if(loadStatus.value=='nomore'){
		return
	}
	queryparam.value.pageNum+=1
	getBills()

}
function getBills() {
	isLoadMore.value = false
	api.getMalist(queryparam.value).then(res => {
		_.each(res.rows,(r)=>{
			billsList.value.push(r)
		})
		// billsList.value = res.rows;
		if(res.total < (queryparam.value.pageSize*queryparam.value.pageNum)){
			isLoadMore.value = true  
			loadStatus.value='nomore'
		} else {
			isLoadMore.value = true
			loadStatus.value='more'
		}
	});
}
function goBooking(b) {
	let path = `/pages/index/booking?id=${b.id}`;
	uni.navigateTo({
		url: path
	});
}
function showDetail(b) {
	let path = `/pages/usercenter/billsDetail?id=${b.id}`;
	uni.navigateTo({
		url: path
	});
}
function pay() {
	alertDialog.value.open();
}
function dialogConfirm() {
	// 微信支付
}
function dialogClose() {
	alertDialog.value.close();
}
</script>

<style lang="scss" scoped>
	.pads{padding:0 25rpx 70rpx;}
.billItem {
	width: auto; padding-bottom: 1px;
	.uni-input {
		padding: 15rpx 0;
		color: #000;
	}
	.billFoot{    margin-bottom: 20rpx;}
}
.rrcard .box {
	padding: 0 0 1px;
	margin: 20rpx 0 0;
}
.graybg {
	background: #f7f8fa;
	height: 100vh;
	width: 100vw;
	overflow: auto;
}
.whitebg {
	background: #fff;
	margin-top: 15rpx;
	border-radius: 20rpx;
	margin-bottom: 180rpx;
}
.payBtn {
	width: 750rpx;
	line-height: 90rpx;
	height: 120rpx;
	text-align: center;
	background: #ff8124;
	color: #ffffff;
	font-size: 36rpx;
	border-radius: 20rpx 20rpx 0px 0px;
	position: fixed;
	bottom: 0;
}
.uni-list-cell::after {
	display: none;
}
.littleimgBox {
	display: flex;
	align-items: center;
}
.littleimg {
	width: 50rpx;
	height: 50rpx;
	margin-right: 15rpx;
}
.padh20 {
	padding: 0 25rpx;
}
.billFoot .tip {
	font-size: 24rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
	margin: 0 20rpx;
}
.billFoot text{white-space: nowrap;}
.billFoot text.danger{color: #da2a2a;}
</style>