<template>
	<el-row>
		<el-col :span="24">
			<el-form :inline="true" :model="state.query" class="demo-form-inline">
				<el-form-item label="房屋名称">
					<el-input v-model="state.query.title" placeholder="房屋名称" clearable />
				</el-form-item>
				<el-form-item label="选择状态">
					<el-select
						style="width: 120px"
						v-model="state.query.status"
						placeholder="请选择"
						clearable
					>
						<el-option v-for="item in getHouseStatus()" :label="item.name" :value="item.status" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="init()">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="24">
			<el-table v-loading="state.loading" :data="state.list"  class="data-table" empty-text="暂无数据">
				<el-table-column prop="id" label="换住编号" width="80" align="center"/>
				<el-table-column label="封面图" width="100" align="center">
					<template #default="{ row }">
						<el-image
							:src="row.image"
							fit="cover"
							class="house-image"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="标题" min-width="120" align="center"/>
				<el-table-column prop="status" label="状态" min-width="120" align="center">
					<template #default="{ row }">
						<el-tag
							:type="getStatusType(row.status)"
						>
							{{ getStatusName(row.status) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="小区名称" min-width="120" align="center"/>
				<el-table-column prop="city" label="城市" width="100" align="center"/>
				<el-table-column prop="type" label="户型" width="120" align="center"/>
				<el-table-column prop="area" label="面积" width="100" align="center"/>
				<el-table-column prop="floor" label="楼层" width="80" align="center"/>
				<el-table-column prop="face" label="朝向" width="100" align="center"/>
				<el-table-column prop="decoration" label="装修" width="100" align="center"/>
				<el-table-column prop="price" label="价格 (元/㎡)" width="120" align="center"/>
				<el-table-column prop="tag" label="标签" min-width="100" align="center"/>
				<el-table-column prop="createTime" label="创建时间" width="180" align="center"/>
				<el-table-column label="操作" fixed="right" width="180" align="center">
					<template #default="{ row }">
						<el-button v-if="row.status != 1" size="small" type="primary" plain @click="edit(row)">编辑</el-button>
						<el-popconfirm title="确认删除该房源？" @confirm="del(row.id)">
							<template #reference>
								<el-button v-if="row.status != 1" size="small" type="danger" plain>删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>

				<template v-slot:empty>
					<el-empty description="数据去外太空了~" />
				</template>
			</el-table>
		</el-col>
	</el-row>

	<!-- 编辑对话框 -->
	<el-dialog v-model="state.dialogVisible" title="编辑房源信息" width="50%">
		<el-form :model="state.editForm" label-width="100px">
			<el-form-item label="房屋标题">
				<el-input v-model="state.editForm.title" />
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="state.editForm.status" placeholder="请选择状态">
					<el-option v-for="item in getHouseStatus()" :label="item.name" :value="item.status" />
				</el-select>
			</el-form-item>
			<el-form-item label="小区名称">
				<el-input v-model="state.editForm.name" />
			</el-form-item>
			<el-form-item label="城市">
				<el-input v-model="state.editForm.city" />
			</el-form-item>
			<el-form-item label="户型">
				<el-input v-model="state.editForm.type" />
			</el-form-item>
			<el-form-item label="面积">
				<el-input v-model="state.editForm.area" />
			</el-form-item>
			<el-form-item label="价格">
				<el-input v-model="state.editForm.price" />
			</el-form-item>
		</el-form>
		<template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确认</el-button>
      </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getHouseStatus, getStatusName, getStatusType } from '~/utils/utils'

const state = reactive({
	loading: false,
	list: [],
	// 搜索
	query: {
		title: '',
		status: null,
	},
	// 编辑相关
	dialogVisible: false,
	editForm: {
		id: '',
		title: '',
		status: null,
		name: '',
		city: '',
		type: '',
		area: '',
		price: ''
	}
})

// 初始化数据
function init() {
	state.loading = true
	frontRequest.get("/api/item/push", {params: state.query}).then(res => {
		state.list = res.data
		state.loading = false
	}).catch(() => {
		state.loading = false
	})
}

// 编辑
function edit(row: any) {
	state.editForm = {
		id: row.id,
		title: row.title,
		status: row.status,
		name: row.name,
		city: row.city,
		type: row.type,
		area: row.area,
		price: row.price
	}
	state.dialogVisible = true
}

// 提交编辑
function submitEdit() {
	frontRequest.put("/api/item/push", state.editForm).then(() => {
		ElMessage.success('修改成功')
		state.dialogVisible = false
		init() // 刷新列表
	}).catch(err => {
		ElMessage.error(err.message || '修改失败')
	})
}
function del(id: string) {
	frontRequest.delete(`/api/item/${id}`).then(() => {
		ElMessage.success('删除成功')
		init() // 刷新列表
	}).catch(err => {
		ElMessage.error(err.message || '删除失败')
	})
}
onMounted(() => {
	init()
})
</script>

<style scoped>
.house-image {
	width: 80px;
	height: 60px;
	border-radius: 4px;
}

</style>

<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
