<template>
	<view class="min-page bg-gray u-font-28 u-p-30">
		<user-vue></user-vue>
		<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
			<text class="color-666">桌位号：</text>
			<text class="font-bold">{{options.name}}</text>
		</view>
		<goods-list :data="orderDetail.goodsList" :seatFee="orderDetail.seatFee.totalAmount"
			@tuicai="onTuiCai"></goods-list>
		<extra-vue :data="orderDetail.seatFee"></extra-vue>
		<order-vue :data="orderDetail.info" :table="options" :seatFee="orderDetail.seatFee"></order-vue>
		<step-vue></step-vue>
		<view style="height: 200rpx;"></view>
		<view class="u-fixed bottom bg-fff ">
			<view class="u-flex u-abso">
				<template v-if="orderDetail.info.status=='unpaid'">
					<view class="u-flex-1">
						<my-button @tap="diancan" color="#fff" bgColor="rgb(57,53,52)" borderRadius="100rpx 0 0 100rpx"
							shape="circle" plain type="primary">加菜</my-button>
					</view>
					<view class="u-flex-1">
						<my-button @tap="toPay" borderRadius="0 100rpx 100rpx 0" shape="circle"
							type="primary">结账</my-button>
					</view>
				</template>
				
			</view>
		</view>

		<tuicai-vue @confirm="tuicaiConfirm" v-model:show="tuicai.show" :data="tuicai.selGoods"></tuicai-vue>
	</view>
</template>

<script setup>
	import * as Api from '@/http/yskApi/Instead.js'
	import * as orderApi from '@/http/yskApi/order.js'
	import userVue from './components/user.vue';
	import orderVue from './components/order.vue';
	import goodsList from './components/list.vue';
	import stepVue from './components/step.vue';
	import extraVue from './components/extra.vue';
	import tuicaiVue from './components/tuicai.vue';
	import go from '@/commons/utils/go.js'
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import OrderDetail from './page.js'
	const tuicai = reactive({
		show: false,
		selGoods: {}
	})

	function onTuiCai(goods, index) {
		tuicai.show = true
		tuicai.selGoods = goods
	}

	async function tuicaiConfirm() {
		const res=await Api.$returnCart({
			cartId: tuicai.selGoods.id,
			tableId:options.tableId,
		})
		tuicai.selGoods.status='return'
		tuicai.show = false
	}
	const uiPage = new OrderDetail()
	setTimeout(() => {
		uiPage.setVal('user', {
			name: 1
		})
	}, 1500)

	function diancan() {
		go.to('PAGES_CREATE_ORDER', {
			tableId: options.tableId,
			tableName: options.name,
			type: 'add'
		})
	}

	function toPay() {
		go.to('PAGES_CRESATE_ORDER_PAY', {
			tableId: options.tableId,
			tableName: options.name,
			masterId: options.masterId,
			orderId: orderDetail.info.id,
			discount: 1
		})
	}

	const orderDetail = reactive({
		goodsList: [],
		info: {},
		seatFee: {
			totalAmount: 0
		}
	})
	const options = reactive({})
	async function init() {
		const res= await orderApi.tbOrderInfoDetail(options.id)
		const masterId=res.masterId
		options.masterId = res.masterId
		if(res.status=='unpaid'){
			const {
				records,
				seatFee
			} = await Api.getCart({
				masterId,
				tableId:res.tableId
			})
			orderDetail.goodsList = records
			orderDetail.seatFee = seatFee
		}else{
			orderDetail.goodsList = res.detailList
		}
		orderDetail.info = res
	}

	function watchEmit() {
		uni.$off('orderDetail:update')
		uni.$once('orderDetail:update', (newval) => {
			console.log(newval);
			init()
		})
	}
	onShow(() => {
		watchEmit()
	})
	onLoad((opt) => {
		Object.assign(options, opt)
		console.log(options);
		init()
	})
</script>

<style lang="scss" scoped>
	.bottom {
		bottom: 0;
		left: 0;
		right: 0;
		height: 68rpx;

		.u-abso {
			bottom: 84rpx;
			left: 28rpx;
			right: 28rpx;
		}
	}
</style>