<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"></goods-list>
		<order-vue :data="orderDetail.info" :table="options"></order-vue>
		<step-vue></step-vue>
		<view style="height: 200rpx;"></view>
		<view class="u-fixed bottom bg-fff ">
			<view class="u-flex u-abso">
				<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>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as Api from '@/http/yskApi/Instead.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 go from '@/commons/utils/go.js'
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import OrderDetail from './page.js'
	const uiPage = new OrderDetail()
	setTimeout(() => {
		uiPage.setVal('user', {
			name: 1
		})
	}, 1500)

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

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

	const orderDetail = reactive({
		goodsList: [],
		info: {}
	})
	const options = reactive({})
	async function init() {
		const {
			masterId
		} = await Api.$getMasterId(options)
		console.log(masterId);
		options.masterId=masterId
		const {
			records
		} = await Api.getCart({
			...options,
			masterId
		})
		orderDetail.goodsList = records
		const info = await Api.$createOrder({
			masterId,
			vipUserId: '',
			tableId: options.tableId,
			note: '',
			postPay: true,
			orderld: ''
		})
		orderDetail.info = info
	}
	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>