<template>
	<view class="fare-page">
		<!-- 设置方式 -->
		<view class="form-section">
			<view
				class="mode-row"
				:class="{ clickable: canSwitchMode }"
				@click="openModeSheet"
			>
				<text class="mode-label">免车费</text>
				<text class="mode-value">
					{{ settingModeLabel }}
					<text v-if="canSwitchMode" class="chevron">&gt;</text>
				</text>
			</view>
		</view>

		<!-- 统一设置 -->
		<view class="form-section" v-if="settingMode === 'unified'">
			<view class="km-row">
				<view class="km-label-wrap">
					<text class="km-label">白天免费公里数</text>
					<text class="km-time">7:30 至 19:30</text>
				</view>
				<view class="km-input-wrap">
					<input
						class="km-input"
						v-model="unifiedForm.dayKm"
						type="number"
						placeholder="请输入里程"
						placeholder-class="placeholder"
						@input="onKmInput('unified', 'dayKm', $event)"
					/>
					<text class="km-unit">km</text>
				</view>
			</view>
			<view class="km-row">
				<view class="km-label-wrap">
					<text class="km-label">夜间免费公里数</text>
					<text class="km-time">20:00 至 7:00</text>
				</view>
				<view class="km-input-wrap">
					<input
						class="km-input"
						v-model="unifiedForm.nightKm"
						type="number"
						placeholder="请输入里程"
						placeholder-class="placeholder"
						@input="onKmInput('unified', 'nightKm', $event)"
					/>
					<text class="km-unit">km</text>
				</view>
			</view>
		</view>

		<!-- 按项目分类设置 -->
		<view v-if="settingMode === 'byProject'">
			<view
				class="form-section project-block"
				v-for="item in projectForms"
				:key="item.categoryId"
			>
				<view class="service-row">
					<text class="service-label">服务</text>
					<text class="service-name">{{ item.categoryName }}</text>
				</view>
				<view class="km-row">
					<view class="km-label-wrap">
						<text class="km-label">白天免费公里数</text>
						<text class="km-time">7:30 至 19:30</text>
					</view>
					<view class="km-input-wrap">
						<input
							class="km-input"
							v-model="item.dayKm"
							type="number"
							placeholder="请输入里程"
							placeholder-class="placeholder"
							@input="onKmInput('project', 'dayKm', $event, item.categoryId)"
						/>
						<text class="km-unit">km</text>
					</view>
				</view>
				<view class="km-row">
					<view class="km-label-wrap">
						<text class="km-label">夜间免费公里数</text>
						<text class="km-time">20:00 至 7:00</text>
					</view>
					<view class="km-input-wrap">
						<input
							class="km-input"
							v-model="item.nightKm"
							type="number"
							placeholder="请输入里程"
							placeholder-class="placeholder"
							@input="onKmInput('project', 'nightKm', $event, item.categoryId)"
						/>
						<text class="km-unit">km</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-bar">
			<view class="save-btn" @click="onSave">保存</view>
		</view>

		<!-- 设置方式底部弹窗 -->
		<view class="sheet-mask" v-if="showModeSheet" @click="showModeSheet = false">
			<view class="sheet-panel" @click.stop>
				<view class="sheet-header">
					<text class="sheet-title">免车费设置</text>
					<text class="sheet-close" @click="showModeSheet = false">×</text>
				</view>
				<view
					class="sheet-option"
					v-for="opt in modeOptions"
					:key="opt.value"
					@click="selectMode(opt.value)"
				>
					<text class="option-text">{{ opt.label }}</text>
					<text class="option-check" v-if="settingMode === opt.value">✓</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/** 假数据：用户已开通的服务分类，接口就绪后替换 */
const MOCK_OPENED_CATEGORIES = [
	{ id: '1', name: '上门按摩' },
	{ id: '3', name: '爬山' },
]

const MODE_OPTIONS = [
	{ value: 'unified', label: '统一设置' },
	{ value: 'byProject', label: '按项目分类设置' },
]

export default {
	data() {
		return {
			openedCategories: [...MOCK_OPENED_CATEGORIES],
			settingMode: 'unified',
			modeOptions: MODE_OPTIONS,
			unifiedForm: {
				dayKm: '',
				nightKm: '',
			},
			projectForms: [],
			showModeSheet: false,
		}
	},
	computed: {
		canSwitchMode() {
			return this.openedCategories.length > 1
		},
		settingModeLabel() {
			const opt = MODE_OPTIONS.find(o => o.value === this.settingMode)
			return opt ? opt.label : '统一设置'
		},
	},
	onLoad() {
		this.initProjectForms()
		if (this.openedCategories.length <= 1) {
			this.settingMode = 'unified'
		}
	},
	methods: {
		initProjectForms() {
			this.projectForms = this.openedCategories.map(cat => ({
				categoryId: cat.id,
				categoryName: cat.name,
				dayKm: '',
				nightKm: '',
			}))
		},
		openModeSheet() {
			if (!this.canSwitchMode) return
			this.showModeSheet = true
		},
		selectMode(mode) {
			this.settingMode = mode
			this.showModeSheet = false
		},
		onKmInput(scope, field, e, categoryId) {
			const val = String(e.detail.value || '').replace(/\D/g, '')
			if (scope === 'unified') {
				this.unifiedForm[field] = val
			} else {
				const item = this.projectForms.find(p => p.categoryId === categoryId)
				if (item) item[field] = val
			}
		},
		validateForm() {
			if (this.settingMode === 'unified') {
				if (!this.unifiedForm.dayKm || !this.unifiedForm.nightKm) {
					return false
				}
				return true
			}
			return this.projectForms.every(item => item.dayKm && item.nightKm)
		},
		onSave() {
			if (!this.validateForm()) {
				uni.showToast({ title: '请输入公里数', icon: 'none' })
				return
			}
			// 保存接口待对接
			uni.showToast({ title: '设置成功', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1000)
		},
	},
}
</script>

<style lang="scss" scoped>
.fare-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 140rpx;
}

.form-section {
	background: #fff;
	margin-bottom: 16rpx;
}

.mode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;

	&.clickable:active {
		background: #fafafa;
	}
}

.mode-label {
	font-size: 30rpx;
	color: #333;
}

.mode-value {
	font-size: 28rpx;
	color: #666;
}

.chevron {
	margin-left: 8rpx;
	color: #999;
}

.km-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;

	&:last-child {
		border-bottom: none;
	}
}

.km-label-wrap {
	flex-shrink: 0;
}

.km-label {
	display: block;
	font-size: 30rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.km-time {
	font-size: 24rpx;
	color: #999;
}

.km-input-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
	margin-left: 24rpx;
}

.km-input {
	flex: 1;
	text-align: right;
	font-size: 28rpx;
	color: #333;
	max-width: 240rpx;
}

.placeholder {
	color: #ccc;
	font-size: 28rpx;
}

.km-unit {
	font-size: 28rpx;
	color: #333;
	margin-left: 8rpx;
	flex-shrink: 0;
}

.project-block {
	margin-bottom: 16rpx;
}

.service-row {
	display: flex;
	align-items: center;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.service-label {
	font-size: 30rpx;
	color: #333;
	margin-right: 24rpx;
}

.service-name {
	font-size: 28rpx;
	color: #666;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	background: #fff;
	border-top: 1rpx solid #eee;
}

.save-btn {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #333;
	color: #fff;
	font-size: 32rpx;
	border-radius: 12rpx;
}

.sheet-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.sheet-panel {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
}

.sheet-header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 32rpx;
	border-bottom: 1rpx solid #eee;
}

.sheet-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.sheet-close {
	position: absolute;
	right: 32rpx;
	font-size: 40rpx;
	color: #999;
	line-height: 1;
}

.sheet-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.option-text {
	font-size: 30rpx;
	color: #333;
}

.option-check {
	font-size: 32rpx;
	color: #0879ff;
}
</style>
