<template>
	<view class="property-add-page">
		<!-- 自定义导航栏 -->
		<view class="custom-nav safe-area-top">
			<view class="nav-content">
				<view class="nav-btn" @click="goBack">
					<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
				</view>
				<text class="nav-title">{{isEdit ? '编辑房源' : '添加房源'}}</text>
				<view class="nav-btn" @click="saveProperty">
					<text class="save-text">保存</text>
				</view>
			</view>
		</view>

		<!-- 表单内容 -->
		<scroll-view scroll-y class="form-content">
			<view class="form-section">
				<view class="section-title">基本信息</view>
				<view class="form-card">
					<view class="form-item">
						<text class="form-label">房源名称 <text class="required">*</text></text>
						<input 
							class="form-input" 
							type="text" 
							placeholder="请输入房源名称"
							v-model="formData.name"
							maxlength="50"
						/>
					</view>
					<view class="form-divider"></view>
					<view class="form-item">
						<text class="form-label">房源地址</text>
						<input 
							class="form-input" 
							type="text" 
							placeholder="请输入详细地址"
							v-model="formData.address"
							maxlength="200"
						/>
					</view>
				</view>
			</view>

			<view class="form-section">
				<view class="section-title">费用设置</view>
				<view class="form-card">
					<view class="form-item">
						<text class="form-label">水费单价 <text class="required">*</text></text>
						<view class="price-input-wrapper">
							<text class="currency">¥</text>
							<input 
								class="form-input price-input" 
								type="digit" 
								placeholder="5.00"
								v-model="formData.waterPrice"
								@blur="validatePrice('waterPrice')"
							/>
							<text class="unit">元/吨</text>
						</view>
						<text class="form-tip">默认水费单价为 5.00 元/吨</text>
					</view>
					<view class="form-divider"></view>
					<view class="form-item">
						<text class="form-label">电费单价 <text class="required">*</text></text>
						<view class="price-input-wrapper">
							<text class="currency">¥</text>
							<input 
								class="form-input price-input" 
								type="digit" 
								placeholder="1.00"
								v-model="formData.electricityPrice"
								@blur="validatePrice('electricityPrice')"
							/>
							<text class="unit">元/度</text>
						</view>
						<text class="form-tip">默认电费单价为 1.00 元/度</text>
					</view>
				</view>
			</view>

			<view class="form-section">
				<view class="section-title">其他信息</view>
				<view class="form-card">
					<view class="form-item">
						<text class="form-label">房源描述</text>
						<textarea 
							class="form-textarea" 
							placeholder="请输入房源描述（选填）"
							v-model="formData.description"
							maxlength="500"
						/>
						<text class="textarea-count">{{formData.description.length}}/500</text>
					</view>
				</view>
			</view>

			<view class="safe-area-bottom" style="height: 40rpx;"></view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="bottom-bar safe-area-bottom">
			<button class="submit-btn" :loading="saving" @click="saveProperty">
				{{isEdit ? '保存修改' : '确认添加'}}
			</button>
		</view>
	</view>
</template>

<script>
	import apartmentApi from '@/api/apartment.js'
	
	export default {
		data() {
			return {
				isEdit: false,
				propertyId: null,
				saving: false,
				formData: {
					name: '',
					address: '',
					waterPrice: '5.00',
					electricityPrice: '1.00',
					description: ''
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.isEdit = true
				this.propertyId = options.id
				this.loadPropertyDetail(options.id)
			}
		},
		methods: {
			async loadPropertyDetail(id) {
				try {
					const res = await apartmentApi.getDetail(id)
					if (res.data) {
						const data = res.data
						this.formData = {
							name: data.name || '',
							address: data.address || '',
							waterPrice: data.waterPrice ? String(data.waterPrice) : '5.00',
							electricityPrice: data.electricityPrice ? String(data.electricityPrice) : '1.00',
							description: data.description || ''
						}
					}
				} catch (error) {
					console.error('加载房源详情失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},
			validatePrice(field) {
				let value = parseFloat(this.formData[field])
				if (isNaN(value) || value < 0) {
					value = field === 'waterPrice' ? 5.00 : 1.00
				}
				this.formData[field] = value.toFixed(2)
			},
			validateForm() {
				if (!this.formData.name.trim()) {
					uni.showToast({
						title: '请输入房源名称',
						icon: 'none'
					})
					return false
				}
				
				const waterPrice = parseFloat(this.formData.waterPrice)
				if (isNaN(waterPrice) || waterPrice < 0) {
					uni.showToast({
						title: '请输入有效的水费单价',
						icon: 'none'
					})
					return false
				}
				
				const electricityPrice = parseFloat(this.formData.electricityPrice)
				if (isNaN(electricityPrice) || electricityPrice < 0) {
					uni.showToast({
						title: '请输入有效的电费单价',
						icon: 'none'
					})
					return false
				}
				
				return true
			},
			async saveProperty() {
				if (!this.validateForm()) {
					return
				}
				
				this.saving = true
				try {
					const data = {
						name: this.formData.name.trim(),
						address: this.formData.address.trim(),
						waterPrice: parseFloat(this.formData.waterPrice),
						electricityPrice: parseFloat(this.formData.electricityPrice),
						description: this.formData.description.trim()
					}
					
					if (this.isEdit) {
						await apartmentApi.update(this.propertyId, data)
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
					} else {
						await apartmentApi.create(data)
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
					}
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					console.error('保存房源失败:', error)
					uni.showToast({
						title: this.isEdit ? '修改失败' : '添加失败',
						icon: 'none'
					})
				} finally {
					this.saving = false
				}
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.property-add-page {
		min-height: 100vh;
		background: #F8FAFC;
		display: flex;
		flex-direction: column;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: #FFFFFF;
		border-bottom: 2rpx solid #F1F5F9;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 32rpx;
	}

	.nav-btn {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.nav-btn:active {
		background: #F1F5F9;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #1E293B;
	}

	.save-text {
		font-size: 28rpx;
		color: #2563EB;
		font-weight: 500;
	}

	/* 表单内容 */
	.form-content {
		flex: 1;
		padding: 24rpx 32rpx;
	}

	.form-section {
		margin-bottom: 32rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1E293B;
		margin-bottom: 16rpx;
		padding-left: 8rpx;
	}

	.form-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		padding: 24rpx 0;
	}

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

	.required {
		color: #EF4444;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		background: #F8FAFC;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #1E293B;
		box-sizing: border-box;
	}

	.price-input-wrapper {
		display: flex;
		align-items: center;
		background: #F8FAFC;
		border-radius: 12rpx;
		padding: 0 24rpx;
	}

	.currency {
		font-size: 28rpx;
		color: #2563EB;
		font-weight: 600;
		margin-right: 12rpx;
	}

	.price-input {
		flex: 1;
		background: transparent;
		padding: 0;
	}

	.unit {
		font-size: 26rpx;
		color: #64748B;
		margin-left: 12rpx;
	}

	.form-tip {
		display: block;
		font-size: 24rpx;
		color: #94A3B8;
		margin-top: 12rpx;
	}

	.form-divider {
		height: 2rpx;
		background: #F1F5F9;
	}

	.form-textarea {
		width: 100%;
		height: 200rpx;
		background: #F8FAFC;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		color: #1E293B;
		box-sizing: border-box;
	}

	.textarea-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #94A3B8;
		margin-top: 12rpx;
	}

	/* 底部按钮 */
	.bottom-bar {
		background: #FFFFFF;
		border-top: 2rpx solid #F1F5F9;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
		border-radius: 16rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
	}

	.submit-btn:active {
		opacity: 0.9;
	}

	.submit-btn[disabled] {
		opacity: 0.6;
	}
</style>
