<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>
						<label class="blueTag"> 酒店订单</label>
						订单编号：
						{{ b.id }}
					</view>
					<view class="name">
						{{b.name}}
					</view>
					<view>
						{{b.addName}}
					</view>
					<view>
						{{b.rzInfo}}
					</view>
					<view>
						{{b.roomType}}
					</view>
					<view>
						{{b.bedInfo}}
					</view>
					<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
					<view class="status">
						<text class="gary" v-if="b.status == '0'"> 待支付</text>
						<text class="success" v-if="b.status == '1'">支付成功</text>
						<text class="warning" v-if="b.status == '2'">已取消</text>
						<text class="danger" v-if="b.status == '3'">已退订</text>
					</view>
					<view class="billFoot">
						<view class="price">
							<text> 共计   ¥{{b.total}}</text>

							
							<view style="display: flex;">
								<button class="billbtn" @click.stop="showDetail(b)">详情</button>
									<button class="billbtn"  v-if="b.status == '0'" style="margin: 0 0 0 10rpx;background:#1EC886;color: #fff;"> 支付</button>
								
							</view>
						</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  hotel from '@/common/hotel.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
})
const currUser = uni.getStorageSync('currUser');
onShow(() => {
	billsList.value = []
	getBills()
});
function clickLoadMore() {
	if(loadStatus.value=='nomore'){
		return
	}
	queryparam.value.pageNum+=1
	getBills()

}
function getBills() {
	console.log('currUser',currUser)
	isLoadMore.value = false
	hotel.getbilllist(currUser.userId).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 showDetail(b) {
	const detail  = encodeURIComponent(JSON.stringify(b))
	let path = `/pages_hotel/hotel/billDetail?orderId=${b.id}&detail=${detail}`;
	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;
}

.name{font-size: 34rpx;color: #000;}

.padh20 {
	padding: 0 25rpx;
}
.billFoot{
	.price{width: 100%;justify-content: space-between;}
	.billbtn{color: #1EC886;border: 1px solid #1EC886;    margin: initial;
	border-radius: 0;background-color: transparent;}
}
.billFoot .tip {
	font-size: 24rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
	margin: 0 20rpx;
}
.billItem > view{margin-bottom: 10rpx;}
.billFoot text{white-space: nowrap;}
.billFoot text.danger{color: #da2a2a;}
.blueTag{color: #fff;background-color: #1EC886;    padding: 10rpx 10rpx;}
.status{
	.warning{color: #ff8124;}
	.danger{color: #da2a2a;}
	.gary{color: #666;}
	.success{color: #1EC886;}
}

</style>