<template>
    <div class="home-container">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <el-skeleton :rows="5" animated />
        </div>
        
        <!-- 首页内容 -->
        <div v-else>
        <!-- 轮播图和公告部分 -->
        <div class="banner-announce-wrapper">
            <!-- 轮播图 -->
            <div class="home-banner">
                <el-carousel height="280px" indicator-position="outside">
                    <el-carousel-item v-for="(banner, index) in banners" :key="index"
                    @click="goToDetail(banner.id)">
                        <div class="banner-item" :style="{ backgroundImage: `url(${banner.image})` }">
                            <!-- <div class="banner-content">
                                <h2>{{ banner.title }}</h2>
                                <p>{{ banner.details }}</p>
                            </div> -->
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 公告栏 -->
            <div class="announcement-section">
                <div class="announcement-header">
                    <div class="announcement-icon">
                        <img src="@/assets/images/home/announcement.png" alt="公告" class="announce-img" />
                        <span>公告</span>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="announcement-list">
                    <div v-for="(notice, index) in announcements" :key="index" class="announcement-item">
                        <div class="announcement-tag gonggao">{{ notice.typeText }}</div>
                        <div class="announcement-content">
                            <el-link class="announcement-title" @click="viewAnnouncement(notice.id)">{{ notice.title }}</el-link>
                            <el-icon class="right-icon"><ArrowRight /></el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐书籍 -->
        <div class="recommend-section">
            <div class="section-header">
                <h2 class="section-title">热门推荐</h2>
                <el-link type="primary" @click="viewMoreRecommend">查看更多</el-link>
            </div>
            <div class="book-list">
                <div v-for="(book, index) in recommendBooks" :key="index" class="book-item">
                    <book-card :book="book" />
                </div>
            </div>
        </div>

        <!-- 最新更新 -->
        <div class="latest-section">
            <div class="section-header">
                <h2 class="section-title">最新更新</h2>
                <el-link type="primary" @click="viewMoreLatest">查看更多</el-link>
            </div>
            <div class="book-list">
                <div v-for="(book, index) in latestBooks" :key="index" class="book-item">
                    <book-card :book="book" />
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';
import BookCard from '@/components/common/BookCard.vue';
import { homeApi } from '@/api/modules.js';

export default {
    name: 'HomeView',
    components: {
        BookCard,
        ArrowRight
    },
    setup() {
        const router = useRouter();
        const activeCategory = ref('1');
        const loading = ref(false);

        // 响应式数据
        const banners = ref([]);
        const announcements = ref([]);
        const recommendBooks = ref([]);
        const latestBooks = ref([]);

        // 获取首页数据
        const fetchHomeData = async () => {
            loading.value = true;
            try {
                // 并行请求所有接口
                const [bannerRes, noticeRes, recommendRes, newBooksRes] = await Promise.all([
                    homeApi.getBanner(),
                    homeApi.getNoticePage({ pageNo: 1, pageSize: 4 }),
                    homeApi.getRecommendList({ pageNo: 1, pageSize: 4 }),
                    homeApi.getNewList({ pageNo: 1, pageSize: 4 })
                ]);

                // 处理轮播图数据
                if (bannerRes.success) {
                    banners.value = bannerRes.result || [];
                }

                // 处理公告数据
                if (noticeRes.success) {
                    announcements.value = (noticeRes.result?.records || []).map(item => ({
                        ...item,
                        typeText: item.type === 'gonggao' ? '公告' : '通知'
                    }));
                }

                // 处理推荐书籍数据
                if (recommendRes.success) {
                    recommendBooks.value = recommendRes.result.records || [];
                }

                // 处理最新书籍数据
                if (newBooksRes.success) {
                    latestBooks.value = (newBooksRes.result?.records || newBooksRes.result) || [];
                }
            } catch (error) {
                console.error('获取首页数据失败:', error);
            } finally {
                loading.value = false;
            }
        };

        const goToDetail = (id) => {
            router.push(`/book/${id}`);
        };

        const viewAnnouncement = (id) => {
            router.push(`/notice/${id}`);
        };

        // 查看更多推荐书籍
        const viewMoreRecommend = () => {
            router.push({
                path: '/search',
                query: {
                    type: 'recommend',
                    title: '热门推荐'
                }
            });
        };

        // 查看更多最新书籍
        const viewMoreLatest = () => {
            router.push({
                path: '/search',
                query: {
                    type: 'latest',
                    title: '最新更新'
                }
            });
        };

        onMounted(() => {
            fetchHomeData();
        });

        return {
            banners,
            announcements,
            recommendBooks,
            latestBooks,
            activeCategory,
            loading,
            goToDetail,
            viewAnnouncement,
            viewMoreRecommend,
            viewMoreLatest
        };
    }
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as vars;

.home-container {
    width: 100%;
    background-color: #fff;
}

.loading-container {
    padding: 20px;
}

// 轮播图和公告的横向布局
.banner-announce-wrapper {
    padding: 20px;
    border-top: 20px solid #eee;
    display: flex;
    gap: 20px;

    @media screen and (max-width: vars.$md) {
        flex-direction: column;
    }
}

.home-banner {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    
    :deep(.el-carousel__container) {
      border-radius: 8px;
      overflow: hidden;
    }

    .banner-item {
        height: 100%;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        color: #fff;
        position: relative;
        border-radius: 8px;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            //background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
        }

        .banner-content {
            position: absolute;
            z-index: 1;
            padding: 0 50px;
            bottom: 0;
            max-width: 600px;

            h2 {
                font-size: 28px;
                margin-bottom: 10px;
            }

            p {
                font-size: 16px;
                margin-bottom: 20px;
                opacity: 0.9;
            }
        }
    }
}

// 公告栏样式
.announcement-section {
    width: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: 280px;
    
    @media screen and (max-width: vars.$md) {
        width: 100%;
    }
    
    .announcement-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        
        .announcement-icon {
            display: flex;
            align-items: center;
            
            .announce-img {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }
            
            span {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
            }
            
            .arrow-icon {
                margin-left: 5px;
                font-size: 14px;
                color: #909399;
            }
        }
    }
    
    .announcement-list {
        flex: 1;
        overflow-y: auto;
        
        .announcement-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
                border-bottom: none;
            }
            
            .announcement-tag {
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 11px;
                margin-right: 10px;
                display: inline-block;
                text-align: center;
                min-width: 50px;
                border: 1px solid;
                
                &.tongzhi {
                    color: #409EFF;
                    border-color: #409EFF;
                    background-color: rgba(64, 158, 255, 0.1);
                }
                
                &.gonggao {
                    color: #67C23A;
                    border-color: #67C23A;
                    background-color: rgba(103, 194, 58, 0.1);
                }
            }
            
            .announcement-content {
                flex: 1;
                display: flex;
                text-align: left;
                
                .announcement-title {
                    flex: 1;
                    font-size: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #606266;
                }
                
                .right-icon {
                    font-size: 14px;
                    color: #C0C4CC;
                    margin-left: 5px;
                }
            }
        }
    }
}

.recommend-section,
.latest-section {
    margin-bottom: 30px;
    padding: 30px 20px;
    border-top: 10px solid #eee;
}


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

    .section-title {
        font-size: 20px;
        font-weight: bold;
        position: relative;
        padding-left: 15px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background-color: vars.$primary-color;
            border-radius: 2px;
        }
    }
}

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

    @media screen and (max-width: vars.$lg) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (max-width: vars.$md) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: vars.$sm) {
        grid-template-columns: 1fr;
    }
}

.recommend-section{
    .book-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        @media screen and (max-width: vars.$lg) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (max-width: vars.$md) {
            grid-template-columns: repeat(1, 1fr);
        }

        @media screen and (max-width: vars.$sm) {
            grid-template-columns: 1fr;
        }
    }
}
</style>