<template>
	<div class="blockchain-library-container">


		<!-- 主要内容区 -->
		<main class="library-main">
			<!-- 轮播图区域 -->
			<section class="banner-section">
				<el-carousel height="360px" :interval="5000" arrow="always">
					<el-carousel-item v-for="(item, index) in state.banners" :key="index">
						<el-image
							:src="item.path"
							fit="cover"
							class="banner-image"
							:preview-src-list="[item.path]"
						/>
						<div class="banner-content">
							<h3 class="banner-title">{{ item.name  }}</h3>
						</div>
					</el-carousel-item>
				</el-carousel>
			</section>
			<!-- 新书上架 -->
			<section class="new-books-section">
				<div class="section-header">
					<h2 class="section-title">
						<el-icon><Calendar /></el-icon>
						<span>最新发布</span>
					</h2>
					<el-link type="primary" :underline="false" class="view-all" @click="to('/list')">
						更多 <el-icon><ArrowRight /></el-icon>
					</el-link>
				</div>

				<div class="books-grid">
					<div
						v-for="book in state.newBooks"
						:key="book.id"
						class="book-card"
					>
						<div class="book-cover">
							<el-image
								:src="book.image"
								fit="cover"
								class="cover-image"
								:preview-src-list="[book.image]"
							/>
							<div class="book-badge" v-if="book.isNew">
								<span>NEW</span>
							</div>
						</div>
						<div class="book-info" 	@click="to(`/info/${book.id}`)">
							<h3 class="book-title" :title="book.title">{{  book.title  }}</h3>
							<p class="book-author">{{ book.author  }}</p>
							<div class="book-meta">
								<span class="book-price">¥{{ book.price  }}</span>
								<el-tag size="small" type="success" class="blockchain-tag">
									<el-icon><Connection /></el-icon>
									链上版权
								</el-tag>
							</div>
						</div>
					</div>
				</div>
			</section>

		</main>


	</div>
</template>

<script setup lang="ts">
import {  reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import {
	ArrowRight,
	Calendar,
	Connection
} from '@element-plus/icons-vue'
const state = reactive(<any>{
	newBooks:[],
	banners:[]
})

/**
 * 初始化
 */
function init() {
	frontRequest.get("/api/book/page",{
		params: { limit:5,}
	}).then((res) => {
		state.newBooks = res.data.list
	})

	frontRequest.get("/api/slides/page",{
		params: { limit:5,}
	}).then((res) => {
		state.banners = res.data.list
	})

}

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

function to(path:string) {
	router.push(path)
}

</script>

<style scoped>
/* 全局样式 */
.blockchain-library-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f8f9fa;
	color: #333;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
}

/* 主要内容区样式 */
.library-main {
	flex: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	width: 100%;
}

/* 轮播图样式 */
.banner-section {
	margin-bottom: 40px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	color: white;
}

.banner-title {
	font-size: 28px;
	margin-bottom: 10px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.banner-desc {
	font-size: 16px;
	margin-bottom: 15px;
	max-width: 60%;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 22px;
	color: #2c3e50;
}

.section-title .el-icon {
	margin-right: 10px;
	color: #3498db;
}

.view-all {
	font-size: 14px;
	display: flex;
	align-items: center;
}

.view-all .el-icon {
	margin-left: 5px;
}


/* 新书区域样式 */
.new-books-section {
	margin-bottom: 40px;
}

.books-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.book-card {
	background-color: white;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.book-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #e74c3c;
	color: white;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.book-info {
	padding: 15px;
	cursor: pointer;
}

.book-title {
	font-size: 16px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.book-author {
	font-size: 14px;
	color: #7f8c8d;
	margin-bottom: 10px;
}

.book-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.book-price {
	font-size: 18px;
	font-weight: bold;
	color: #e74c3c;
}
.blockchain-tag {
	background-color: #e8f4fc;
	color: #3498db;
	border: none;
}
.book-cover {
	margin-right: 10px;
	flex-shrink: 0;
}
.book-title {
	font-size: 16px;
	margin-bottom: 5px;
}

.book-author {
	font-size: 14px;
	color: #7f8c8d;
	margin-bottom: 8px;
}
.link-column h4 {
	font-size: 18px;
	margin-bottom: 20px;
	color: #fff;
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
