<!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>文章管理</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #app {
            max-width: 1200px;
            margin: 50px auto;
        }

        .action {}

        .list {}

        .list table {
            width: 100%;
            border-left: solid 1px #ddd;
            border-top: solid 1px #ddd;
            border-collapse: collapse;
        }

        .list tr th,
        .list tr td {
            padding: 8px 10px;
            border-right: solid 1px #ddd;
            text-align: left;
            border-bottom: solid 1px #ddd;
        }

        .content-div {
            border: 1px solid #DCDFE6;
            border-radius: 3px;
            overflow: hidden;
        }
    </style>
    <script src="./kindeditor/kindeditor-all-min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <div class="action">
                <el-button @click="showAdd">新增</el-button>
            </div>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                            <th width="40">编号</th>
                            <th>标题</th>
                            <th width="80">分类</th>
                            <th width="180">发表时间</th>
                            <th width="60">阅读数</th>
                            <th width="60">评论数</th>
                            <th width="60">状态</th>
                            <th width="140">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="art in list" :key="art.id">
                            <td>{{art.id}}</td>
                            <td>{{art.title}}</td>
                            <td>{{art.category}}</td>
                            <td>{{art.publish_time}}</td>
                            <td>{{art.view_count}}</td>
                            <td>{{art.comment_count}}</td>
                            <td>{{art.status == 1?'已发布':'草稿'}}</td>
                            <td>
                                <!-- 不需要传参则可以不写方法后的小括号  -->
                                <el-link @click="showEdit(art)">修改</el-link>
                                <el-popconfirm title="此操作将永久删除该文章数据,是否继续?" @confirm="deleteArticlebyId(art.id)">
                                    <el-link slot="reference">删除</el-link>
                                </el-popconfirm>

                                <el-popconfirm title="此操作将会更改文章状态,是否继续?" @confirm="updateArticleStatus(art)">
                                    <el-link slot="reference">{{art.status==1?'设为草稿':'发布文章'}}</el-link>
                                </el-popconfirm>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <el-dialog :visible.sync="showDialog" :close-on-click-modal="false">
                <el-form ref="form" :model="form" label-width="100px" label-position="left">
                    <el-form-item label="文章标题">
                        <el-input v-model="form.title" :maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="文章缩略图">
                        <el-input v-model="form.cover"></el-input>
                    </el-form-item>
                    <el-form-item label="文章摘要">
                        <el-input type="textarea" :maxlength="500" :rows="4" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item label="文章内容">
                        <div class="content-div">
                            <!-- <div id="toolbar"></div>
                            <div id="editor" style="height: 400px"></div> -->
                            <textarea v-model="form.content" id="editor_id" style="width:100%;height:300px;"></textarea>
                        </div>
                    </el-form-item>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="阅读数">
                                <el-input v-model="form.view_count"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="评论数">
                                <el-input v-model="form.comment_count"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="分类">
                                <el-select v-model="form.category" placeholder="请选择文章分类" style="width: 100%;">
                                    <el-option label="默认分类" value="默认"></el-option>
                                    <el-option value="生活"></el-option>
                                    <el-option value="随笔"></el-option>
                                    <el-option value="科技"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发表时间">
                                <el-date-picker v-model="form.publish_time" type="datetime" style="width: 100%;"
                                    placeholder="选择文章的发表时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- slot插槽位footer表示该元素会放入到组件的footer -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="saveArticle">保存数据</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

    <script src="./vue/dist/vue.js"></script>
    <script src="./element-ui/lib/index.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 manage from './assets/manage.js'
        new Vue(manage)
    </script>
</body>

</html>