<template>
	<view style="height: calc(100vh - 160rpx);overflow: auto;">
		<view class="ttname">{{form.name}}（{{form.address}}）</view>
		<uni-forms label-width="80">
			<view class="whiteItem">

				<view class="flexFood" v-for="(m,index) in form.messageObj.foodsList" :key="index">
					<label v-show="m.num > 0">{{m.name}}({{m.categoryName}})</label>

					<text v-show="m.num > 0">{{m.num}}份 * ¥{{m.price}}</text>

				</view>
			</view>

			<view class="whiteItem">
				<uni-forms-item label="订餐周期">
					{{dayjs(form.extJsonObj.dcStart).format("YYYY-MM-DD")}} 
					—— 
					{{dayjs(form.extJsonObj.dcEnd).format("YYYY-MM-DD")}}
				</uni-forms-item>
				<uni-forms-item label="联系人">
					{{form.contacts}}
				</uni-forms-item>
				<uni-forms-item label="联系电话">
					{{form.phone}}
				</uni-forms-item>
				<uni-forms-item label="备注">
					{{form.remarks}}
				</uni-forms-item>
			</view>


			<view style="height: 80rpx;"></view>

		</uni-forms>
	</view>
	<view class="bbfix">
		<!-- 底部提交 -->
		<view class="price">
			总价：
			<text>￥{{ detail.total }}</text>
		</view>
		<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
		<view class="subBtn" @click="cancel" v-if="form.viewStatus == '5'"> 退订</view>
		<view class="subBtn gray" v-else-if="form.viewStatus == '4'" disabled> 已退订</view>
		<view class="subBtn gray" v-else-if="form.viewStatus == '2'" disabled> 已取消</view>
		<view class="subBtn gray" v-else disabled> 退订</view>
	</view>



</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import dayjs from 'dayjs'
	const data = reactive({
		form: {
			extJsonObj:{},
			messageObj: {
				foodsList: [],
			}
		},
		detail: {}
	})
	const {
		form,
		detail,extJsonObj
	} = toRefs(data);

	let orderId = ''
	onLoad((options) => {
		if ('detail' in options) {
			detail.value = JSON.parse(decodeURIComponent(options.detail));
		}
		console.log(detail.value)
		orderId = options.orderId
		init()
	})

	function init() {
		getData()
	}

	function getData() {
		hotel.getFoodBilldetailbyId(orderId).then(res => {
			form.value = res.data
			form.value.messageObj = JSON.parse(form.value.message)
			form.value.extJsonObj = JSON.parse(form.value.extJson)
		})
	}

	function cancel() {
		uni.showModal({
			title: '提示',
			content: ' 确定退订吗？',
			showCancel: true,
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '退订中...'
					});
					hotel.cancelOrder(orderId).then(respon => {
						uni.hideLoading()
						if (respon.data) {
							uni.showToast({
								title: '已退订',
								icon: 'none',
								duration: 2000
							})
							init()
						} else {
							uni.showToast({
								title: '退订失败，请稍候重试',
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			}
		})


	}
</script>
<style lang="scss" scoped>
	.ttname {
		padding: 30rpx;
		font-size: 30rpx;
	}

	.flexFood {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		label {
			font-size: 28rpx;
		}

		text {
			font-size: 28rpx;
		}
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 10rpx;
	}

	:deep(.uni-forms-item__content) {
		line-height: 36px;
	}

	.t {
		padding: 20rpx;
	}

	.hotel {}

	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;
	}

	.roomType {
		color: #4C5359;
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.roomInfo {
		color: #4C5359;
		font-size: 28rpx;
	}

	.tip {
		font-size: 28rpx;
		color: #E60012;
	}

	.bbfix {
		background: #fff;
		height: 150rpx;
		display: flex;
		position: fixed;
		z-index: 89;
		width: 100%;
		bottom: 0;
		align-items: baseline;
		justify-content: space-between;
		border-top: 1rpx solid #dcdcdc;

		.price {
			padding-left: 20rpx;

			text {
				font-weight: bold;
				font-size: 45rpx;
				color: #ff8124;
			}
		}

		.subBtn {
			font-size: 32rpx;
			color: #1EC886;
			border: 1px solid #1EC886;
			background: transparent;
			height: 60rpx;
			margin: 15rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
		}

		.subBtn.gray {
			color: #999;
			border: 1px solid #999;
		}
	}

	.ccitem {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
		margin: 0 0 10rpx;

		label {
			font-size: 32rpx;
			color: #000;
		}

		text {
			color: #1EC886;
		}
	}

	.colorfulBg {
		background: #1EC886;
		padding: 20rpx 10rpx 10rpx;

		.whiteItem {
			border-radius: 0;
			margin: 0;
			width: 730rpx;
		}

		.name {
			color: #fff;
			margin: 0 0 20rpx;
		}
	}
</style>