<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章管理',active='article'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div id="elementTable" class="col-md-10 col-md-offset-2">

        <el-form id="fromData" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标题">
                <el-input v-model="formInline.user" placeholder="输入标题" name="title"></el-input>
            </el-form-item>
            <el-form-item label="分类" style="width: 280px">
                <el-select v-model="formInline.region" placeholder="所属分类" name="category">
                    <div v-for="c in tableData ">
                    <el-option  :value="c.categories" :text="c.categories">

                    </el-option>
                    </div>
                </el-select>
            </el-form-item>

            <el-date-picker
                    v-model="formInline.startTime"
                    align="right"
                    type="date"
                    placeholder="选择开始日期"
                    :picker-options="pickerOptions"
                    name="startTime">
            </el-date-picker>
            <el-date-picker
                    v-model="formInline.endTime"
                    align="right"
                    type="date"
                    placeholder="选择结束日期"
                    :picker-options="pickerOptions"
                    name="endTime">
            </el-date-picker>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" :offset="6"
                  border
                  style="width:100%">
            <el-table-column
                    fixed
                    label="文章标题"
                    width="250">
                <template slot-scope="scope">
                    <a :href="'/admin/article/'+scope.row.cid"
                       target="_blank"
                       class="buttonText">{{scope.row.title}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    prop="created"
                    :formatter="timestampToTime"
                    label="发布时间"
                    width="156">
            </el-table-column>

            <el-table-column
                    prop="categories"
                    label="所属分类"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="发布状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="commentsNum"
                    label="评论数"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="hits"
                    label="浏览量"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="280">
                <template slot-scope="scope">
                    <a :href="'/admin/article/'+scope.row.cid"
                       class="buttonText">
                        <el-button type="primary">
                            修改
                        </el-button>
                    </a>
                    <el-button @click="delRow(scope.row.cid)" type="danger">
                        删除
                    </el-button>
                    <a :href="'/article/'+scope.row.cid+'/#preview'" target="_blank"
                       class="buttonText">
                        <el-button type="success">
                            浏览
                        </el-button>
                    </a>

                </template>
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="tablePage.numberOfElements"
                    :page-sizes="[15, 20, 30, 50]"
                    :page-size="tablePage.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tablePage.totalElements">
            </el-pagination>
        </div>
    </div>

</div>
<div th:replace="admin/footer :: footer"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //时间过滤器
    Vue.filter('time', function (value) {
        let cc = new Date(value * 1000);
        return cc.toLocaleString();
    })
    Date.prototype.toLocaleString = function () {    //这里可以定义想要的类型
        return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";
    }

    var vm2 = new Vue({
        el: "#elementTable",
        data: {
            url: "/admin/article",
            tablePage: [],
            tableData: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            formInline: {
                user: '',
                region: '',
                startTime: '',
                endTime: '',

            },
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        },

        mounted() {
            this.init()
        },
        methods: {
            init() {
                var search = $("#fromData").serialize();
                axios.post(this.url + '/search' , search).then(response => {
                    console.log(response)
                    this.tablePage=response.data;
                    this.tableData=response.data.list;
                })
            },
            fetchDate(){
                var search = $("#fromData").serialize();
                let pageNum = this.tablePage.numberOfElements<=0?1:this.tablePage.numberOfElements;
                let number = this.tablePage.size<15?1:this.tablePage.size;
                axios.post(this.url + '/search' + '?page=' + pageNum + '&limit=' + number, search).then(response => {
                    console.log(response)
                    this.tablePage=response.data;
                    this.tableData=response.data.list;
                })
            },
            refresh() {
                setTimeout(function () {
                    window.location.reload();
                }, 600);
            },
            timestampToTime(row, column) {
                var date = new Date(row.created * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = date.getDate() + ' '
                var h = date.getHours() + ':'
                var m = date.getMinutes() + ':'
                var s = date.getSeconds()
                return Y + M + D + h + m + s
                console.log(timestampToTime(1533293827000))
            },
            delRow(cid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(this.url + '/delete?cid=' + cid).then(response => {
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '删除失败'
                        });
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.refresh()

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClick(row) {
                console.log(row);

            },
            onSubmit() {
                this.fetchDate();
            },
            handleSizeChange(val) {
                // 改变分页的大小:
                this.tablePage.size = val;
                this.fetchDate()

            },
            handleCurrentChange(val) {
                this.tablePage.numberOfElements = val;
                this.fetchDate()
            }

        },
    })
    /*]]>*/
</script>
</body>
</html>