<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 label="未审核" value="未审核" />
						<el-option label="已同意" value="已同意" />
						<el-option label="已拒绝 " value="已拒绝 " />
						<el-option label="已评价 " value="已评价 " />
					</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"
				stripe
				border
				class="data-table"
				empty-text="暂无数据"
			>
				<el-table-column prop="id" label="换住编号" width="80" align="center"/>
				<el-table-column prop="title" label="标题" min-width="120" align="center"/>
				<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 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="price" label="价格 (元/㎡)" width="120" align="center"/>
				<el-table-column prop="tag" label="标签" min-width="100" align="center"/>
				<el-table-column prop="view" label="点击量" width="100" align="center"/>
				<el-table-column prop="createTime" label="创建时间" width="180" align="center"/>
				<el-table-column prop="userId" label="用户ID" width="100" align="center"/>
				<el-table-column label="操作" fixed="right" width="180" align="center">
					<template #default="{ row }">
						<el-button size="small" type="primary" plain @click="edit(row)">编辑</el-button>
						<el-popconfirm title="确认删除该房源？" @confirm="del(row.id)">
							<template #reference>
								<el-button size="small" type="danger" plain>删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const state = reactive(<any>{
	loading: false,
	list: [],
	// 搜索
	query: {
		title: '',
		status: null,
	},
})


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

onMounted(()=>{
	init()
})

</script>
<style scoped>

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