<template>
	<u-popup v-model="show" mode="bottom" border-radius="16" height="auto" :closeable="true" @close="onClose">
		<view class="popup">
			<view class="title">整单调价</view>
			<view v-if="currentLabel" class="hint">当前浮动：{{ currentLabel }}</view>

			<view class="row">
				<text class="label">价格比例（100=原价）</text>
				<input class="input" type="digit" v-model="discountInput" placeholder="如 90=九折，120=涨20%" />
			</view>

			<view v-if="discountQuickOptions.length" class="quick-row">
				<text class="quick-label">快捷打折</text>
				<view class="quick-wrap">
					<text
						v-for="opt in discountQuickOptions"
						:key="opt.value"
						class="quick"
						@click="discountInput = String(opt.value)"
					>{{ opt.name }}</text>
				</view>
			</view>

			<view v-if="markupQuickOptions.length" class="quick-row">
				<text class="quick-label">快捷涨价</text>
				<view class="quick-wrap">
					<text
						v-for="opt in markupQuickOptions"
						:key="opt.value"
						class="quick markup"
						@click="discountInput = String(opt.value)"
					>{{ opt.name }}</text>
				</view>
			</view>

			<view class="actions">
				<button class="btn cancel" @click="onClose">取消</button>
				<button class="btn ghost" @click="discountInput = '100'">清除浮动</button>
				<button class="btn confirm" :loading="submitting" @click="onConfirm">确定</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { formatPriceDiscountLabel } from '@/subPackages/sub_business_shared/common/pricePercentAdjust.js'

export default {
	name: 'OrderPricePercentAdjustPopup',
	props: {
		visible: { type: Boolean, default: false },
		currentDiscount: { type: [Number, String], default: 100 },
		quickOptions: { type: Array, default: () => [] },
		submitting: { type: Boolean, default: false },
	},
	data() {
		return {
			show: false,
			discountInput: '100',
		}
	},
	computed: {
		currentLabel() {
			return formatPriceDiscountLabel(Number(this.currentDiscount) || 100)
		},
		discountQuickOptions() {
			return (this.quickOptions || []).filter((o) => Number(o.value) < 100)
		},
		markupQuickOptions() {
			return (this.quickOptions || []).filter((o) => Number(o.value) > 100)
		},
	},
	watch: {
		visible: {
			immediate: true,
			handler(v) {
				this.show = v
				if (v) {
					this.syncDiscountInput()
				}
			},
		},
		currentDiscount(v) {
			if (this.show) {
				this.syncDiscountInput(v)
			}
		},
		show(v) {
			if (!v) this.$emit('close')
		},
	},
	methods: {
		syncDiscountInput(discount) {
			const d = Number(discount ?? this.currentDiscount) || 100
			this.discountInput = String(d)
		},
		onClose() {
			this.show = false
		},
		onConfirm() {
			const priceDiscount = parseInt(String(this.discountInput).trim(), 10)
			if (!priceDiscount || priceDiscount <= 0) {
				uni.showToast({ title: '请输入有效比例', icon: 'none' })
				return
			}
			this.$emit('confirm', { priceDiscount })
		},
	},
}
</script>

<style lang="scss" scoped>
.popup { padding: 32rpx 32rpx 48rpx; }
.title { font-size: 32rpx; font-weight: 600; text-align: center; }
.hint { font-size: 26rpx; color: #666; text-align: center; margin-top: 12rpx; }
.row { margin-top: 28rpx; }
.label, .quick-label { font-size: 26rpx; color: #666; display: block; margin-bottom: 12rpx; }
.input { background: #f5f5f5; border-radius: 12rpx; padding: 20rpx; font-size: 28rpx; }
.quick-row { margin-top: 20rpx; }
.quick-wrap { display: flex; flex-wrap: wrap; gap: 16rpx; }
.quick { padding: 10rpx 24rpx; background: #eef9f6; color: #6acdbb; border-radius: 20rpx; font-size: 24rpx; }
.quick.markup { background: #fff7e6; color: #fa8c16; }
.actions { display: flex; gap: 16rpx; margin-top: 36rpx; }
.btn { flex: 1; font-size: 28rpx; border-radius: 12rpx; }
.cancel { background: #f5f5f5; color: #666; }
.ghost { background: #fff; color: #6acdbb; border: 1rpx solid #6acdbb; }
.confirm { background: #6acdbb; color: #fff; }
</style>
