<template>
    <BasePage :title="category.Title">
        <div class="school-category">
            <div class="b_l_w b_k" style="padding: 3.333vw;">
                <div class="school-list" v-for="item in articleList" :key="item.id"
                    @click="$navigate(`/School_detail?id=${item.id}`)">
                    <div class="img">
                        <img class="t1" :src="item.Icon" />
                    </div>
                    <div class="c">
                        <div class="name">
                            <b>{{ item.Title }}</b>
                        </div>
                        <div class="label">
                            {{ item.SubTitle }}
                        </div>
                        <div class="times">
                            <span>{{ item.CTime }}</span>
                            <span>阅览量 {{ item.ReadCount }}</span>
                        </div>
                    </div>
                </div>
                <van-empty v-if="articleList.length === 0" description="该分类暂无文章" />
            </div>
        </div>
    </BasePage>
</template>

<script>
export default {
    name: 'School_Category',
    computed: {
        categoryId() {
            return Number(this.$route.query.id) || 1
        },
        category() {
            return this.categories.find(item => item.id === this.categoryId) || this.categories[0]
        },
        articleList() {
            return this.articles.filter(item => item.CategoryId === this.categoryId)
        }
    },
    data() {
        return {
            categories: [
                { id: 1, Title: '基础知识' },
                { id: 2, Title: '进阶课程' },
                { id: 3, Title: '高级研修' }
            ],
            articles: [
                { id: 1, CategoryId: 1, Title: '农产品选购指南', SubTitle: '教你如何挑选新鲜优质的农产品', CTime: '2024-01-15', ReadCount: 1280, Icon: '/img/school-1.png' },
                { id: 2, CategoryId: 1, Title: '食品安全知识', SubTitle: '了解食品安全的基本常识', CTime: '2024-01-12', ReadCount: 856, Icon: '/img/school-2.png' },
                { id: 3, CategoryId: 1, Title: '储存保鲜技巧', SubTitle: '延长食材保鲜期的方法', CTime: '2024-01-10', ReadCount: 654, Icon: '/img/school-3.png' },
                { id: 4, CategoryId: 2, Title: '供应链管理基础', SubTitle: '农产品供应链概述', CTime: '2024-01-08', ReadCount: 432, Icon: '/img/school-4.png' },
                { id: 5, CategoryId: 2, Title: '品质控制要点', SubTitle: '如何确保产品品质', CTime: '2024-01-05', ReadCount: 321, Icon: '/img/school-5.png' },
                { id: 6, CategoryId: 2, Title: '物流运输知识', SubTitle: '冷链物流基础知识', CTime: '2024-01-03', ReadCount: 287, Icon: '/img/school-6.png' },
                { id: 7, CategoryId: 3, Title: '现代农业技术', SubTitle: '智慧农业的应用', CTime: '2024-01-01', ReadCount: 198, Icon: '/img/school-7.png' },
                { id: 8, CategoryId: 3, Title: '品牌建设策略', SubTitle: '农产品品牌打造', CTime: '2023-12-28', ReadCount: 156, Icon: '/img/school-8.png' }
            ]
        }
    }
}
</script>
