<template>
	<view class="min-page bg-gray u-font-28 u-p-30">
		<user-vue :orderInfo="orderDetail.info"></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">{{orderDetail.info.tableName}}</text>
		</view>
		<goods-list @printOrder="onPrintOrder"  @tuikuan="onTuikuan" :orderInfo="orderDetail.info" :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 {
		objToArrary
	} from '@/commons/utils/returrn-data.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 infoBox from '@/commons/utils/infoBox.js'
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		reactive, ref
	} from 'vue';
	import OrderDetail from './page.js'
	const tuicai = reactive({
		show: false,
		selGoods: {}
	})

	function onTuiCai(goods, index) {
		console.log(goods);
		tuicai.show = true
		tuicai.selGoods = goods
	}
	async function printDishes(){
		try{
			const res= await Api.$printDishes({
				tableId:orderDetail.info.tableId
			})
			infoBox.showToast('已发送打印请求')
		}catch(e){
			infoBox.showToast('发送打印请求失败')
			//TODO handle the exception
		}
		
	}
	function onPrintOrder(){
		uni.showModal({
			title:'提示',
			content:'是否打印当前台桌菜品',
			success(res) {
				if(res.confirm){
					printDishes()
				}
			}
		})
	}
	function onTuikuan(goods, index){
		go.to('PAGES_ORDER_TUIKUAN',{
			
		})
		
	}

	async function tuicaiConfirm() {
		console.log(tuicai.selGoods);
		const res = await Api.$returnCart({
			cartId:tuicai.selGoods.hasOwnProperty('cartId')? tuicai.selGoods.cartId:tuicai.selGoods.id,
			tableId: orderDetail.info.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_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)
		if(res.detailList.length){
			uni.setStorageSync('useType',res.detailList[0].useType)
		}
		const masterId = res.masterId
		options.masterId = res.masterId
		if (res.status == 'unpaid') {
			// if (false) {
			const {
				records,
				seatFee
			} = await Api.getCart({
				masterId,
				tableId: res.tableId,
				page: 1,
				size: 200
			})
			orderDetail.goodsList = records
			orderDetail.seatFee = seatFee ? seatFee : orderDetail.seatFee
		} else {
			const goodsMap = {}
			for (let i in res.detailList) {
				const goods = res.detailList[i]
				if (goods.productName != '客座费') {
					if (goodsMap.hasOwnProperty(goods.placeNum)) {
						goodsMap[goods.placeNum].push(goods)
					} else {
						goodsMap[goods.placeNum] = [goods]
					}
				}

			}
			orderDetail.seatFee = {
				name: '餐位费',
				number: res.seatCount,
				totalNumber: res.seatCount,
				totalAmount: res.seatAmount
			}
			orderDetail.goodsList = Object.entries(goodsMap).map(([key, value]) => ({
				info: value,
				placeNum: key
			}))
			console.log(orderDetail.goodsList);
		}
		console.log(orderDetail);
		orderDetail.info = res
	}

	function watchEmit() {
		uni.$off('orderDetail:update')
		uni.$once('orderDetail:update', (newval) => {
			console.log(newval);
			init()
		})
	}
	
	// 监听选择用户事件
	let user = ref(null)
	//更新选择用户
	function setUser(par) {
		const submitPar = {
			masterId: option.masterId,
			tableId: option.tableId,
			vipUserId: user.value.id ? user.value.id : '',
			type: user.value.id ? 0 : 1 //0 设置 1 取消
		}
		Object.assign(submitPar, par)
		return Api.$setUser(submitPar)
	}
	function watchChooseuser() {
		uni.$off('choose-user')
		uni.$on('choose-user', (data) => {
			console.log(data);
			user.value = data
			setUser()
		})
	}
	
	onShow(() => {
		watchEmit()
		watchChooseuser()
	})
	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>