<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div id="home">
        <header>
            <div class="container show-flex">
                <div class="logo">我的博客</div>
                <div class="search-input">
                    <el-input size="small" placeholder="请输入搜索关键字" prefix-icon="el-icon-search" clearable
                        v-model="search" @change="loadList" />
                </div>
                <nav class="site-nav">
                    <a href="./">首页</a>
                    <a href="./login.html">登录</a>
                </nav>
            </div>
        </header>
        <div class="main container">
            <div class="show-flex article-item" v-for="(a,index) in articleArray" :key="index">
                <div class="image">
                    <img :src="a.cover">
                </div>
                <div class="info">
                    <h3 class="title">
                        <a :href="'detail.html?id=' + a.id">{{a.title}}</a>
                    </h3>
                    <p class="desc">{{a.description}}</p>
                    <div class="ext">
                        <span>发布于:{{formatDate(a.publish_time)}}</span>
                        <span>阅读({{a.view_count}})</span>
                        <span>评论({{a.comment_count}})</span>
                    </div>
                </div>
            </div>
            <div class="page" style="text-align: center;">
                <el-pagination layout="prev, pager, next" @current-change="onPageChange" :page-size="size"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
    <!-- 引入vue库 -->
    <script src="./vue/dist/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./modules/dayjs.min.js"></script>
    <script type="module">
        Vue.config.productionTip = false;
        Vue.config.silent = true;
        // import Vue from './vue/dist/vue.esm-browser.js'
        // vue 通过 Vue.createApp(选项)创建vue实例
        import request from './modules/request.js'

        new Vue({
            el: '#home', // 设置挂载对象
            data() {
                return {
                    articleArray: [], // 文章列表数组
                    total: 0, // 总的文章数量
                    size: 3, // 每页显示条数
                    currentPage: 1,
                    search: ''
                }
            },
            created() {
                this.loadList();//页面一加载就获取
            },
            methods: {
                formatDate(time) {
                    return dayjs(time).format('YYYY-MM-DD HH:mm')
                },
                loadList() {
                    // 使用request方法请求数据
                    request('./api/article/web/list', { size: this.size, page: this.currentPage, search: this.search }).then(data => {
                        this.articleArray = data.list
                        this.total = data.total;
                        this.size = data.size;
                    })
                },
                // 当页码发生变化
                onPageChange(page) {
                    this.currentPage = page; // 设置当前页码
                    this.loadList();
                }
            }
        })
    </script>
</body>

</html>