<!--房源列表-->
<template>
	<!-- 搜索框 -->
	<el-row  justify="center">
		<el-col :span="24" class="search-container">
			<el-input
				v-model="state.page.title"
				placeholder="搜索房源信息"
				class="search-input"
				clearable
				@input="init"
			>
				<template #append>
					<el-button :icon="Search" @click="init" />
				</template>
			</el-input>
		</el-col>
	</el-row>

<!--	&lt;!&ndash; 品牌标签云 &ndash;&gt;-->
<!--	<el-row  class="brand-container">-->
<!--		<el-col :span="24">-->
<!--			<div class="brand-list">-->
<!--				<el-tag-->
<!--					v-for="brand in state.brands"-->
<!--					:key="brand"-->
<!--					class="brand-item"-->
<!--					effect="plain"-->
<!--					round-->
<!--				>-->
<!--					{{ brand.name }}-->
<!--				</el-tag>-->
<!--			</div>-->
<!--		</el-col>-->
<!--	</el-row>-->

	<!-- 房源卡片 -->
	<el-row class="product-container">
		<el-col :span="24">
			<el-space wrap :size="20">
				<el-card
					v-for="item in state.getList"
					:key="item.id"
					class="product-card"
					@click="to(item.id)"
					shadow="hover"
				>
					<div class="image-container">
						<el-image :src="item.image" class="product-image" />
						<el-tag v-if="item.tag" class="product-tag">{{ item.tag }}</el-tag>
					</div>
					<div class="product-info">
						<div class="product-title">{{ item.title }}</div>
						<div class="product-sub">{{ item.name}}/{{item.face}}/{{ item.type}}/{{item.face}}/{{ item.area}}平方</div>
						<div class="price-container">
							<span class="current-price">{{ item.price }}元/平方</span>
							<el-tag type="success" size="small">区块溯源</el-tag>
						</div>
					</div>
				</el-card>
			</el-space>
		</el-col>
	</el-row>
	<!-- 分页 -->
	<el-row class="pagination-container">
		<el-col :span="24">
			<el-pagination
				background
				layout="prev, pager, next"
				:total="state.total"
				@current-change="handleCurrentChange"
				class="custom-pagination"
			/>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { computed, reactive, onMounted } from 'vue'
const router = useRouter()
const state = reactive(<any>{
	total: 0,
	page: {
		page: 1,
		title: '',
		limit:12
	},
	getList: [{
		"id": "9787559485054",
		"title": "房东急售近地铁 近医院 诚心出售",
		"name": "学府小区",
		"city": "深圳",
		"type": "学区房",
		"area": "73.0",
		"floor": 6,
		"face": "西",
		"decoration": "简装修",
		"image": "http://localhost:18081/360x312c (1).webp",
		"price": 6600,
		"description": "<p>临近重点小学，交通便利</p>",
		"tag": "深圳",
		"hex": "0x389d64c05c566eafd726cf75af4b474250aefea760969b9ed04429ef520eb7f8730c176e2e39a429",
		"sort": 3,
		"status": 1,
		"view": 8,
		"createTime": "2025-05-19 16:42:57",
		"userId": "1863920777825390593",
		"user": null,
		"orderEntityList": [],
		"isFavorite": null
	}],
	brands:[]
})



/**
 * 初始化
 */
function init() {
	frontRequest.get("/api/item/page",{
		params: state.page
	}).then((res) => {
		state.getList = res.data.list
		state.total = res.data.total
	})
	frontRequest.get("/api/categories/page").then((res) => {
		state.brands = res.data.list
	})
}
/**
 * 分页
 */
const handleCurrentChange = (val: number) => {
	state.page.page = val
	init()
}

/**
 * 跳转
 */
const to = (id: number) => {
	router.push(`/info/${id}`)
}

onMounted(() => {
	init()
})
</script>
<style scoped>
/* 搜索框样式 */
.search-container {
	padding: 20px 0;
	display: flex;
	justify-content: center;
}
.search-input {
	width: 652px;
	height: 48px;
	border: 2px solid #ef1f1f;
	border-radius: 24px;
	overflow: hidden;
}
/* 品牌标签样式 */
.brand-container {
	padding: 0 20px 20px;
}
.brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.brand-item {
	padding: 8px 20px;
	transition: all 0.3s;
	cursor: pointer;
}
.brand-item:hover {
	transform: translateY(-2px);
	background-color: #fef0f0;
}
/* 房源卡片样式 */
.product-container {
	padding: 0 20px;
}
.product-card {
	width: 270px;
	transition: transform 0.3s;
	cursor: pointer;
	margin-bottom: 20px;
}
.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.image-container {
	position: relative;
	height: 240px;
	overflow: hidden;
}
.product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}
.product-image:hover {
	transform: scale(1.05);
}
.product-tag {
	position: absolute;
	left: 10px;
	background-color: #b9ccf6;
	color: #010110;
}
:deep(.el-card__body){
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

/* 房源信息 */
.product-info {
	padding: 12px;
}
.product-title {
	font-size: 14px;
	color: #333;
	font-weight: 500;
	height: 30px;
	overflow: hidden;
	display: -webkit-box;
}
.product-sub{
	color: #6b6a6a;
	font-size: 12px;
	margin-bottom: 8px;
}
.product-title:hover {
	color: #c27006;
}
.price-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.current-price {
	color: #ff5722;
	font-size: 18px;
	font-weight: bold;
}

/* 分页样式 */
.pagination-container {
	padding: 30px 0;
}
.custom-pagination {
	display: flex;
	justify-content: center;
}
</style>

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