<template>
	<view class="graybg">
		<view class="pads">
			<view class="box">
				<view style="height: calc(100vh - 180rpx);overflow: auto;">
					<view class="billItem" v-for="b in billsList" :key="b.id">
						<!-- parentType -->
						<view>
							<label class="blueTag" v-if="b.orderType == 0"> 酒店订单</label>
							<label class="orangeTag" v-if="b.orderType == 1">接送订单</label>
							<label class="purpleTag" v-if="b.orderType == 2"> 餐饮订单</label>
							订单编号：
							{{ b.id }}
						</view>
						<view class="name">
							{{b.name}}
						</view>
						<!-- 餐饮 -->
						<view v-if="b.orderType == 2">
							<view v-for="(n,index) in b.messageObj.foodsList" :key="index">
								<view v-if="n.num > 0">
									{{n.name}}({{n.categoryName}}) <text>{{n.num}} 份</text>
								</view>
							</view>
						</view>
						<view v-if="b.orderType == 1">
							<view v-for="(car,index) in b.messageObj.carsList" :key="index">
								<view v-if="car.num>0">{{car.name}}：{{car.num}} 辆</view>
							</view>
						</view>
						<view v-if="b.orderType == 0">
							<view>
								{{b.messageObj.roomName}}
							</view>
							<view>
								{{b.messageObj.roomInfo}}
							</view>
							<view>
								{{b.messageObj.roomType}}
							</view>
							<view>
								{{b.messageObj.roomStayDate}}
							</view>
						</view>

						<view class="billFoot">
							<view class="price">
								<text> 共计 ¥{{b.total}}</text>
								<view class="slotfooter" @click="chooseThis(b)">
									<uni-icons v-if="b.selected" color="#1EC886" type="checkbox-filled"
										size="30"></uni-icons>
									<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
								</view>
							</view>
						</view>
					</view>

					<view class="nodata" v-if="billsList.length==0">
						<image mode="aspectFit" src="@/static/nodata.png"></image>
						<text> 无可开票订单 </text>
					</view>
				</view>

				<view v-if="billsList.length!=0">
					<button style="width: 90%;margin:0 auto;" class="btn btn1" @click="goNext"> 确定 </button>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import _ from 'lodash';
	const billsList = ref([]);
	const chosenList = ref([]);
	const alertDialog = ref(null);
	let totalMoney = 0;
	const isLoadMore = ref(false);
	const loadStatus = ref('loading');
	const contentText = ref({
		contentdown: '点击查看更多',
		contentrefresh: '正在加载...',
		contentnomore: '没有更多数据了'
	})
	const app = getApp();
	const currUser = uni.getStorageSync('currUser');
	onShow(() => {
		billsList.value = []
		getBills()
	});
	let activeId
	let remarks
	let kpType
	onLoad((options) => {
		activeId = options.activeId
		if (options.remarks) {
			remarks = JSON.parse(decodeURIComponent(options.remarks));
		}
		kpType = options.kpType
	})

	function chooseThis(s) {
		s.selected = !s.selected;
	}

	function checkChoose() {
		let arr = [];
		let ids = [];
		for (const c of billsList.value) {
			if (c.selected) {
				arr.push(c.id);
				totalMoney = (totalMoney + c.total)
			}
			chosenList.value = arr
		}
	}

	function goNext() {
		checkChoose()
		if (chosenList.value.length == 0) {
			uni.showToast({
				icon: 'none',
				title: '请至少选择一个订单',
				duration: 2000
			});
			return
		}
		let orders = chosenList.value.toString()
		const obj = encodeURIComponent(JSON.stringify(remarks))
		let path =
			`/pages_hotel/hotel/addInvoice?orders=${orders}&totalMoney=${totalMoney.toFixed(2)}&activeId=${activeId}&remarks=${obj}&kpType=${kpType}`;
		uni.redirectTo({
			url: path
		});

	}

	function getBills() {
		uni.showLoading({
			title: '加载中'
		});
		console.log('currUser', currUser)
		isLoadMore.value = false
		const venueId = app.globalData.venue.id
		var obj = {
			activeId: activeId,
			userId: currUser.userId,
			venueId: venueId
		}
		hotel.getCanInvoiceBills(obj).then(res => {
			billsList.value = res.rows;
			for (var b of billsList.value) {
				b.messageObj = JSON.parse(b.message)
			}
			uni.hideLoading();
		});
	}
</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;
	}

	.purpleTag {
		color: #fff;
		background-color: #717bef;
		padding: 10rpx 10rpx;
	}

	.orangeTag {
		color: #fff;
		background-color: #ff8124;
		padding: 10rpx 10rpx;
	}

	.status {
		.warning {
			color: #ff8124;
		}

		.danger {
			color: #da2a2a;
		}

		.gary {
			color: #666;
		}

		.success {
			color: #1EC886;
		}
	}
</style>