<template>
	<el-row :gutter="20">
		<el-col :span="24">
			<div class="movie-ranking">
				<div class="header">
					<h1>图书排行榜</h1>
				</div>
				<div class="movie-list">
					<div class="movie-item" v-for="(movie, index) in state.getList" :key="index" @click="to(movie.id)">
						<div class="ranking-badge">{{ index + 1 }}</div> <!-- Display rank at the top right -->
						<img :src="movie.image" class="poster" />
						<div class="movie-details">
							<h3>{{ movie.title }}</h3>
							<p>{{ movie.movieType }}</p>
							<p style="text-align: center">价格: {{ movie.price }}元 | 作者：{{ movie.tag }}</p>
						</div>
					</div>
				</div>
			</div>
		</el-col>
<!--		<el-col :span="6">-->
<!--			&lt;!&ndash; Placeholder for additional content or sidebar &ndash;&gt;-->
<!--			d-->
<!--		</el-col>-->
	</el-row>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const state = reactive({
	route: "api/item",
	dialogVisible: false,
	getList: [], // Data fetching
	query: {
		total: 0, // Total number of records
		page: 1, // Current page number
		limit: 100, // Number of records per page
	}
})

// Fetch movie data
const init = () => {
	frontRequest.get(`${state.route}/page`, {
		params: state.query
	}).then((res: any) => {
		state.getList = res.data.list
		state.query.total = res.data.total
	})
}

// Navigate to movie details page
const to = (id: number) => {
	router.push(`/info/${id}`)
}

// Fetch data on component mount
onMounted(() => {
	init()
})
</script>

<style scoped>
.movie-ranking {
	font-family: Arial, sans-serif;
	padding: 20px;
}

.header h1 {
	text-align: center;
	font-size: 48px;
	font-weight: bold;
	background: linear-gradient(45deg, #ca067d, #e12304); /* Gradient background */
	color: transparent;
	background-clip: text; /* Make the text color match the gradient */
	-webkit-background-clip: text; /* Safari support */
	animation: glowing 1.5s infinite alternate; /* Glowing effect */
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.6); /* Glowing effect */
}
@keyframes glowing {
	0% {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.6);
	}
	50% {
		text-shadow: 0 0 10px rgb(246, 226, 226), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
	}
	100% {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.6);
	}
}

.movie-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.movie-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	position: relative;
	cursor: pointer;
	background-color: #fff;
}

.poster {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.movie-details h3 {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
}

.movie-details p {
	margin: 5px 0;
	color: #555;
}

/* Rank badge style */
.ranking-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: rgb(252, 224, 75);
	color: #2e191e;
	padding: 5px 10px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: bold;
}
</style>

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