<template>
	<view class="box box-size">
		<view style="margin: 32rpx 0;">
			<up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#999999" class="up-steps-custom">
				<up-steps-item title="喂养要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#FFA042' : '#999999'}"></up-steps-item>
				<up-steps-item title="清洁要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#FFA042' : '#999999'}"></up-steps-item>
				<up-steps-item title="附加服务" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#FFA042' : '#999999'}"></up-steps-item>
			</up-steps>
		</view>

		<view class="top box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				您需要的附加服务
			</view>
			
			<!-- 陪玩服务 -->
			<view class="mt32 ml10" v-if="form.playtimeService">
				<view class="color-A55 size-30 fw400">
					陪玩
				</view>
				<view class="size-30 mt32 fw400">
					陪玩用具摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.playtimeToolsLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('playtimeToolsLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					您希望的互动方式和要求
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.playtimeRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.playtimeService"></view>
			
			<!-- 活动区吸毛 -->
			<view class="mt32 ml10" v-if="form.furCleaningService">
				<view class="color-A55 size-30 fw400">
					活动区吸毛
				</view>
				<view class="size-30 mt32 fw400">
					吸毛用品摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.furCleaningToolsLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('furCleaningToolsLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					请说明吸毛区域及要求
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.furCleaningRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.furCleaningService"></view>
			
			<!-- 毛发梳理 -->
			<view class="mt32 ml10" v-if="form.groomingService">
				<view class="color-A55 size-30 fw400">
					毛发梳理
				</view>
				<view class="size-30 mt32 fw400">
					毛发梳理用品摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.groomingToolsLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('groomingToolsLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					请说明毛发梳理要求(如: 天数,次数等)
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.groomingRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.groomingService"></view>
			
			<!-- 食具深度清洁 -->
			<view class="mt32 ml10" v-if="form.deepCleaningService">
				<view class="color-A55 size-30 fw400">
					食具深度清洁
				</view>
				<view class="size-30 mt32 fw400">
					需深度清洁的用具及消毒剂摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.deepCleaningToolsLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('deepCleaningToolsLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					请说明食具/饮水机深度清洁要求(如清洁方式、消毒剂使用方式、频率等)
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.deepCleaningRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.deepCleaningService"></view>
			
			<!-- 喂药上药 -->
			<view class="mt32 ml10" v-if="form.administerMedication">
				<view class="color-A55 size-30 fw400">
					喂药上药
				</view>
				<view class="size-30 mt32 fw400">
					药品摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.administerMedicationLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('administerMedicationLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					请说明药品使用方式
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.administerMedicationRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			
			<!-- 遛狗服务 -->
			<view class="mt32 ml10" v-if="form.walkDog">
				<view class="color-A55 size-30 fw400">
					遛狗服务
				</view>
				<view class="size-30 mt32 fw400">
					遛狗用品摆放位置
				</view>
				<view class="img mt20">
					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.walkDogToolsLocation)" :key="index"></u-image>
					<view class="upload-btn" @click="uploadImage('walkDogToolsLocation')">
						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
					</view>
				</view>
				
				<!-- 雨天遛狗 -->
				<view v-if="form.walkDogRainyDay">
					<view class="size-30 mt32 fw400">
						狗狗雨具位置
					</view>
					<view class="img mt20">
						<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.dogRainGearLocation)" :key="index"></u-image>
						<view class="upload-btn" @click="uploadImage('dogRainGearLocation')">
							<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						下雨天遛狗要求
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" v-model="form.walkDogRainRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				
				<!-- 遛狗时长 -->
				<view v-if="form.isWalkDogDuration">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						遛狗时长
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" v-model="form.walkDogDuration" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				
				<!-- 狗狗行为 -->
				<view v-if="form.isDogBehavior">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						狗狗行为
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" v-model="form.dogBehavior" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				
				<!-- 偏好区域 -->
				<view v-if="form.isFavoriteRegion">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						偏好区域
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" v-model="form.favoriteRegion" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				
				<!-- 偏好路线 -->
				<view v-if="form.isFavoriteRoute">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						偏好路线
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" v-model="form.favoriteRoute" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
			
			<!-- 附加服务备注 -->
			<view class="mt32 ml10" v-if="form.additionalService">
				<view class="size-30 mt24" :style="{color:'#999999'}">
					附加服务备注
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="form.additionalServicesRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
		</view>
		
		<view class="buttom_ mt60 box-size level">
			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="prevStep">
				上一页
			</view>
			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import { getPetCareByPetId, savePetCare } from "@/api/order/order.js";
	
	export default {
		data() {
			return {
				form: {
					// 附加服务相关字段
					additionalService: false,
					playtimeService: false,
					playtimeToolsLocation: '',
					playtimeRequirements: '',
					furCleaningService: false,
					furCleaningToolsLocation: '',
					furCleaningRequirements: '',
					groomingService: false,
					groomingToolsLocation: '',
					groomingRequirements: '',
					deepCleaningService: false,
					deepCleaningToolsLocation: '',
					deepCleaningRemarks: '',
					administerMedication: false,
					administerMedicationLocation: '',
					administerMedicationRemarks: '',
					additionalServicesPlacement: '',
					additionalServicesPlacementRemark: '',
					additionalServicesRemarks: '',
					// 遛狗相关字段
					walkDog: false,
					walkDogToolsLocation: '',
					walkDogRainyDay: false,
					dogRainGearLocation: '',
					walkDogRainRemark: '',
					isWalkDogDuration: false,
					walkDogDuration: '',
					isDogBehavior: false,
					dogBehavior: '',
					isFavoriteRegion: false,
					favoriteRegion: '',
					isFavoriteRoute: false,
					favoriteRoute: ''
				},
				currentStep: 2, // 当前步骤，固定为附加服务页面
				petId: 0,
				imageField: '' // 当前操作的图片字段
			}
		},
		onLoad(options) {
			this.petId = options.petId;
			if (this.petId) {
				this.getPetCareData();
			}
		},
		methods: {
			// 获取宠物服务档案数据
			getPetCareData() {
				getPetCareByPetId(this.petId).then(res => {
					if (res.data) {
						this.form = { ...this.form, ...res.data };
					}
				}).catch(err => {
					console.error('获取宠物服务档案失败', err);
				});
			},
			// 处理图片URL
			handleImageUrl(url) {
				if (!url) return [];
				return url.split(',');
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			// 上传图片
			uploadImage(field) {
				this.imageField = field;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						// 这里应该有上传图片到服务器的逻辑
						// 模拟上传成功后设置图片URL
						this.form[this.imageField] = tempFilePaths[0];
					}
				});
			},
			// 上一步
			prevStep() {
				uni.navigateBack();
			},
			// 下一步/完成
			nextStep() {
				// 保存数据
				this.saveData();
			},
			// 保存数据
			saveData() {
				// 这里应该有保存数据到服务器的逻辑
				// 模拟保存成功后返回上一页
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000,
					success: () => {
						setTimeout(() => {
							uni.navigateBack({
								delta: 2 // 返回上两级页面
							});
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "detail.scss";
	@import "steps-custom.scss";
	
	.upload-btn {
		width: 173rpx;
		height: 230rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}
	
	.form-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding: 30rpx 0 10rpx 0;
	}
	
	.fw400 {
		font-weight: 400;
	}
</style>