<template>
	<view class="publish-container page-container-with-bg">
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 宠物照片上传 -->
			<view class="photo-section">
				<view class="section-header">
					<text class="section-title">宠物照片</text>
					<text class="section-desc">最多上传6张照片，第一张为封面</text>
				</view>
				<view class="photo-grid">
					<view 
						class="photo-item" 
						v-for="(photo, index) in formData.photos" 
						:key="index"
						@click="previewPhoto(index)"
					>
						<image class="photo-image" :src="photo" mode="aspectFill" />
						<view class="photo-delete" @click.stop="deletePhoto(index)">
							<text class="delete-icon">×</text>
						</view>
						<view class="photo-cover" v-if="index === 0">
							<text class="cover-text">封面</text>
						</view>
					</view>
					<view 
						class="photo-add" 
						v-if="formData.photos.length < 6"
						@click="addPhoto"
					>
						<text class="add-icon">+</text>
						<text class="add-text">添加照片</text>
					</view>
				</view>
			</view>

			<!-- 基本信息 -->
			<view class="info-section">
				<view class="section-header">
					<text class="section-title">基本信息</text>
				</view>
				<view class="form-group">
					<text class="form-label">宠物名称 *</text>
					<u-input
						v-model="formData.name"
						placeholder="请输入宠物名称"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-group">
					<text class="form-label">品种 *</text>
					<view class="picker-field" @click="showBreedPicker">
						<text class="picker-text" :class="{ placeholder: !formData.breed }">
							{{ formData.breed || '请选择品种' }}
						</text>
						<text class="picker-arrow">→</text>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">性别 *</text>
					<view class="radio-group">
						<view 
							class="radio-item" 
							:class="{ active: formData.gender === '公' }"
							@click="setGender('公')"
						>
							<text class="radio-text">公</text>
						</view>
						<view 
							class="radio-item" 
							:class="{ active: formData.gender === '母' }"
							@click="setGender('母')"
						>
							<text class="radio-text">母</text>
						</view>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">年龄 *</text>
					<view class="picker-field" @click="showAgePicker">
						<text class="picker-text" :class="{ placeholder: !formData.age }">
							{{ formData.age || '请选择年龄' }}
						</text>
						<text class="picker-arrow">→</text>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">体重</text>
					<u-input
						v-model="formData.weight"
						placeholder="请输入体重（如：3.5kg）"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
			</view>

			<!-- 健康状况 -->
			<view class="health-section">
				<view class="section-header">
					<text class="section-title">健康状况</text>
				</view>
				<view class="checkbox-group">
					<view 
						class="checkbox-item" 
						:class="{ active: formData.vaccinated }"
						@click="toggleVaccinated"
					>
						<view class="checkbox">
							<text class="check-icon" v-if="formData.vaccinated">✓</text>
						</view>
						<text class="checkbox-text">已接种疫苗</text>
					</view>
					<view 
						class="checkbox-item" 
						:class="{ active: formData.sterilized }"
						@click="toggleSterilized"
					>
						<view class="checkbox">
							<text class="check-icon" v-if="formData.sterilized">✓</text>
						</view>
						<text class="checkbox-text">已绝育</text>
					</view>
					<view 
						class="checkbox-item" 
						:class="{ active: formData.dewormed }"
						@click="toggleDewormed"
					>
						<view class="checkbox">
							<text class="check-icon" v-if="formData.dewormed">✓</text>
						</view>
						<text class="checkbox-text">已驱虫</text>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">健康说明</text>
					<u-textarea
						v-model="formData.healthNote"
						placeholder="请描述宠物的健康状况、疾病史等"
						:maxlength="200"
						count
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
			</view>

			<!-- 性格特点 -->
			<view class="personality-section">
				<view class="section-header">
					<text class="section-title">性格特点</text>
				</view>
				<view class="tag-group">
					<view 
						class="tag-item" 
						v-for="tag in personalityTags" 
						:key="tag"
						:class="{ active: formData.personality.includes(tag) }"
						@click="togglePersonality(tag)"
					>
						<text class="tag-text">{{ tag }}</text>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">性格描述</text>
					<u-textarea
						v-model="formData.personalityNote"
						placeholder="详细描述宠物的性格特点、生活习惯等"
						:maxlength="300"
						count
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
			</view>

			<!-- 领养要求 -->
			<view class="requirements-section">
				<view class="section-header">
					<text class="section-title">领养要求</text>
				</view>
				<view class="form-group">
					<text class="form-label">领养条件</text>
					<u-textarea
						v-model="formData.requirements"
						placeholder="请描述对领养人的要求，如：有养宠经验、有固定住所、经济稳定等"
						:maxlength="300"
						count
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
				<view class="checkbox-group">
					<view 
						class="checkbox-item" 
						:class="{ active: formData.needVisit }"
						@click="toggleNeedVisit"
					>
						<view class="checkbox">
							<text class="check-icon" v-if="formData.needVisit">✓</text>
						</view>
						<text class="checkbox-text">需要上门家访</text>
					</view>
					<view 
						class="checkbox-item" 
						:class="{ active: formData.needContract }"
						@click="toggleNeedContract"
					>
						<view class="checkbox">
							<text class="check-icon" v-if="formData.needContract">✓</text>
						</view>
						<text class="checkbox-text">需要签署领养协议</text>
					</view>
				</view>
			</view>

			<!-- 联系方式 -->
			<view class="contact-section">
				<view class="section-header">
					<text class="section-title">联系方式</text>
				</view>
				<view class="form-group">
					<text class="form-label">联系人 *</text>
					<u-input
						v-model="formData.contactName"
						placeholder="请输入联系人姓名"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-group">
					<text class="form-label">联系电话 *</text>
					<u-input
						v-model="formData.contactPhone"
						placeholder="请输入联系电话"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-group">
					<text class="form-label">微信号</text>
					<u-input
						v-model="formData.contactWechat"
						placeholder="请输入微信号（可选）"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-group">
					<text class="form-label">所在地区 *</text>
					<view class="picker-field" @click="showLocationPicker">
						<text class="picker-text" :class="{ placeholder: !formData.location }">
							{{ formData.location || '请选择所在地区' }}
						</text>
						<text class="picker-arrow">→</text>
					</view>
				</view>
			</view>

			<!-- 其他说明 -->
			<view class="note-section">
				<view class="section-header">
					<text class="section-title">其他说明</text>
				</view>
				<view class="form-group">
					<u-textarea
						v-model="formData.note"
						placeholder="其他需要说明的情况（可选）"
						:maxlength="500"
						count
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<u-button
				type="primary"
				:custom-style="buttonStyle"
				@click="submitForm"
				:loading="submitting"
			>
				{{ submitting ? '发布中...' : (isEdit ? '保存修改' : '发布领养信息') }}
			</u-button>
		</view>

		<!-- 选择器 -->
		<u-picker
			:show="showBreed"
			:columns="breedColumns"
			@confirm="onBreedConfirm"
			@cancel="showBreed = false"
		></u-picker>

		<u-picker
			:show="showAge"
			:columns="ageColumns"
			@confirm="onAgeConfirm"
			@cancel="showAge = false"
		></u-picker>

		<u-picker
			:show="showLocation"
			:columns="locationColumns"
			@confirm="onLocationConfirm"
			@cancel="showLocation = false"
		></u-picker>
	</view>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'

export default {
	name: 'PublishPage',
	setup() {
		// 响应式数据
		const formData = reactive({
			photos: [],
			name: '',
			breed: '',
			gender: '',
			age: '',
			weight: '',
			vaccinated: false,
			sterilized: false,
			dewormed: false,
			healthNote: '',
			personality: [],
			personalityNote: '',
			requirements: '',
			needVisit: false,
			needContract: false,
			contactName: '',
			contactPhone: '',
			contactWechat: '',
			location: '',
			note: ''
		})
		
		const submitting = ref(false)
		const isEdit = ref(false)
		const editId = ref('')
		
		// 选择器状态
		const showBreed = ref(false)
		const showAge = ref(false)
		const showLocation = ref(false)
		
		// 选择器数据
		const breedColumns = ref([
			['橘猫', '英短', '美短', '布偶', '暹罗', '波斯', '缅因', '折耳', '田园猫', '其他猫咪', '金毛', '拉布拉多', '哈士奇', '萨摩耶', '柯基', '泰迪', '比熊', '博美', '田园犬', '其他犬类']
		])
		
		const ageColumns = ref([
			['2个月', '3个月', '4个月', '5个月', '6个月', '7个月', '8个月', '9个月', '10个月', '11个月', '1岁', '2岁', '3岁', '4岁', '5岁', '6岁', '7岁', '8岁', '9岁', '10岁以上']
		])
		
		const locationColumns = ref([
			['北京市', '上海市', '广州市', '深圳市', '杭州市', '成都市', '武汉市', '西安市', '南京市', '重庆市', '天津市', '苏州市', '长沙市', '郑州市', '青岛市', '大连市', '宁波市', '厦门市']
		])
		
		const personalityTags = ref([
			'温顺', '活泼', '安静', '粘人', '独立', '聪明', '胆小', '勇敢', '爱玩', '懒散', '好奇', '友善'
		])
		
		// 样式配置
		const inputStyle = {
			fontSize: '28rpx',
			color: '#333333',
			backgroundColor: 'rgba(255, 138, 128, 0.05)',
			borderRadius: '12rpx',
			padding: '20rpx'
		}
		
		const textareaStyle = {
			fontSize: '26rpx',
			color: '#333333',
			backgroundColor: 'rgba(255, 138, 128, 0.05)',
			borderRadius: '12rpx',
			padding: '20rpx'
		}
		
		const buttonStyle = {
			background: 'linear-gradient(135deg, #FF8A80, #FFB6C1)',
			borderRadius: '24rpx',
			height: '88rpx',
			fontSize: '32rpx'
		}
		
		// 生命周期
		onMounted(() => {
			checkEditMode()
			loadUserInfo()
		})
		
		// 方法定义
		const checkEditMode = () => {
			// 检查是否为编辑模式
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			
			if (options.id && options.mode === 'edit') {
				isEdit.value = true
				editId.value = options.id
				loadEditData(options.id)
			}
		}
		
		const loadEditData = (id) => {
			try {
				const publishedList = uni.getStorageSync('myPublishedAdoptions') || []
				const item = publishedList.find(p => p.id === id)
				
				if (item) {
					Object.assign(formData, {
						photos: item.photos || [],
						name: item.name || '',
						breed: item.breed || '',
						gender: item.gender || '',
						age: item.age || '',
						weight: item.weight || '',
						vaccinated: item.vaccinated || false,
						sterilized: item.sterilized || false,
						dewormed: item.dewormed || false,
						healthNote: item.healthNote || '',
						personality: item.personality || [],
						personalityNote: item.personalityNote || '',
						requirements: item.requirements || '',
						needVisit: item.needVisit || false,
						needContract: item.needContract || false,
						contactName: item.contactName || '',
						contactPhone: item.contactPhone || '',
						contactWechat: item.contactWechat || '',
						location: item.location || '',
						note: item.note || ''
					})
				}
			} catch (error) {
				console.error('加载编辑数据失败:', error)
			}
		}
		
		const loadUserInfo = () => {
			try {
				const userInfo = uni.getStorageSync('userInfo') || {}
				if (!formData.contactName && userInfo.nickName) {
					formData.contactName = userInfo.nickName
				}
			} catch (error) {
				console.error('加载用户信息失败:', error)
			}
		}
		
		const addPhoto = () => {
			uni.chooseImage({
				count: 6 - formData.photos.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					formData.photos.push(...res.tempFilePaths)
				},
				fail: (err) => {
					console.error('选择照片失败:', err)
					uni.showToast({
						title: '选择照片失败',
						icon: 'none'
					})
				}
			})
		}
		
		const deletePhoto = (index) => {
			formData.photos.splice(index, 1)
		}
		
		const previewPhoto = (index) => {
			uni.previewImage({
				urls: formData.photos,
				current: index
			})
		}
		
		const setGender = (gender) => {
			formData.gender = gender
		}
		
		const toggleVaccinated = () => {
			formData.vaccinated = !formData.vaccinated
		}
		
		const toggleSterilized = () => {
			formData.sterilized = !formData.sterilized
		}
		
		const toggleDewormed = () => {
			formData.dewormed = !formData.dewormed
		}
		
		const togglePersonality = (tag) => {
			const index = formData.personality.indexOf(tag)
			if (index > -1) {
				formData.personality.splice(index, 1)
			} else {
				formData.personality.push(tag)
			}
		}
		
		const toggleNeedVisit = () => {
			formData.needVisit = !formData.needVisit
		}
		
		const toggleNeedContract = () => {
			formData.needContract = !formData.needContract
		}
		
		const showBreedPicker = () => {
			showBreed.value = true
		}
		
		const showAgePicker = () => {
			showAge.value = true
		}
		
		const showLocationPicker = () => {
			showLocation.value = true
		}
		
		const onBreedConfirm = (e) => {
			formData.breed = e.value[0]
			showBreed.value = false
		}
		
		const onAgeConfirm = (e) => {
			formData.age = e.value[0]
			showAge.value = false
		}
		
		const onLocationConfirm = (e) => {
			formData.location = e.value[0]
			showLocation.value = false
		}
		
		const validateForm = () => {
			if (formData.photos.length === 0) {
				uni.showToast({
					title: '请至少上传一张照片',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.name.trim()) {
				uni.showToast({
					title: '请输入宠物名称',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.breed) {
				uni.showToast({
					title: '请选择宠物品种',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.gender) {
				uni.showToast({
					title: '请选择宠物性别',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.age) {
				uni.showToast({
					title: '请选择宠物年龄',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.contactName.trim()) {
				uni.showToast({
					title: '请输入联系人姓名',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.contactPhone.trim()) {
				uni.showToast({
					title: '请输入联系电话',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.location) {
				uni.showToast({
					title: '请选择所在地区',
					icon: 'none'
				})
				return false
			}
			
			return true
		}
		
		const submitForm = async () => {
			if (!validateForm()) {
				return
			}
			
			submitting.value = true
			
			try {
				// 模拟网络请求延迟
				await new Promise(resolve => setTimeout(resolve, 2000))
				
				const publishData = {
					...formData,
					id: isEdit.value ? editId.value : 'pub_' + Date.now(),
					status: 'active',
					publishTime: isEdit.value ? undefined : new Date().toISOString(),
					updateTime: new Date().toISOString(),
					applicationCount: 0,
					viewCount: 0
				}
				
				// 保存到本地存储
				let publishedList = uni.getStorageSync('myPublishedAdoptions') || []
				
				if (isEdit.value) {
					const index = publishedList.findIndex(p => p.id === editId.value)
					if (index > -1) {
						publishedList[index] = { ...publishedList[index], ...publishData }
					}
				} else {
					publishedList.unshift(publishData)
				}
				
				uni.setStorageSync('myPublishedAdoptions', publishedList)
				
				uni.showToast({
					title: isEdit.value ? '修改成功' : '发布成功',
					icon: 'success'
				})
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
				
			} catch (error) {
				console.error('提交失败:', error)
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			} finally {
				submitting.value = false
			}
		}
		
		return {
			formData,
			submitting,
			isEdit,
			showBreed,
			showAge,
			showLocation,
			breedColumns,
			ageColumns,
			locationColumns,
			personalityTags,
			inputStyle,
			textareaStyle,
			buttonStyle,
			addPhoto,
			deletePhoto,
			previewPhoto,
			setGender,
			toggleVaccinated,
			toggleSterilized,
			toggleDewormed,
			togglePersonality,
			toggleNeedVisit,
			toggleNeedContract,
			showBreedPicker,
			showAgePicker,
			showLocationPicker,
			onBreedConfirm,
			onAgeConfirm,
			onLocationConfirm,
			submitForm
		}
	}
}
</script>

<style lang="scss" scoped>
.publish-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 表单容器 */
.form-container {
	margin: 0 30rpx;
}

/* 通用区块样式 */
.photo-section,
.info-section,
.health-section,
.personality-section,
.requirements-section,
.contact-section,
.note-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.section-header {
		margin-bottom: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 8rpx;
		}

		.section-desc {
			font-size: 22rpx;
			color: #666666;
		}
	}
}

/* 照片上传区域 */
.photo-section {
	.photo-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16rpx;

		.photo-item {
			position: relative;
			aspect-ratio: 1;
			border-radius: 16rpx;
			overflow: hidden;

			.photo-image {
				width: 100%;
				height: 100%;
			}

			.photo-delete {
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				width: 32rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.delete-icon {
					color: white;
					font-size: 24rpx;
					font-weight: bold;
				}
			}

			.photo-cover {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(135deg, #FF8A80, #FFB6C1);
				padding: 6rpx 0;
				text-align: center;

				.cover-text {
					color: white;
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}

		.photo-add {
			aspect-ratio: 1;
			border: 2rpx dashed #FF8A80;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(255, 138, 128, 0.05);
			transition: all 0.3s ease;

			&:active {
				background: rgba(255, 138, 128, 0.1);
				transform: scale(0.98);
			}

			.add-icon {
				font-size: 48rpx;
				color: #FF8A80;
				margin-bottom: 8rpx;
			}

			.add-text {
				font-size: 22rpx;
				color: #FF8A80;
			}
		}
	}
}

/* 表单组件 */
.form-group {
	margin-bottom: 32rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 16rpx;
	}
}

/* 选择器字段 */
.picker-field {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: rgba(255, 138, 128, 0.05);
	border-radius: 12rpx;
	transition: all 0.3s ease;

	&:active {
		background: rgba(255, 138, 128, 0.1);
	}

	.picker-text {
		font-size: 28rpx;
		color: #333333;

		&.placeholder {
			color: #CCCCCC;
		}
	}

	.picker-arrow {
		font-size: 24rpx;
		color: #FF8A80;
	}
}

/* 单选组 */
.radio-group {
	display: flex;
	gap: 20rpx;

	.radio-item {
		flex: 1;
		padding: 20rpx;
		border: 2rpx solid rgba(255, 138, 128, 0.2);
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.3s ease;

		&.active {
			border-color: #FF8A80;
			background: rgba(255, 138, 128, 0.1);

			.radio-text {
				color: #FF8A80;
				font-weight: 600;
			}
		}

		.radio-text {
			font-size: 28rpx;
			color: #666666;
		}
	}
}

/* 复选框组 */
.checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	margin-bottom: 24rpx;

	.checkbox-item {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		border: 2rpx solid rgba(255, 138, 128, 0.2);
		border-radius: 12rpx;
		transition: all 0.3s ease;

		&.active {
			border-color: #FF8A80;
			background: rgba(255, 138, 128, 0.1);

			.checkbox-text {
				color: #FF8A80;
			}
		}

		.checkbox {
			width: 32rpx;
			height: 32rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12rpx;
			transition: all 0.3s ease;
		}

		&.active .checkbox {
			border-color: #FF8A80;
			background: #FF8A80;

			.check-icon {
				color: white;
				font-size: 20rpx;
				font-weight: bold;
			}
		}

		.checkbox-text {
			font-size: 26rpx;
			color: #666666;
		}
	}
}

/* 标签组 */
.tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-bottom: 24rpx;

	.tag-item {
		padding: 12rpx 20rpx;
		border: 2rpx solid rgba(255, 138, 128, 0.2);
		border-radius: 20rpx;
		transition: all 0.3s ease;

		&.active {
			border-color: #FF8A80;
			background: linear-gradient(135deg, #FF8A80, #FFB6C1);

			.tag-text {
				color: white;
			}
		}

		.tag-text {
			font-size: 24rpx;
			color: #666666;
		}
	}
}

/* 提交按钮 */
.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	padding: 20rpx 30rpx;
	border-top: 1rpx solid rgba(255, 255, 255, 0.3);
	z-index: 100;
}

/* 响应式设计 */
@media (max-width: 375px) {
	.publish-container {
		.form-container {
			margin: 0 20rpx;
		}

		.photo-section,
		.info-section,
		.health-section,
		.personality-section,
		.requirements-section,
		.contact-section,
		.note-section {
			padding: 24rpx;
			margin-bottom: 20rpx;
		}

		.photo-grid {
			gap: 12rpx;
		}

		.submit-section {
			padding: 16rpx 20rpx;
		}
	}
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.form-container > view {
	animation: fadeIn 0.5s ease-out;
}

.form-container > view:nth-child(1) { animation-delay: 0.1s; }
.form-container > view:nth-child(2) { animation-delay: 0.2s; }
.form-container > view:nth-child(3) { animation-delay: 0.3s; }
.form-container > view:nth-child(4) { animation-delay: 0.4s; }
.form-container > view:nth-child(5) { animation-delay: 0.5s; }
.form-container > view:nth-child(6) { animation-delay: 0.6s; }
.form-container > view:nth-child(7) { animation-delay: 0.7s; }

/* 交互反馈 */
.photo-add:active,
.picker-field:active,
.radio-item:active,
.checkbox-item:active,
.tag-item:active {
	transform: scale(0.98);
}

/* 表单验证状态 */
.form-group.error {
	.form-label {
		color: #FF5722;
	}

	.picker-field {
		border: 2rpx solid #FF5722;
	}
}

/* 加载状态 */
.submit-section .u-button[loading] {
	opacity: 0.7;
}
</style>
