<template>
	<div class="page dish-order-detail-page">
		<div class="order-header">
			<div>
				<div class="order-room-name">{{ currentRoom.roomName || '-' }}</div>
				<div class="order-room-sub">包房号：{{ currentRoom.roomNo || '-' }}
				</div>
			</div>

			<div class="order-header-actions">
				<el-button v-if="hasCurrentOrder" @click="goAddDish()" type="success" icon="el-icon-plus">加菜</el-button>
				<el-button v-if="hasCurrentOrder" @click="openReturnDishDialog()" type="warning"
					icon="el-icon-minus">退菜</el-button>
				<el-button @click="backRoomList()" type="primary" icon="el-icon-back">返回包房</el-button>
			</div>
		</div>

		<div class="order-main">
			<div v-if="!hasCurrentOrder" class="dish-panel">
				<div class="dish-search">
					<el-input v-model="dishSearchName" placeholder="搜索菜品名称" clearable @keyup.enter.native="searchDish()"
						@clear="searchDish()">
						<template #append>
							<el-button icon="el-icon-search" @click="searchDish()"></el-button>
						</template>
					</el-input>
				</div>

				<div class="dish-content">
					<div class="category-list">
						<div v-for="item in categoryList" :key="item.id" class="category-item"
							:class="{ 'category-active': activeTypeId === item.id }" @click="changeType(item)">
							{{ item.name }}
						</div>
					</div>

					<div class="dish-list" v-loading="dishLoading">
						<div v-if="dishList.length === 0" class="dish-empty">暂无菜品</div>
						<div v-else class="dish-grid">
							<div v-for="item in dishList" :key="item.id" class="dish-card">
								<el-image v-if="item.previewImageUrl" class="dish-image" :src="item.previewImageUrl"
									:preview-src-list="item.previewImageList" fit="cover" hide-on-click-modal
									append-to-body :z-index="9999"></el-image>
								<div v-else class="dish-image dish-image-empty">暂无图片</div>
								<div class="dish-info">
									<div class="dish-name">{{ item.dishName }}</div>
									<!-- <div class="dish-type">{{ item.typeName || '-' }}</div> -->
									<div class="dish-desc">{{ item.spec || item.taste || item.remarks || '暂无说明' }}</div>
									<div class="dish-bottom">
										<span class="dish-price">￥{{ formatMoney(item.salePrice) }}</span>
										<el-button type="primary" size="small" plain
											@click="addDish(item)">点菜</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ordered-panel" :class="{ 'ordered-panel-full': hasCurrentOrder }" v-loading="orderLoading">
				<div class="ordered-title">
					<span>已点菜</span>
					<div v-if="hasCurrentOrder" class="ordered-title-actions">
						<el-button type="primary" plain @click="viewCurrentOrder()">订单详情</el-button>
						<el-button type="danger" plain :loading="submitting"
							@click="confirmCancelOrder()">取消订单</el-button>
					</div>
				</div>

				<div v-if="orderedList.length === 0" class="ordered-empty">
					<div class="ordered-empty-title">暂未点菜</div>
					<div class="ordered-empty-sub">从左侧选择菜品后会显示在这里</div>
				</div>
				<div v-else class="ordered-list">
					<div class="ordered-head">
						<span></span>
						<span style="text-align: center;">菜品</span>
						<span style="text-align: center;">单价</span>
						<span style="text-align: center;">总价</span>
						<span style="text-align: center;">数量</span>
					</div>
					<div ref="orderedDragList" class="ordered-drag-list">
						<div v-for="item in orderedList" :key="item.dishId" class="ordered-item"
							:class="{ 'ordered-item-pending': item.pendingQuantity !== 0 }" :data-dish-id="item.dishId">
							<div class="ordered-drag-handle" title="拖拽排序">
								<i class="el-icon-rank"></i>
							</div>
							<div class="ordered-dish">
								<div class="ordered-dish-name">{{ item.dishName }}</div>
								<!-- <div class="ordered-dish-spec">{{ item.spec || item.unit || '-' }}</div> -->
							</div>
							<div class="ordered-price">￥{{ formatMoney(item.salePrice) }}</div>
							<div class="ordered-total">￥{{ formatMoney(itemTotal(item)) }}</div>
							<div class="ordered-qty">
								<el-button v-if="!hasCurrentOrder" icon="el-icon-minus" size="mini" circle
									@click="reduceDish(item)"></el-button>
								<span>{{ item.quantity }}</span>
								<el-button v-if="!hasCurrentOrder" icon="el-icon-plus" size="mini" circle
									@click="increaseOrderedDish(item)"></el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="ordered-footer">
					<div class="ordered-summary">
						<span>共 {{ orderedList.length }} 项</span>
						<strong>￥{{ formatMoney(orderTotal) }}</strong>
					</div>
					<div class="ordered-actions"
						:class="{ 'ordered-actions-settle-only': hasCurrentOrder && !hasChangedDish }">

						<el-button v-if="hasCurrentOrder && !hasChangedDish" style="width: 30%;" type="success"
							:loading="submitting" @click="openSettleDialog()">结账</el-button>
						<el-button v-if="!hasCurrentOrder || hasChangedDish" type="primary" :loading="submitting"
							@click="confirmSubmitOrder()">下单</el-button>
					</div>
				</div>
			</div>
		</div>
		<DishOrderSettleDialog v-model="settleDialogVisible" :order-total="orderTotal" :submitting="submitting"
			@confirm="handleSettleConfirm"></DishOrderSettleDialog>
		<DishOrderConfirmDialog v-model="confirmOrderDialogVisible" :current-room="currentRoom" :submitting="submitting"
			@confirm="handleConfirmOrderSubmit" @continue="continueOrderDish"></DishOrderConfirmDialog>
		<DishOrderReturnDialog v-model="returnDishDialogVisible" :current-room="currentRoom"
			:current-order="currentOrder" :ordered-list="orderedList" :submitting="submitting"
			@confirm="handleReturnDishConfirm"></DishOrderReturnDialog>
		<DishOrderInfoDialog ref="dishOrderInfoDialog"></DishOrderInfoDialog>
	</div>
</template>

<script>
import DishRoomService from '@/api/psi/DishRoomService'
import DishOrderService from '@/api/psi/DishOrderService'
import OSSSerivce from '@/api/sys/OSSService'
import DishOrderInfoDialog from './DishOrderInfoDialog'
import DishOrderSettleDialog from './DishOrderSettleDialog'
import DishOrderConfirmDialog from './DishOrderConfirmDialog'
import DishOrderReturnDialog from './DishOrderReturnDialog'
import Sortable from 'sortablejs'
export default {
	components: {
		DishOrderInfoDialog,
		DishOrderSettleDialog,
		DishOrderConfirmDialog,
		DishOrderReturnDialog
	},
	data() {
		return {
			currentRoom: {},
			currentOrder: null,
			categoryList: [],
			activeTypeId: 'all',
			dishSearchName: '',
			dishList: [],
			orderedList: [],
			dishLoading: false,
			orderLoading: false,
			submitting: false,
			settleDialogVisible: false,
			confirmOrderDialogVisible: false,
			returnDishDialogVisible: false,
			pendingOrderSubmit: null,
			orderedSortable: null
		}
	},
	computed: {
		orderTotal() {
			return this.orderedList.reduce((total, item) => {
				return total + this.itemTotal(item)
			}, 0)
		},
		changedDetailList() {
			return this.orderedList.filter(item => item.pendingQuantity !== 0)
		},
		hasChangedDish() {
			return this.changedDetailList.length > 0
		},
		hasCurrentOrder() {
			return !!(this.currentOrder && this.currentOrder.id)
		},
		submitDetailList() {
			return this.orderedList.map((item, index) => {
				return {
					dishId: item.dishId,
					dishName: item.dishName,
					quantity: item.pendingQuantity,
					dishSort: index + 1
				}
			})
		}
	},
	dishRoomService: null,
	dishOrderService: null,
	ossService: null,
	created() {
		this.dishRoomService = new DishRoomService()
		this.dishOrderService = new DishOrderService()
		this.ossService = new OSSSerivce()
	},
	mounted() {
		this.initPage()
		this.$nextTick(() => {
			this.initOrderedSortable()
		})
	},
	activated() {
		this.initPage()
		this.$nextTick(() => {
			this.initOrderedSortable()
		})
	},
	beforeUnmount() {
		this.destroyOrderedSortable()
	},
	methods: {
		initPage() {
			const roomId = this.$route.query.roomId
			if (!roomId) {
				this.backRoomList()
				return
			}
			this.loadRoom(roomId)
			this.loadCurrentOrder(roomId)
			this.activeTypeId = 'all'
			this.dishSearchName = ''
			this.loadCategoryList()
			this.loadDishList()
		},
		loadRoom(roomId) {
			this.dishRoomService.findById(roomId).then((data) => {
				this.currentRoom = data || {}
			})
		},
		loadCurrentOrder(roomId) {
			this.orderLoading = true
			this.dishOrderService.currentOrder(roomId).then((data) => {
				this.currentOrder = data || null
				const detailList = data && data.detailList ? data.detailList : []
				const orderedDetailList = [...detailList].sort((a, b) => {
					const sortA = Number(a.dishSort || 999999)
					const sortB = Number(b.dishSort || 999999)
					return sortA - sortB
				})
				this.orderedList = orderedDetailList.map(item => this.toOrderedItem(item, item.quantity || 0, 0))
				this.refreshDishSort()
				this.$nextTick(() => {
					this.initOrderedSortable()
				})
				this.orderLoading = false
			}).catch(() => {
				this.orderLoading = false
			})
		},
		backRoomList() {
			this.$router.push({
				path: '/psiManagement/dishManage/order/DishOrder'
			})
		},
		goAddDish() {
			if (!this.hasCurrentOrder) {
				return
			}
			this.$router.push({
				path: '/psiManagement/dishManage/order/DishOrderAdd',
				query: {
					roomId: this.$route.query.roomId,
					orderId: this.currentOrder.id
				}
			})
		},
		openReturnDishDialog() {
			if (!this.hasCurrentOrder) {
				return
			}
			this.returnDishDialogVisible = true
		},
		handleReturnDishConfirm(detailList) {
			this.submitting = true
			this.dishOrderService.submit({
				id: this.currentOrder.id,
				roomId: this.$route.query.roomId,
				settleFlag: '0',
				detailList: detailList
			}).then((data) => {
				this.$message.success(data)
				this.returnDishDialogVisible = false
				this.loadRoom(this.$route.query.roomId)
				this.loadCurrentOrder(this.$route.query.roomId)
			}).finally(() => {
				this.submitting = false
			})
		},
		loadCategoryList() {
			this.dishOrderService.typeList().then((data) => {
				this.categoryList = [
					{ id: 'all', name: '所有菜品' },
					...data.map(item => {
						return {
							id: item.id,
							name: item.name
						}
					})
				]
			})
		},
		changeType(item) {
			this.activeTypeId = item.id
			this.dishSearchName = ''
			this.loadDishList()
		},
		searchDish() {
			this.activeTypeId = 'all'
			this.loadDishList()
		},
		loadDishList() {
			this.dishLoading = true
			this.dishOrderService.dishList({
				typeId: this.activeTypeId === 'all' ? '' : this.activeTypeId,
				dishName: this.dishSearchName
			}).then((data) => {
				this.dishList = data
				this.dishLoading = false
				this.loadDishImagePreview()
			}).catch(() => {
				this.dishLoading = false
			})
		},
		addDish(dish) {
			const row = this.orderedList.find(item => item.dishId === dish.id)
			if (row) {
				row.quantity += 1
				row.pendingQuantity += 1
				return
			}
			this.orderedList.push(this.toOrderedItem(dish, 1, 1))
			this.refreshDishSort()
			this.$nextTick(() => {
				this.initOrderedSortable()
			})
		},
		increaseOrderedDish(item) {
			item.quantity += 1
			item.pendingQuantity += 1
		},
		reduceDish(item) {
			if (item.quantity <= 0) {
				return
			}
			item.quantity -= 1
			item.pendingQuantity -= 1
			if (item.quantity === 0 && item.baseQuantity === 0) {
				this.orderedList = this.orderedList.filter(row => row.dishId !== item.dishId)
				this.refreshDishSort()
				this.$nextTick(() => {
					this.initOrderedSortable()
				})
			}
		},
		openSettleDialog() {
			const changedList = this.changedDetailList
			if (!this.hasCurrentOrder && changedList.length === 0) {
				this.$message.warning('请先选择菜品')
				return
			}
			this.settleDialogVisible = true
		},
		handleSettleConfirm(settleInfo) {
			if (!this.hasCurrentOrder) {
				this.settleDialogVisible = false
				this.openConfirmOrderDialog('1', settleInfo, false)
				return
			}
			this.submitOrder('1', settleInfo, false)
		},
		confirmSubmitOrder() {
			const detailList = this.changedDetailList
			if (detailList.length === 0) {
				this.$message.warning('请先选择菜品')
				return
			}
			if (!this.hasCurrentOrder) {
				this.openConfirmOrderDialog('0', {}, true)
				return
			}
			this.$confirm('是否确认下单？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitOrder('0', {}, true)
			})
		},
		openConfirmOrderDialog(settleFlag, settleInfo = {}, requireChanged = false) {
			this.pendingOrderSubmit = {
				settleFlag,
				settleInfo,
				requireChanged
			}
			this.confirmOrderDialogVisible = true
		},
		continueOrderDish() {
			this.confirmOrderDialogVisible = false
		},
		handleConfirmOrderSubmit(orderInfo) {
			const pending = this.pendingOrderSubmit || {}
			this.submitOrder(pending.settleFlag || '0', pending.settleInfo || {}, pending.requireChanged, orderInfo)
		},
		confirmCancelOrder() {
			if (!this.hasCurrentOrder) {
				this.$message.warning('暂无可取消的订单')
				return
			}
			this.$confirm('确定取消当前订单吗？取消后包房将释放，未结账菜品不再计入订单。', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitting = true
				this.dishOrderService.cancelOrder(this.currentOrder.id).then((data) => {
					this.$message.success(data)
					this.submitting = false
					this.backRoomList()
				}).catch(() => {
					this.submitting = false
				})
			})
		},
		viewCurrentOrder() {
			if (!this.hasCurrentOrder) {
				this.$message.warning('暂无订单详情')
				return
			}
			this.$refs.dishOrderInfoDialog.init(this.currentOrder.id)
		},
		submitOrder(settleFlag, settleInfo = {}, requireChanged = false, orderInfo = {}) {
			const changedList = this.changedDetailList
			const detailList = settleFlag === '1' && changedList.length === 0 ? [] : this.submitDetailList
			if (requireChanged && changedList.length === 0) {
				this.$message.warning('请先选择菜品')
				return
			}
			if (settleFlag === '1' && !this.hasCurrentOrder && changedList.length === 0) {
				this.$message.warning('请先选择菜品')
				return
			}
			if (settleFlag !== '1' && detailList.length === 0) {
				this.$message.warning('请先选择菜品')
				return
			}
			this.submitting = true
			this.dishOrderService.submit({
				id: this.hasCurrentOrder ? this.currentOrder.id : '',
				roomId: this.$route.query.roomId,
				settleFlag: settleFlag,
				...settleInfo,
				...orderInfo,
				detailList: detailList
			}).then((data) => {
				this.$message.success(data)
				this.submitting = false
				this.settleDialogVisible = false
				this.confirmOrderDialogVisible = false
				this.loadRoom(this.$route.query.roomId)
				this.loadCurrentOrder(this.$route.query.roomId)
			}).catch(() => {
				this.submitting = false
			})
		},
		toOrderedItem(item, quantity, pendingQuantity) {
			const salePrice = Number(item.salePrice || 0)
			return {
				dishId: item.dishId || item.id,
				dishCode: item.dishCode,
				dishName: item.dishName,
				typeId: item.typeId,
				typeName: item.typeName,
				unit: item.unit,
				spec: item.spec,
				salePrice: salePrice,
				quantity: quantity,
				baseQuantity: quantity - pendingQuantity,
				pendingQuantity: pendingQuantity,
				dishSort: item.dishSort || 0
			}
		},
		initOrderedSortable() {
			// const el = this.$refs.orderedDragList
			// if (!el) {
			// 	this.destroyOrderedSortable()
			// 	return
			// }
			// if (this.orderedSortable) {
			// 	return
			// }
			// this.orderedSortable = Sortable.create(el, {
			// 	animation: 180,
			// 	filter: '.ordered-qty, .ordered-qty *',
			// 	preventOnFilter: false,
			// 	ghostClass: 'ordered-drag-ghost',
			// 	chosenClass: 'ordered-drag-chosen',
			// 	onEnd: (evt) => {
			// 		if (evt.oldIndex === evt.newIndex) {
			// 			return
			// 		}
			// 		const list = [...this.orderedList]
			// 		const moved = list.splice(evt.oldIndex, 1)[0]
			// 		list.splice(evt.newIndex, 0, moved)
			// 		this.orderedList = list
			// 		this.refreshDishSort()
			// 	}
			// })
		},
		destroyOrderedSortable() {
			if (this.orderedSortable) {
				this.orderedSortable.destroy()
				this.orderedSortable = null
			}
		},
		refreshDishSort() {
			this.orderedList.forEach((item, index) => {
				item.dishSort = index + 1
			})
		},
		itemTotal(item) {
			return Number(item.salePrice || 0) * Number(item.quantity || 0)
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		},
		loadDishImagePreview() {
			this.dishList.forEach((row) => {
				const urls = this.getImageUrls(row.imageUrl)
				if (urls.length === 0) {
					row.previewImageUrl = ''
					row.previewImageList = []
					return
				}
				row.previewImageList = urls
				row.previewImageUrl = urls[0]
				Promise.all(urls.map(url => this.getPreviewUrl(url))).then((list) => {
					row.previewImageList = list
					row.previewImageUrl = list[0]
				})
			})
		},
		getImageUrls(value) {
			if (!value) {
				return []
			}
			return value.split(',').map(item => item.trim()).filter(item => item)
		},
		getPreviewUrl(url) {
			if (url.indexOf('http') === 0) {
				return Promise.resolve(url)
			}
			return this.ossService.getTemporaryUrl(url).catch(() => url)
		}
	}
}
</script>

<style scoped>
.dish-order-detail-page {
	display: flex;
	flex-direction: column;
}

.order-header {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ebeef5;
	padding: 0 4px 12px;
}

.order-room-name {
	font-size: 20px;
	font-weight: 600;
	color: #303133;
	line-height: 28px;
}

.order-room-sub {
	font-size: 13px;
	color: #909399;
	line-height: 20px;
}

.order-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.order-header-actions .el-button+.el-button {
	margin-left: 0;
}

.order-main {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 16px;
	padding-top: 16px;
}

.ordered-panel-full {
	grid-column: 1 / -1;
}

.dish-panel,
.ordered-panel {
	min-height: 0;
	border: 1px solid #ebeef5;
	border-radius: 8px;
	background: #fff;
}

.dish-panel,
.ordered-panel {
	display: flex;
	flex-direction: column;
}

.dish-search {
	padding: 14px;
	border-bottom: 1px solid #ebeef5;
}

.dish-content {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
}

.category-list {
	background: #f7f9fb;
	border-right: 1px solid #ebeef5;
	overflow: auto;
}

.category-item {
	min-height: 46px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	cursor: pointer;
	color: #606266;
	border-left: 3px solid transparent;
}

.category-item:hover {
	color: #409eff;
	background: #eef5ff;
}

.category-active {
	color: #409eff;
	background: #fff;
	border-left-color: #409eff;
	font-weight: 600;
}

.dish-list {
	min-height: 0;
	overflow: auto;
	padding: 14px;
}

.dish-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.dish-card {
	min-width: 0;
	border: 1px solid #ebeef5;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.dish-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f2f3f5;
}

.dish-image-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #909399;
	font-size: 13px;
}

.dish-info {
	padding: 10px;
}

.dish-name {
	font-size: 15px;
	font-weight: 600;
	color: #303133;
	line-height: 22px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dish-type {
	margin-top: 2px;
	color: #909399;
	font-size: 12px;
	line-height: 18px;
}

.dish-desc {
	height: 24px;
	margin-top: 6px;
	color: #606266;
	font-size: 13px;
	line-height: 18px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dish-bottom {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dish-price {
	color: #f56c6c;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
}

.dish-empty {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #909399;
}

.ordered-title {
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #ebeef5;
}

.ordered-title-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ordered-title-actions .el-button+.el-button {
	margin-left: 0;
}

.ordered-count {
	font-size: 12px;
	font-weight: 400;
	color: #909399;
}

.ordered-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #909399;
	text-align: center;
	padding: 24px;
}

.ordered-empty-title {
	font-size: 16px;
	color: #606266;
	line-height: 24px;
}

.ordered-empty-sub {
	margin-top: 6px;
	font-size: 13px;
	line-height: 20px;
}

.ordered-list {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 12px;
}

.ordered-head,
.ordered-item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1.35fr) 72px 86px 104px;
	gap: 8px;
	align-items: center;
}

.ordered-head {
	height: 32px;
	padding: 0 8px;
	font-size: 12px;
	color: #909399;
	background: #f7f9fb;
	border-radius: 6px;
}

.ordered-item {
	min-height: 64px;
	/* cursor: grab; */
	padding: 10px 8px;
	border-bottom: 1px solid #ebeef5;
}

.ordered-item-pending {
	/* background: rgba(45, 140, 240, 0.3); */
}

.ordered-dish {
	min-width: 0;
}

.ordered-dish-name {
	font-size: 14px;
	font-weight: 600;
	color: #303133;
	line-height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ordered-dish-spec {
	margin-top: 2px;
	font-size: 12px;
	color: #909399;
	line-height: 18px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ordered-price,
.ordered-total {
	font-size: 13px;
	color: #606266;
}

.ordered-total {
	color: #f56c6c;
	font-weight: 600;
}

.ordered-qty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ordered-qty span {
	min-width: 22px;
	text-align: center;
	font-weight: 600;
	color: #303133;
}

.ordered-footer {
	border-top: 1px solid #ebeef5;
	padding: 12px;
}

.ordered-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 14px;
	color: #606266;
}

.ordered-summary strong {
	font-size: 22px;
	color: #f56c6c;
}

.ordered-actions {
	display: flex;
	justify-content: flex-end;
}

.ordered-actions-settle-only {
	justify-content: flex-end;
}

.ordered-actions .el-button {
	width: 50%;
}

@media (max-width: 1280px) {
	.order-main {
		grid-template-columns: minmax(0, 1fr) 380px;
	}

	.dish-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.dish-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.order-main {
		grid-template-columns: 1fr;
	}

	.dish-content {
		grid-template-columns: 120px minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.dish-grid {
		grid-template-columns: 1fr;
	}
}
</style>
