<template>
	<div>
		<el-dialog title="订单详情" :close-on-click-modal="false" draggable width="900px" v-model="visible">
			<div v-if="currentOrder" v-loading="loading" class="order-detail">
				<el-descriptions :column="3" border class="detail-summary">
					<el-descriptions-item label="订单编号">{{ currentOrder.orderNo || '-' }}</el-descriptions-item>
					<el-descriptions-item label="包房">{{ currentOrder.roomName || '-' }}</el-descriptions-item>
					<el-descriptions-item label="订单状态">{{ orderStatusName(currentOrder.orderStatus)
					}}</el-descriptions-item>
					<el-descriptions-item label="结账方式">{{ settleTypeName(currentOrder.settleType)
					}}</el-descriptions-item>
					<el-descriptions-item label="账单原金额">￥{{ formatMoney(currentOrder.totalAmount)
					}}</el-descriptions-item>
					<el-descriptions-item label="折扣比例">{{ discountRateText(currentOrder) }}</el-descriptions-item>
					<el-descriptions-item label="优惠金额">￥{{ formatMoney(currentOrder.discountAmount)
					}}</el-descriptions-item>
					<el-descriptions-item label="实收金额">￥{{ formatMoney(currentOrder.payableAmount)
					}}</el-descriptions-item>
					<el-descriptions-item label="结账时间/取消时间">{{ currentOrder.settleTime || '-' }}</el-descriptions-item>
					<el-descriptions-item label="备注" :span="3">
						<div class="description-text">{{ currentOrder.tasteRemark || '-' }}</div>
					</el-descriptions-item>
				</el-descriptions>
				<el-tabs v-model="activeTab">
					<el-tab-pane label="实际菜单" name="actual">
						<vxe-table border="inner" auto-resize resizable :data="currentOrder.detailList || []"
							max-height="420">
							<vxe-column type="seq" width="60" title="序号"></vxe-column>
							<vxe-column min-width="180" title="菜品" field="dishName"></vxe-column>
							<vxe-column min-width="130" title="分类" field="typeName"></vxe-column>
							<vxe-column width="100" title="规格" field="spec"></vxe-column>
							<vxe-column width="90" title="单价" field="salePrice">
								<template #default="scope">￥{{ formatMoney(scope.row.salePrice) }}</template>
							</vxe-column>
							<vxe-column width="80" title="数量" field="quantity"></vxe-column>
							<vxe-column width="100" title="金额" field="amount">
								<template #default="scope">￥{{ formatMoney(scope.row.amount) }}</template>
							</vxe-column>
							<vxe-column min-width="170" title="下单时间" field="createTime"></vxe-column>
						</vxe-table>
						<div class="dish-list-summary">
							<span>共 {{ detailListCount(currentOrder.detailList) }} 项，总价</span>
							<strong>￥{{ formatMoney(detailListAmount(currentOrder.detailList)) }}</strong>
						</div>
					</el-tab-pane>
					<el-tab-pane label="加菜" name="add">
						<vxe-table border="inner" auto-resize resizable :data="currentOrder.addDishList || []"
							max-height="420">
							<vxe-column type="seq" width="60" title="序号"></vxe-column>
							<vxe-column min-width="180" title="菜品" field="dishName"></vxe-column>
							<vxe-column min-width="130" title="分类" field="typeName"></vxe-column>
							<vxe-column width="100" title="规格" field="spec"></vxe-column>
							<vxe-column width="90" title="单价" field="salePrice">
								<template #default="scope">￥{{ formatMoney(scope.row.salePrice) }}</template>
							</vxe-column>
							<vxe-column width="80" title="数量" field="quantity"></vxe-column>
							<vxe-column width="100" title="金额" field="amount">
								<template #default="scope">￥{{ formatMoney(scope.row.amount) }}</template>
							</vxe-column>
							<vxe-column min-width="170" title="加菜时间" field="createTime"></vxe-column>
						</vxe-table>
						<div class="dish-list-summary">
							<span>共 {{ detailListCount(currentOrder.addDishList) }} 项，总价</span>
							<strong>￥{{ formatMoney(detailListAmount(currentOrder.addDishList)) }}</strong>
						</div>
					</el-tab-pane>
					<el-tab-pane label="退菜" name="reduce">
						<vxe-table border="inner" auto-resize resizable :data="currentOrder.reduceDishList || []"
							max-height="420">
							<vxe-column type="seq" width="60" title="序号"></vxe-column>
							<vxe-column min-width="180" title="菜品" field="dishName"></vxe-column>
							<vxe-column min-width="130" title="分类" field="typeName"></vxe-column>
							<vxe-column width="100" title="规格" field="spec"></vxe-column>
							<vxe-column width="90" title="单价" field="salePrice">
								<template #default="scope">￥{{ formatMoney(scope.row.salePrice) }}</template>
							</vxe-column>
							<vxe-column width="80" title="数量" field="quantity">
								<template #default="scope">{{ Math.abs(scope.row.quantity || 0) }}</template>
							</vxe-column>
							<vxe-column width="100" title="金额" field="amount">
								<template #default="scope">￥{{ formatMoney(Math.abs(scope.row.amount || 0))
								}}</template>
							</vxe-column>
							<vxe-column min-width="180" title="退菜原因" field="reason"></vxe-column>
							<vxe-column min-width="170" title="退菜时间" field="createTime"></vxe-column>
						</vxe-table>
						<div class="dish-list-summary">
							<span>共 {{ detailListCount(currentOrder.reduceDishList) }} 项，总价</span>
							<strong>￥{{ formatMoney(detailListAmount(currentOrder.reduceDishList, true)) }}</strong>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'
export default {
	data() {
		return {
			visible: false,
			loading: false,
			activeTab: 'actual',
			currentOrder: null
		}
	},
	dishOrderService: null,
	created() {
		this.dishOrderService = new DishOrderService()
	},
	methods: {
		init(id) {
			this.visible = true
			this.loading = true
			this.activeTab = 'actual'
			this.currentOrder = null
			this.dishOrderService.findOrderById(id).then((data) => {
				this.currentOrder = data || {}
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		orderStatusName(value) {
			if (value === '0') {
				return '用餐中'
			}
			if (value === '1') {
				return '已结账'
			}
			if (value === '2') {
				return '已取消'
			}
			return '-'
		},
		settleTypeName(value) {
			if (value === '1') {
				return '折扣结账'
			}
			if (value === '2') {
				return '优惠结账'
			}
			if (value === '0') {
				return '结账'
			}
			return '-'
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		},
		detailListCount(list) {
			return (list || []).length
		},
		detailListAmount(list, absolute = false) {
			return (list || []).reduce((total, item) => {
				const amount = Number(item.amount || 0)
				return total + (absolute ? Math.abs(amount) : amount)
			}, 0)
		},
		discountRateText(order) {
			if (!order || order.settleType !== '1') {
				return '-'
			}
			return this.formatMoney(order.discountRate) + '%'
		},
	}
}
</script>

<style scoped>
.order-detail {
	min-height: 220px;
}

.detail-summary {
	margin-bottom: 14px;
}

.description-text {
	white-space: pre-wrap;
	word-break: break-word;
}

.dish-list-summary {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 10px;
	font-size: 14px;
	color: #606266;
}

.dish-list-summary strong {
	font-size: 18px;
	color: #f56c6c;
}
</style>
