<template>
	<div class="dish-order-approval-page" v-loading="loading">
		<!-- <div class="approval-title">折扣优惠结账信息</div> -->
		<el-card shadow="never" class="approval-card">
			<template #header>
				<div class="card-header">订单信息</div>
			</template>
			<div v-if="currentOrder" class="order-detail">
				<div class="detail-summary">
					<div><span>订单编号</span><strong>{{ currentOrder.orderNo || '-' }}</strong></div>
					<div><span>包房</span><strong>{{ currentOrder.roomName || '-' }}</strong></div>
					<div><span>订单状态</span><strong>{{ orderStatusName(currentOrder.orderStatus) }}</strong></div>
					<div><span>结账方式</span><strong>{{ settleTypeName(currentOrder.settleType) }}</strong></div>
					<div><span>账单原金额</span><strong>￥{{ formatMoney(currentOrder.totalAmount) }}</strong></div>
					<div><span>折扣比例</span><strong>{{ discountRateText(currentOrder) }}</strong></div>
					<div><span>优惠金额</span><strong>￥{{ formatMoney(currentOrder.discountAmount) }}</strong></div>
					<div><span>实收金额</span><strong>￥{{ formatMoney(currentOrder.payableAmount) }}</strong></div>
					<div><span>结账时间/取消时间</span><strong>{{ currentOrder.settleTime || '-' }}</strong></div>
				</div>
				<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-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 sort-by 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>
		</el-card>
	</div>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'
export default {
	props: {
		businessId: {
			type: String,
			default: ''
		},
		formReadOnly: {
			type: Boolean,
			default: true
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			loading: false,
			activeTab: 'actual',
			currentOrder: null
		}
	},
	dishOrderService: null,
	created() {
		this.dishOrderService = new DishOrderService()
		this.init()
	},
	activated() {
		this.init()
	},
	watch: {
		businessId() {
			this.init()
		}
	},
	methods: {
		init() {
			const id = this.getBusinessId()
			this.activeTab = 'actual'
			this.currentOrder = null
			if (!id || id === 'false') {
				return
			}
			this.loading = true
			this.$emit('changeLoading', true)
			this.dishOrderService.findOrderById(id).then((data) => {
				this.currentOrder = data || {}
				this.loading = false
				this.$emit('changeLoading', false)
			}).catch(() => {
				this.loading = false
				this.$emit('changeLoading', false)
			})
		},
		getBusinessId() {
			return this.businessId || this.$route.query.businessId || this.$route.query.id || ''
		},
		getKeyWatch() {
			this.init()
		},
		close() {
			this.currentOrder = null
		},
		saveForm(callback) {
			callback && callback()
		},
		agreeForm(callback) {
			callback && callback()
		},
		startForm(callback) {
			const order = this.currentOrder || {}
			callback && callback('psi_dish_order', order.id || this.getBusinessId(), order)
		},
		reapplyForm(callback) {
			const order = this.currentOrder || {}
			callback && callback('psi_dish_order', order.id || this.getBusinessId(), order)
		},
		updateStatusById(type, callback) {
			const order = this.currentOrder || {}
			if (callback) {
				callback('psi_dish_order', order.id || this.getBusinessId(), order)
			}
		},
		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 '-'
		},
		discountRateText(order) {
			if (!order || order.settleType !== '1') {
				return '-'
			}
			return this.formatMoney(order.discountRate) + '%'
		},
		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)
		}
	}
}
</script>

<style scoped>
.dish-order-approval-page {
	padding: 10px 0 66px;
	min-height: 100px;
}

.approval-title {
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	line-height: 32px;
	margin-bottom: 14px;
	color: #303133;
}

.approval-card {
	border-radius: 6px;
}

.card-header {
	font-size: 15px;
	font-weight: 600;
	color: #303133;
}

.order-detail {
	min-height: 220px;
}

.detail-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px;
	border-radius: 6px;
	background: #f7f8fa;
}

.detail-summary div {
	min-width: 0;
}

.detail-summary span {
	display: block;
	font-size: 12px;
	line-height: 18px;
	color: #909399;
}

.detail-summary strong {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 22px;
	color: #303133;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.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;
}

@media (max-width: 900px) {
	.detail-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
</style>
