<!--用户详情-->
<template>
	<el-tabs v-model="state.activeName"  >
		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
			<el-table :data="state.getList">
				<!--					列表结开始-->
				<el-table-column prop="title" label="标题" align="center" />
				<el-table-column prop="name" label="小区名称" align="center" />

				<el-table-column prop="largePic" label="图片" align="center"  >
					<template #default="{ row }">
						<!-- 点击图片后显示弹框预览 -->
						<el-image
							:src="row.image"
							fit="cover"
							:preview-src-list="[row.image]"
							:preview-teleported="true"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格" align="center" />
				<el-table-column prop="area" label="面积" align="center" />
				<el-table-column prop="type" label="房屋类型" align="center" />
				<el-table-column prop="city" label="城市" align="center" width="160"/>
				<!--列表结束-->
				<el-table-column label="操作" align="center" width="160" >
					<template #default="scope">
						<el-button @click="del(scope.row.id)" type="danger" size="small">取消</el-button>
						<el-button @click="to(scope.row.id)"  size="small">去换住</el-button>
					</template>
				</el-table-column>
				<template v-slot:empty>
					<el-empty description="数据去外太空了~" />
				</template>
			</el-table>
		</el-tab-pane>
	</el-tabs>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
import { reactive } from 'vue'
const state = reactive({
	activeName:1,
	getOrderStatus:[
		{name:"全部",status:1},
	],
	getList:[]
})
/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/info/${id}`)
}
/**
 * 获取列表数据
 */
function init() {
		frontRequest.get("/api/item/list").then(res =>{
			state.getList = res.data
		})
}
const del = (id:number) => {
	frontRequest.post("/api/behavior/delete",{itemId:id,type:1}).then(res =>{
		ElMessage.success("收藏成功")
		init()
	})
	init()
}

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



</script>


<style scoped>

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