<template>
	<!-- 搜索框 -->
	<el-row v-if="isPage" 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>

	<!-- 品牌标签云 -->
	<el-row v-if="isPage" 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 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="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 v-if="isPage" 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 { itemPage } from '~/api/itemApi'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { computed, reactive, onMounted } from 'vue'

const router = useRouter()
const props = defineProps({
	isPage: {
		type: Boolean,
		default: false,
	},
	getList: {
		type: Array,
		default: () => [], // 默认值为空数组
	},
})

// 计算属性来判断 list 是否为空，如果为空则使用 props.getList
const getList = computed(() => {
	return state.getList.length > 0 ? state.getList : props.getList
})

const state = reactive(<any>{
	total: 0,
	page: {
		page: 1,
		title: '',
		limit:12
	},
	getList: [],
	brands:[]
})

/**
 * 初始化
 */
function init() {
	if (props.isPage) {
		itemPage(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: 240px;
	border-radius: 12px;
	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: 260px;
	overflow: hidden;
	border-radius: 8px;
}
.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;
	margin-bottom: 8px;
	height: 40px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.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>
