<template>
	<div class="house-upload-container">
		<h2 class="upload-title">上传房屋信息</h2>
		<el-form
			:model="state.formData"
			ref="formRef"
			label-width="120px"
			label-position="right"
			class="house-upload-form"
		>
			<div class="form-section">
				<h3 class="section-title">基本信息</h3>
				<div class="form-grid">
					<el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
						<el-input v-model="state.formData.title" placeholder="请输入标题" class="form-input" />
					</el-form-item>
					<el-form-item label="小区名称" prop="name" :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
						<el-input v-model="state.formData.name" placeholder="请输入小区名称" class="form-input" />
					</el-form-item>
					<el-form-item label="城市" prop="city" :rules="[{ required: true, message: '请输入城市', trigger: 'blur' }]">
						<el-input v-model="state.formData.city" placeholder="请输入城市" class="form-input" />
					</el-form-item>
				</div>
			</div>

			<div class="form-section">
				<h3 class="section-title">房屋详情</h3>
				<div class="form-grid">
					<el-form-item label="户型" prop="type" :rules="[{ required: true, message: '请输入户型', trigger: 'blur' }]">
						<el-select v-model="state.formData.type" placeholder="请选择户型" clearable class="form-input">
							<el-option
								v-for="item in getHouseType()"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="面积(㎡)" prop="area">
						<el-input v-model="state.formData.area" placeholder="请输入面积" class="form-input" />
					</el-form-item>
					<el-form-item label="楼层" prop="floor">
						<el-input-number v-model="state.formData.floor" :min="0" class="form-input" />
					</el-form-item>
					<el-form-item label="朝向" prop="face">
						<el-select v-model="state.formData.face" placeholder="请选择朝向" class="form-input">
							<el-option v-for="item in getFace()" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item label="装修" prop="decoration">
						<el-select v-model="state.formData.decoration" placeholder="请选择装修" class="form-input">
							<el-option v-for="item in getDecoration()" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item label="价格(元/㎡)" prop="price">
						<el-input-number v-model="state.formData.price" :min="0" :step="0.01" class="form-input" />
					</el-form-item>
				</div>
			</div>

			<div class="form-section">
				<h3 class="section-title">房屋展示</h3>
				<div class="form-grid">
					<el-form-item label="封面图" prop="image" :rules="[{ required: true, message: '请上传封面图', trigger: 'blur' }]">
						<image-upload
							class="image-uploader"
							:image-url="state.formData.image"
							@update:imageUrl="handleImageUrl"
						/>
						<p class="upload-tip">建议上传高清图片，尺寸比例16:9</p>
					</el-form-item>
				</div>
			</div>

			<div class="form-section">
				<h3 class="section-title">其他信息</h3>
				<div class="form-grid">
					<el-form-item label="标签" prop="tag">
						<el-input v-model="state.formData.tag" placeholder="请输入标签，用逗号分隔" class="form-input" />
						<p class="input-tip">例如：地铁房,学区房,精装修</p>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="state.formData.sort" :min="1" class="form-input" />
					</el-form-item>
					<el-form-item label="描述" prop="description">
						<el-input
							type="textarea"
							v-model="state.formData.description"
							rows="5"
							placeholder="请输入房屋详细描述"
							class="form-textarea"
						/>
					</el-form-item>
				</div>
			</div>

			<div class="form-actions">
				<el-button type="primary" @click="saveTransaction" class="submit-btn">保存并发布</el-button>
				<el-button @click="resetForm" class="reset-btn">重置</el-button>
			</div>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { getDecoration, getFace, getHouseType } from '~/utils/utils'
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const state = reactive(<any>{
	formData: {}
})

// 保存（新增/更新）
const saveTransaction = () => {
	formRef.value?.validate(async valid => {
		if (!valid) return
		state.formData.status = 0
		frontRequest.post(`/api/item`, state.formData).then(res => {
			// 处理成功逻辑
			ElMessage.success("上传成功")
		})
	})
}

const resetForm = () => {
	formRef.value?.resetFields()
}

const handleImageUrl = (url: string) => {
	state.formData.image = url
}
</script>

<style scoped lang="scss">
.house-upload-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 20px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

	.upload-title {
		text-align: center;
		margin-bottom: 30px;
		color: #333;
		font-size: 24px;
		font-weight: 500;
	}

	.house-upload-form {
		.form-section {
			margin-bottom: 30px;
			padding: 20px;
			background-color: #f9fafc;
			border-radius: 8px;

			.section-title {
				margin-bottom: 20px;
				color: #409EFF;
				font-size: 18px;
				font-weight: 500;
				padding-bottom: 10px;
				border-bottom: 1px solid #e6e6e6;
			}

			.form-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 20px;

				:deep(.el-form-item) {
					margin-bottom: 0;
				}
			}
		}

		.form-input {
			width: 100%;
		}

		.form-textarea {
			width: 100%;
		}

		.upload-tip {
			margin-top: 8px;
			font-size: 12px;
			color: #999;
		}

		.input-tip {
			margin-top: 8px;
			font-size: 12px;
			color: #999;
		}

		.image-uploader {
			width: 100%;
			max-width: 400px;
		}
	}

	.form-actions {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 30px;

		.submit-btn {
			padding: 12px 30px;
			font-size: 16px;
		}

		.reset-btn {
			padding: 12px 30px;
			font-size: 16px;
		}
	}
}
@media (max-width: 768px) {
	.house-upload-container {
		padding: 20px 15px;

		.house-upload-form {
			.form-section {
				padding: 15px;

				.form-grid {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
