<template>
	<el-dialog title="订单结账" :close-on-click-modal="false" top="25vh" draggable width="520px"
		:model-value="modelValue" @update:model-value="updateVisible">
		<el-tabs v-model="settleType">
			<el-tab-pane label="结账" name="0">
				<div class="settle-normal">
					<span>订单金额</span>
					<strong>￥{{ formatMoney(orderTotal) }}</strong>
				</div>
			</el-tab-pane>
			<el-tab-pane label="折扣结账" name="1">
				<div class="settle-preview">
					<div>
						<span>账单原金额</span>
						<strong>￥{{ formatMoney(orderTotal) }}</strong>
					</div>
					<div>
						<span>折扣比例</span>
						<strong>{{ formatMoney(discountRate) }}%</strong>
					</div>
					<div>
						<span>折扣后金额</span>
						<strong style="color: #f56c6c;">￥{{ formatMoney(settlePayableAmount) }}</strong>
					</div>
				</div>
				<el-form label-width="100px">
					<el-form-item label="折扣比例">
						<el-input-number v-model="discountRate" :min="0" :max="100" :precision="2"
							style="width: 100%"></el-input-number>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="优惠结账" name="2">
				<div class="settle-preview">
					<div>
						<span>账单原金额</span>
						<strong>￥{{ formatMoney(orderTotal) }}</strong>
					</div>
					<div>
						<span>优惠金额</span>
						<strong>￥{{ formatMoney(settleDiscountAmount) }}</strong>
					</div>
					<div>
						<span>优惠后金额</span>
						<strong style="color: #f56c6c;">￥{{ formatMoney(settlePayableAmount) }}</strong>
					</div>
				</div>
				<el-form label-width="100px">
					<el-form-item label="优惠金额">
						<el-input-number v-model="discountAmount" :min="0" :max="orderTotal" :precision="2"
							style="width: 100%"></el-input-number>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="updateVisible(false)" icon="el-icon-circle-close">取消</el-button>
				<el-button type="primary" :loading="submitting" @click="confirmSettle()"
					icon="el-icon-circle-check">确认结账</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		modelValue: {
			type: Boolean,
			default: false
		},
		orderTotal: {
			type: Number,
			default: 0
		},
		submitting: {
			type: Boolean,
			default: false
		}
	},
	emits: ['update:modelValue', 'confirm'],
	data() {
		return {
			settleType: '0',
			discountRate: 100,
			discountAmount: 0
		}
	},
	computed: {
		settleDiscountAmount() {
			if (this.settleType === '1') {
				return this.orderTotal - this.settlePayableAmount
			}
			if (this.settleType === '2') {
				return Math.min(Number(this.discountAmount || 0), this.orderTotal)
			}
			return 0
		},
		settlePayableAmount() {
			if (this.settleType === '1') {
				const rate = Math.min(Math.max(Number(this.discountRate || 0), 0), 100)
				return this.orderTotal * rate / 100
			}
			if (this.settleType === '2') {
				return Math.max(this.orderTotal - Number(this.discountAmount || 0), 0)
			}
			return this.orderTotal
		}
	},
	watch: {
		modelValue(value) {
			if (value) {
				this.resetForm()
			}
		}
	},
	methods: {
		resetForm() {
			this.settleType = '0'
			this.discountRate = 100
			this.discountAmount = 0
		},
		updateVisible(value) {
			this.$emit('update:modelValue', value)
		},
		confirmSettle() {
			this.$emit('confirm', {
				settleType: this.settleType,
				discountRate: this.settleType === '1' ? this.discountRate : 100,
				discountAmount: this.settleType === '2' ? this.discountAmount : this.settleDiscountAmount
			})
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		}
	}
}
</script>

<style scoped>
.settle-normal {
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px;
	font-size: 15px;
	color: #606266;
}

.settle-normal strong {
	font-size: 28px;
	color: #f56c6c;
}

.settle-preview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px;
	border-radius: 6px;
	background: #f7f8fa;
}

.settle-preview div {
	min-width: 0;
}

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

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

</style>
