<template>
	<view class="page-gray color-333 u-font-28">
		<view class="block">
			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view>选择用户</view>
				<view class="u-m-t-24 u-flex u-row-between " @tap="chooseUser">
					<view v-if="!user">选择用户</view>
					<view class="u-flex" v-else>
						<view class="headeimg">
							<image class="img" :src="user.headImg" mode=""></image>
						</view>
						<view class="u-m-l-20">{{user.nickName}}</view>
						<view class="color-main u-m-l-10 u-font-24">{{user.isVip?'会员':'' }}</view>
						<view class="u-font-24 u-m-l-30"><text>余额：</text><text class="color-main">{{user.amount}}</text>
						</view>
						<view class="u-font-24 u-m-l-30"><text>积分：</text><text
								class="color-main">{{user.totalScore}}</text></view>
					</view>
					<uni-icons type="right" color="#999" size="22"></uni-icons>
				</view>
			</view>
			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view>就餐类型</view>
				<view class="u-m-t-24 u-flex  ">
					<view class="u-flex color-666">
						<radio-group @change="radioGroupChange">
							<label class="radio u-m-r-60" v-for="(item,index) in eatTypes.list" :key="index">
								<radio :value="''+index" :checked="index === eatTypes.active" class="scale7 " />
								<text>{{item.label}}</text>
							</label>
						</radio-group>

					</view>
				</view>
			</view>

			<view class="u-p-b-24 u-m-b-24 border-bottom" @tap="chooseTable">
				<view>选择桌码</view>
				<view class="u-m-t-24 u-flex u-row-between ">
					<view>
						<text v-if="table">{{table.name}}</text>
						<text v-else>不选择桌台</text>
					</view>
					<uni-icons type="right" color="#999" size="22"></uni-icons>
				</view>
			</view>

		</view>



		<view class="block">
			<template v-if="!user">
				<view class="u-p-b-24 u-m-b-24 border-bottom">
					<view>用餐人数（人）</view>
					<picker @change="userNumberChange" :value="userNumbers.defaultCateIndex" :range="userNumbers.list">
						<view class="u-m-t-24 u-flex u-row-between ">
							<view class="color-333">{{userNumbers.defaultCateIndex||''}}</view>
							<uni-icons type="right" color="#999" size="22"></uni-icons>
						</view>
					</picker>
				</view>
			</template>
			<template v-else>
				<view>
					<view class="u-flex border-bottom u-p-b-24">
						<image class="headeimg" src="@/static/uni.png" mode=""></image>
						<view class="u-m-l-32">
							<view class="">{{user.name}}</view>
							<view class="color-main  u-font-24">{{user.isVip?'永久会员':'' }}</view>
						</view>
					</view>
					<view class="u-flex u-m-t-24 u-row-between u-font-24 color-999">
						<view class="u-flex">
							<view>余额</view>
							<view class="color-333 u-m-l-10"> 0.00</view>
						</view>
						<view class="u-flex">
							<view>积分</view>
							<view class="color-333 u-m-l-10"> 0</view>
						</view>
						<view class="u-flex">
							<view>已消费</view>
							<view class="color-333 u-m-l-10"> 0.00</view>
						</view>
					</view>
				</view>
			</template>


		</view>

		<view class="block">
			<view class="u-p-b-24  ">
				<view class="font-bold">订单备注</view>
				<view class="u-m-t-32 u-flex ">
					<uni-easyinput type="textarea" v-model="note" placeholder="请输入备注"></uni-easyinput>
				</view>
			</view>

		</view>

		<view class="block">
			<view class="u-flex">
				<view>共</view>
				<view class="fen font-bold">{{goodsNumber}}</view>
				<view>份菜品</view>
			</view>

			<view class="goods u-m-t-32">
				<view class="item u-m-b-40" @click="changeGoodsSel(index)" v-for="(item,index) in goods.list"
					:key="index">
					<view class="u-flex u-row-between">
						<view class="u-flex">
							<image class="img" :src="item.coverImg" mode=""></image>
							<view class="u-m-l-32">
								<view class="u-flex">
									<view class="u-flex u-m-r-20" v-if="item.isWait">
										<uni-tag text="等叫"
											custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;">
										</uni-tag>
									</view>
									<view class="u-m-r-20 u-flex" v-if="item.isGift">
										<uni-tag text="赠送"
											custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;">
										</uni-tag>
									</view>
									<view class="u-m-r-20 u-flex" v-if="item.isPack">
										<uni-tag
											custom-style="background-color: #E6F0FF; border-color: #E6F0FF; color: #318AFE;"
											size="small" text="打包" inverted type="success" />
									</view>
									<view>
										{{item.name}}
									</view>
								</view>
								<view class="u-font-24 color-999 u-m-t-10">{{item.specSnap||' '}}</view>
							</view>
						</view>
						<view class="">
							<view class="font-bold">
								<text>￥</text>
								<text v-if="item.isGift">0</text>
								<text v-else>{{formatPrice(item.salePrice*item.number) }}</text>
							</view>
							<view class="color-999 u-text-right u-font-24 u-m-t-12">×{{item.number}}</view>
						</view>
					</view>

					<scroll-view scroll-x="true" v-if="index==goods.sel">
						<view class="u-m-t-32  u-flex no-wrap">
							<view class="u-flex u-m-r-20 u-m-b-20">
								<button class="tag" hover-class="hover-class" @tap="showModel('discount')">单品打折</button>
							</view>
							<view class="u-flex u-m-r-20 u-m-b-20">
								<!-- <button class="tag" hover-class="hover-class" @tap="showModel('giveFood')">赠菜</button> -->
								<button class="tag" hover-class="hover-class"
									@tap="toggleGoodsItemKey(item,index,'isGift')">{{item.isGift?'取消赠送':'赠送'}}</button>
							</view>
							<view class="u-flex u-m-r-20 u-m-b-20">
								<button class="tag" hover-class="hover-class"
									@tap="toggleGoodsItemKey(item,index,'isPack')">{{item.isPack?'取消打包':'打包'}}</button>
							</view>
							<!-- <view class="u-flex u-m-r-20 u-m-b-20">
								<button class="tag" hover-class="hover-class"
									@tap="toggleWait(item)">{{item.isWait?'取消等叫':'等叫'}}</button>
							</view> -->
							<view class="u-flex u-m-r-20 u-m-b-20">
								<button class="tag" hover-class="hover-class" @tap="showModel('remark')">单品备注</button>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>

			<view class="u-flex u-row-between u-m-t-30 u-p-b-34 border-bottom">
				<view>
					<text v-if="eatTypes.active==1">包装费</text>
					<text v-else>桌位费</text>
				</view>
				<view>￥0.00</view>
			</view>

			<view class="u-flex u-row-right u-m-t-38">
				<view class="color-main" @tap="showModel('editMoney')">修改</view>
				<view class="u-flex price  u-m-l-32">
					<view class="">实收金额</view>
					<view class="font-bold u-font-32">￥{{formatPrice(allPrice) }}</view>
				</view>
			</view>


		</view>

		<view style="height: 300rpx;"></view>
		<view class="safe-bottom fixed">
			<view>
				<label class="radio">
					<radio value="" class="scale7" /><text>打印预结算</text>
				</label>
			</view>

			<view class="u-m-t-48 btn">
				<my-button shape="circle" @click="createOrder">提交</my-button>
			</view>

		</view>

		<model-discount title="菜品打折/减免" :ref="setModel" name="discount"></model-discount>
		<give-food title="赠菜" :ref="setModel" name="giveFood"></give-food>
		<my-remark title="单品备注" :ref="setModel" name="remark"></my-remark>
		<edit-discount title="优惠金额" :ref="setModel" name="editMoney"></edit-discount>
	</view>


</template>

<script setup>
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onBeforeUnmount,
		reactive,
		computed
	} from 'vue';
	import myButton from '@/components/my-components/my-button'
	import modelDiscount from './components/discount'
	import giveFood from './components/give-food'
	import myRemark from './components/remark'
	import editDiscount from './components/edit-discount'
	import go from '@/commons/utils/go.js';
	import {
		returnBoolean
	} from '@/commons/utils/format.js';
	import color from '@/commons/color.js';
	import * as Api from '@/http/yskApi/Instead.js'
	const models = new Map();
	//备注
	let note=ref('')
	function setModel(el) {
		if (el && el.$attrs['name']) {
			models.set(el.$attrs['name'], el);
		}
	}

	function showModel(key) {
		const model = models.get(key)
		model && model.open()
	}

	function formatPrice(n) {
		return Number(n).toFixed(2)
	}



	//用餐人数
	const userNumbers = reactive({
		list: new Array(100).fill(1).map((v, index) => {
			return index === 0 ? '无' : index + '人'
		}),
		defaultCateIndex: 1,
	})

	function userNumberChange(e) {
		userNumbers.defaultCateIndex = e.detail.value
	}

	const form = reactive({})
	//切换商品状态
	async function toggleGoodsItemKey(item, index, key) {
		const {
			productId,
			skuId,
			id,
			number
		} = item
		const par = {
			masterId: option.masterId,
			tableId: option.tableId,
			productId,
			num: number,
			skuId
		}
		par[key] = !item[key]
		const res = await Api.addCart(par)
		goods.list[index][key] = returnBoolean(res[key])
	}
	//等叫
	function toggleWait(item) {
		item.isWait = !item.isWait
	}



	const eatTypes = reactive({
		list: [{
				label: '堂食',
				value: '1'
			},
			{
				label: '自取',
				value: '2'
			},
		],
		active: 1
	})

	function radioGroupChange(e) {
		eatTypes.active = e.detail.value
		console.log(eatTypes.active);
	}


	function chooseUser() {
		go.to('PAGES_CHOOSE_USER')
	}

	function chooseTable() {
		go.to('PAGES_CHOOSE_TABLE',{
			...table.value
		})
	}

	// 监听选择用户事件
	let user = ref(null)

	function watchChooseuser() {
		uni.$off('choose-user')
		uni.$on('choose-user', (data) => {
			console.log(data);
			user.value = data
		})
	}
	let table = ref(null)

	function watchChooseTable() {
		uni.$off('choose-table')
		uni.$on('choose-table', (data) => {
			table.value = data
			console.log(table.value);
		})
	}
	
	const option = reactive({
		masterId: '',
		tableId: ""
	})
	const goods = reactive({
		list: [],
		sel: 0
	})
	const goodsNumber = computed(() => {
		let result = 0
		result = goods.list.reduce((prve, cur) => {
			return prve + cur.number
		}, 0)
		return result
	})
	const allPrice = computed(() => {
		return goods.list.reduce((prve, cur) => {
			console.log(cur.salePrice * cur.number);
			return prve + cur.salePrice * cur.number * (cur.isGift ? 0 : 1)
		}, 0).toFixed(2)
	})

	function setGoodsItem(key, val) {
		item[key] = val
	}

	function changeGoodsSel(index) {
		goods.sel = index
	}
	//获取购物车数据
	async function getCart(par = {
		page: 0,
		size: 300,
		masterId: option.masterId,
		tableId: option.tableId
	}) {
		const res = await Api.getCart(par)
		goods.list = res.records.map(item => {
			return {
				...item,
				isPack: returnBoolean(item.isPack),
				isGift: returnBoolean(item.isGift)
			}
		})
		console.log(goods.list);
	}
	
	// 创建订单
	async function createOrder(par = {
		masterId: option.masterId,
		vipUserId:user.value?user.value.id:'',
		note:note.value,
		postPay:true,
		orderId:'',
		tableId: option.tableId
	}) {
		const res = await Api.$createOrder(par)
		uni.showToast({
			title:'提交成功',
			icon:'none'
		})
		setTimeout(()=>{
			uni.navigateBack({delta:2})
		},500)
	}
	
	onLoad((opt) => {
		console.log(opt);
		Object.assign(option, opt)
		if(opt){
			table.value={
				tableId:opt.tableId,
				name:opt.tableName
			}
		}
		getCart()
	})
	onBeforeUnmount(() => {

	})
	onShow(()=>{
		watchChooseuser()
		watchChooseTable()
	})
	
</script>

<style lang="scss" scoped>
	.fen {
		color: #FF9F2E;
	}

	.page-gray {
		padding: 32rpx 28rpx;
	}

	.headeimg {
		width: 84rpx;
		height: 84rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.block {
		background-color: #fff;
		padding: 32rpx 24rpx;
		border-radius: 18rpx;
		margin-bottom: 32rpx;
	}

	.textarea {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 32rpx 0 32rpx 24rpx;
		border: 1px solid #999999;
		overflow: hidden;
	}

	.goods {
		padding-bottom: 30rpx;
		border-bottom: 1px dashed #E5E5E5;

		.item {
			.img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}

	.headeimg {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		background-color: #eee;
		border-radius: 12rpx;
		overflow: hidden;

		.img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.price {
		color: #EB4F4F;
	}

	.opacity0 {
		opacity: 0;
	}

	.fixed {
		position: fixed;
	}

	.safe-bottom {
		padding: 34rpx 28rpx;
		background-color: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;

		.btn {
			padding: 0 88rpx 56rpx 88rpx;
		}
	}

	.tag {
		background-color: #fff;
		border: 1px solid #E5E5E5;
		line-height: inherit;
		font-size: 24rpx;
		color: #666666;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
	}

	.hover-class {
		background-color: #E5E5E5;
	}
</style>