<template>
    <div class="log_container">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <div class="title">用户访问日志</div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <el-date-picker
                                v-model="datatime"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right"
                            ></el-date-picker>
                            <el-button type="primary" @click="search">查询</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <ListContainer
                    v-bind="{
                        listField: listField,
                        listData: logList,
                        noDataTip: '暂无数据',
                        total: total,
                        pageSize: pageSize,
                        currentPage: page,
                        searchData: getLogList,
                    }"
                ></ListContainer>
            </el-main>
            <!-- <el-footer>
                <div>
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="currentPageChange"
                    ></el-pagination>
                </div>
            </el-footer>-->
        </el-container>
    </div>
</template>

<script>
import api from "@/api/log"
export default {
    components: {
        ListContainer: () => import("@/components/ListContainer.vue")
    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            datatime: [new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()],
            page: 1,
            pageSize: 20,
            total: 0,
            logList: [],
            listField: [
                {
                    name: 'userName',
                    alias: '用户',
                    span: 3
                },
                {
                    name: 'loginIp',
                    alias: '访问IP',
                    span: 3
                },
                {
                    name: 'createTime',
                    alias: '访问时间',
                    span: 5
                },
                {
                    name: 'requestUrl',
                    alias: '访问接口',
                    span: 13
                }
            ]
        }
    },
    created() {
        this.page = 1;
        this.getLogList(this.page);
    },
    methods: {
        getLogList(page) {
            let that = this;
            let obj = {
                page: page - 1,
                pageSize: this.pageSize
            }
            if (this.datatime != null) {
                obj.startDate = this.datatime[0].getTime()
                obj.endDate = this.datatime[1].getTime()
            }
            api.getLogList(obj).then((result) => {
                if (result.code == 200) {
                    that.total = result.total;
                    that.logList = result.content == -1 || result.content == "" ? [] : result.content;
                } else {
                    checkRequestCode(result)
                }
            }).catch((err) => {
                that.$message({
                    type: "error",
                    message: err
                })
            });
        },
        search() {
            this.page = 1;
            this.getLogList(this.page)
        }
    }
}
</script>

<style lang="less" scoped>
.log_container {
    width: 100%;
    height: 100%;
    .el-container {
        width: 100%;
        height: 100%;
        .el-header {
            background-color: #ffffff;
            border-radius: 4px;
            .el-row {
                padding: 10px 0px;
                .el-col:nth-child(2) {
                    > div {
                        float: right;
                    }
                }
            }
            .title {
                line-height: 40px;
                font-size: 20px;
            }

            .el-date-editor {
                margin-right: 20px;
            }
        }
        .el-main {
            border-radius: 4px;
            margin-top: 20px;
            background-color: #ffffff;
        }
    }
}
</style>