<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">A6</text>
		</view>
		<goods-list :data="orderDetail.goodsList"></goods-list>
		<order-vue></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 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,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
		})
	}
	
	const orderDetail=reactive({
		goodsList:[]
	})
	const options = reactive({})
	async function init(){
		const {masterId}=await Api.$getMasterId(options)
		console.log(masterId);
		const {records} = await Api.getCart({
			...options,masterId
		})
		orderDetail.goodsList=records
	}
	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>