<template>
	<view class="fare-page">
		<!-- 设置方式 + 统一设置 -->
		<view class="setting-card">
			<view class="card-head">
				<text class="card-title">免车费</text>
				<view class="mode-switch">
					<view class="mode-option" @click="selectMode('unified')">
						<view class="radio-dot" :class="{ checked: settingMode === 'unified' }">
							<text v-if="settingMode === 'unified'" class="radio-check">✓</text>
						</view>
						<text class="mode-text">统一设置</text>
					</view>
					<view
						class="mode-option"
						:class="{ disabled: !canSwitchMode }"
						@click="selectMode('byProject')"
					>
						<view class="radio-dot" :class="{ checked: settingMode === 'byProject' }">
							<text v-if="settingMode === 'byProject'" class="radio-check">✓</text>
						</view>
						<text class="mode-text">按项目设置</text>
					</view>
				</view>
			</view>

			<template v-if="settingMode === 'unified'">
				<view class="card-divider"></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="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>
			</template>
		</view>
		<!-- 按项目设置 -->
		<view class="project-list" v-if="settingMode === 'byProject'">
			<view
				class="setting-card"
				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="card-divider"></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>
</template>
<script>
/** 假数据：用户已开通的服务分类，接口就绪后替换 */
const MOCK_OPENED_CATEGORIES = [
	{ id: '1', name: '上门按摩' },
	{ id: '3', name: '爬山' },
]
import { saveFareSetting,getSkillList } from '@/api/workbench'
export default {
	data() {
		return {
			openedCategories: [],
			settingMode: 'unified',
			unifiedForm: {
				dayKm: '',
				nightKm: '',
			},
			projectForms: [],
		}
	},
	computed: {
		canSwitchMode() {
			return this.openedCategories.length > 1
		},
	},
	onLoad() {
		this.getSkillList()
		setTimeout(() => {
			this.initProjectForms()
			if (this.openedCategories.length <= 1) {
			this.settingMode = 'unified'
		}
		}, 500)
		
	},
	methods: {
		getSkillList() {
			let params = {
				auditStatus: "1", //审核状态：0-待审核，1-审核通过，2-审核驳回
				merchantId: uni.getStorageSync('merchantId'), //商户ID
			}
			getSkillList(params).then(res => {
				if (res.data.code == 200) {
					this.openedCategories = res.data.data || [];
				}
			})
		},
		initProjectForms() {
			this.projectForms = this.openedCategories.map(cat => ({
				categoryId: cat.projectId,
				categoryName: cat.projectName,
				dayKm: '',
				nightKm: '',
			}))
		},
		selectMode(mode) {
			if (mode === 'byProject' && !this.canSwitchMode) {
				uni.showToast({ title: '请先开通服务分类', icon: 'none' })
				return
			}
			this.settingMode = mode
		},
		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
			}
			let params = {
				merchantId: uni.getStorageSync('userId'),
				openId: uni.getStorageSync('openId'),
				
			}
			if(this.settingMode === 'unified'){
				params.mode=1
				params.unifiedConfig= {
					dayFreeKm: this.unifiedForm.dayKm,
					nightFreeKm: this.unifiedForm.nightKm,
				}
				params.categoryConfigs=null
			}else{
				params.mode=2
				params.unifiedConfig=null
				params.categoryConfigs = this.projectForms.map(item => ({
					categoryId: item.categoryId,
					categoryName: item.categoryName,
					dayFreeKm: item.dayKm,
					nightFreeKm: item.nightKm,
				}))

			}
			
			// 保存接口待对接
			saveFareSetting(params).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: res.data.msg, icon: 'none' })
					setTimeout(() => uni.navigateBack(), 1000)
				}
			})
		},
	},
}
</script>

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

.setting-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	flex-shrink: 0;
}

.mode-switch {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-left: 16rpx;
}

.mode-option {
	display: flex;
	align-items: center;
	gap: 8rpx;
	&.disabled {
		opacity: 0.4;
	}
}

.radio-dot {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 2rpx solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	&.checked {
		background: #333;
		border-color: #333;
	}
}

.radio-check {
	font-size: 20rpx;
	color: #fff;
	line-height: 1;
}

.mode-text {
	font-size: 24rpx;
	color: #333;
	white-space: nowrap;
}

.card-divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 24rpx 0;
}

.km-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	& + .km-row {
		margin-top: 28rpx;
	}
}

.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-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

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

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.save-btn {
	margin: 0 auto;
	width: 654rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-weight: 500;
	font-size: 32rpx;
	color: #fff;
	background: #333335;
	border-radius: 60rpx;
}

</style>

