<!--用戶行为列表-->
<template>
    <div>
        <div>
            <el-row>
                <el-col :span="8">
                    <div class="tableDiv1">
                        <!-- <div class="searchArea">
                            <el-form label-width="80px">
                            </el-form>
                        </div> -->
                        <div class="tableArea">
                            <el-row>
                                <el-col :span="16">
                                    <div class="title"> 在线操作人数: {{totalOnline}}</div>
                                </el-col>
                                <!-- <el-col :span="8" style="text-align: right;">
                                    <el-button
                                            class="button"
                                            type="primary"
                                            size="mini"
                                            icon="el-icon-search"
                                            @click="getTableDataOnline(1)"
                                    >查询</el-button>
                                </el-col> -->
                            </el-row>
                            <el-row>
                                <el-table
                                        :data="tableDataOnline"
                                        v-loading="tableLoading1"
                                        :height="tableHeight + 50"
                                        highlight-current-row
                                        :border="true"
                                >
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            fixed="left"
                                            align="center"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="userName"
                                            label="用户名"
                                            align="center"
                                            min-width="120"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="loginIp"
                                            label="IP"
                                            align="center"
                                            min-width="120"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="loginAddress"
                                            align="center"
                                            label="地点"
                                            width="150"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="lastLoginTime"
                                            label="最近登录时间"
                                            align="center"
                                            width="120"
                                    ></el-table-column>
                                </el-table>
                                <el-pagination
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="totalOnline"
                                        :page-sizes="[10, 20, 30, 40, 100, 200]"
                                        :page-size="pageSizeOnline"
                                        :current-page.sync="pageNumOnline"
                                        @size-change="tableSizeChangeOnline"
                                        @current-change="getTableDataOnline()"
                                        style="text-align: right;margin-top: 10px;"
                                >
                                </el-pagination>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="tableDiv2">
                        <div class="searchArea">
                            <el-form label-width="80px">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="开始时间" prop="startTime" class="form_item">
                                            <el-date-picker
                                                    size="small"
                                                    v-model="startTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="结束时间" prop="endTime" class="form_item">
                                            <el-date-picker
                                                    size="small"
                                                    v-model="endTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="请求路径" class="form_item">
                                            <el-input
                                                    v-model="requestUrl"
                                                    clearable
                                                    placeholder="请输入"
                                                    size="small"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="操作人" class="form_item">
                                            <el-input
                                                    v-model="crtMan"
                                                    clearable
                                                    placeholder="请输入"
                                                    size="small"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item  class="form_button">
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="tableArea">
                            <el-row>
                                <el-col :span="16">
                                    <div class="title"> 用户行为 <span></span></div>
                                </el-col>
                                <el-col :span="8" style="text-align: right;">
                                    <el-button
                                            class="button"
                                            type="primary"
                                            size="mini"
                                            icon="el-icon-search"
                                            @click="getTableData(1)"
                                    >查询</el-button>
                                    <el-button
                                            class="button"
                                            type="primary"
                                            size="mini"
                                            icon="el-icon-refresh"
                                            @click="tableDataCancel()"
                                    >重置</el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-table
                                        :data="tableData"
                                        v-loading="tableLoading"
                                        :height="tableHeight"
                                        highlight-current-row
                                        :border="true"
                                >
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            fixed="left"
                                            align="center"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="requestUrl"
                                            label="请求路径"
                                            align="center"
                                            min-width="120"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="requestTime"
                                            label="请求时间"
                                            align="center"
                                            width="150"
                                    ></el-table-column>
                                    <!-- <el-table-column :show-overflow-tooltip="true" label="部门" min-width="100"></el-table-column> -->
                                    <!-- <el-table-column :show-overflow-tooltip="true"
                                           prop="duty"
                                           label="职务"
                                           :filter-method="filterColumn"
                                           min-width="100"></el-table-column> -->
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="responseTime"
                                            label="响应时间"
                                            align="center"
                                            width="150"
                                    ></el-table-column>
                                    <!-- <el-table-column :show-overflow-tooltip="true"
                                           prop="degree"
                                           align="center"
                                           label="文化程度"
                                           min-width="80"></el-table-column> -->
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="takeTime"
                                            align="center"
                                            label="执行时间（ms）"
                                            width="70"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            align="center"
                                            type="noFilter"
                                            label="是否调用成功"
                                            width="80"
                                    >
                                        <template slot-scope="scope">
                                            <span :class="{chartreuse: scope.row.success === '1', red: scope.row.success === '0'}">{{ scope.row.success === '1' ? '成功' : scope.row.success === '0' ? '失败' : '' }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="crtTime"
                                            align="center"
                                            label="创建时间"
                                            width="150"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="crtMan"
                                            align="center"
                                            label="创建人"
                                            width="100"
                                    ></el-table-column>
                                    <el-table-column
                                            :show-overflow-tooltip="true"
                                            prop="ip"
                                            align="center"
                                            label="IP地址"
                                            width="150"
                                    ></el-table-column>
                                </el-table>
                                <el-pagination
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total"
                                        :page-sizes="[10, 20, 30, 40, 100, 200]"
                                        :page-size="pageSize"
                                        :current-page.sync="pageNum"
                                        @size-change="tableSizeChange"
                                        @current-change="getTableData()"
                                        style="text-align: right;margin-top: 10px;"
                                >
                                </el-pagination>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import { formatDate } from '@/utils/util.js'
    export default {
        name: 'userBehavior',
        data () {
            return {
                tableLoading: false,
                tableLoading1: false,
                tableData: [],
                total: 0,
                pageSize: 30,
                pageNum: 1,
                tableHeight: 500,
                userBehaviorList: [],
                startTime: '',
                endTime: '',
                requestUrl: '',
                crtMan: '',
                formatDate,
                tableDataOnline: [],
                totalOnline: 0,
                pageSizeOnline: 20,
                pageNumOnline: 1,
                dataNameObj: { // 本地数据名与接收数据名一一对应
                    requestUrl: 'requestUrl',
                    requestTime: 'requestTime', // 请求时间
                    responseTime: 'responseTime', // 响应时间
                    takeTime: 'takeTime', // 执行时间（ms）
                    success: 'success', // 是否调用成功
                    crtTime: 'crtTime', // 创建时间
                    crtMan: 'crtMan', // 创建人
                    ip: 'ip' // IP地址
                },
                dataNameObjOnline: { // 本地数据名与接收数据名一一对应
                    userName: 'userName', // 用户名
                    loginIp: 'loginIp', // IP
                    loginAddress: 'loginAddress', // 地点
                    lastLoginTime: 'lastLoginTime' // 最近登录时间
                },
            }
        },
        mounted: function () {
            let that = this;
            let pageNum = that.pageNum;
            if (that.$route.query.pageNum) {
                pageNum = +that.$route.query.pageNum;
            }
            if (that.$route.query.pageSize) {
                that.pageSize = +that.$route.query.pageSize;
            }
            that.getTableDataOnline();
            that.getTableData(pageNum);
            this.$nextTick(() => {
                let h = document.body.clientHeight;
                this.tableHeight = h - 150;
            })
        },
        methods: {
            // 重置
            tableDataCancel () {
                let that = this;
                that.requestUrl = '';
                that.crtMan = '';
            },
            // 分页
            tableSizeChange (val) {
                let that = this;
                that.pageSize = val;
                that.gettableData(1);
            },
            getTableData (pageNum) {
                let that = this,
                    params = {
                        startTime: that.formatDate(that.startTime,"yyyy-MM-dd HH:mm:ss"),
                        endTime: that.formatDate(that.endTime,"yyyy-MM-dd HH:mm:ss"),
                        requestUrl: that.requestUrl,
                        crtMan: that.crtMan
                    };
                that.pageNum = pageNum || that.pageNum;
                that.tableLoading = true;
                that.axios.get('pass/v1/sysuserbehaviors/userBehavior?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize, {
                    params: params
                })
                    .then(function (res) {
                        if (res.code === '0') {
                            let arr = [];
                            that.total = res.data.total;
                            res.data.list.forEach(item => {
                                let obj = {};
                                for (let key in that.dataNameObj) {
                                    obj[key] = item[that.dataNameObj[key]];
                                }
                                arr.push(obj);
                            });
                            that.tableData = arr;
                        } else {
                            that.$message.error(res.message);
                        }
                        that.tableLoading = false;
                    }).catch(function () {
                    that.tableLoading = false;
                });
            },
            // 分页
            tableSizeChangeOnline (val) {
                let that = this;
                that.pageSizeOnline = val;
                that.gettableData(1);
            },
            getTableDataOnline (pageNum) {
                let that = this,
                    params = {
                        onlineStatus: '1'
                    };
                that.pageNumOnline = pageNum || that.pageNumOnline;
                that.tableLoading1 = true;
                that.axios.get('pass/v1/sysusers/onlineUser?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize, {
                    params: params
                })
                    .then(function (res) {
                        if (res.code === '0') {
                            let arr = [];
                            that.totalOnline = res.data.total;
                            res.data.list.forEach(item => {
                                let obj = {};
                                for (let key in that.dataNameObjOnline) {
                                    obj[key] = item[that.dataNameObjOnline[key]];
                                }
                                arr.push(obj);
                            });
                            that.tableDataOnline = arr;
                        } else {
                            that.$message.error(res.message);
                        }
                        that.tableLoading1 = false;
                    }).catch(function () {
                    that.tableLoading1 = false;
                });
            }
        }
    }
</script>

<style lang="scss">
    .userBehavior {
        padding: 10px;
    }
    .searchArea {
        margin:  5px 0px 0px 0px;
        text-align: left;
        .el-form-item {
            margin-bottom: 8px;
        }
        .form_item {
            .el-select,.el-input {
                width: 100%;
            }
        }
        .form_button {
            width: 100%;
            text-align: center
        }
    }
    .foot-style {
        margin: 5px 0 0;
        text-align: right;
    }
    .red {
        color: red;
    }
    .chartreuse {
        color: #1a9f17;
    }
    .width-100 {
        width: 100%;
    }
    .el-input-number-text-left {
        .el-input__inner {
            text-align: left;
        }
    }
    .tableDiv1 {
        padding: 10px;
        BORDER-RIGHT: #C0C0C0 1px solid;
        border-top: #C0C0C0 1px solid;
        BORDER-LEFT: #C0C0C0 0px solid;
        BORDER-BOTTOM: #C0C0C0 0px solid;
    }
    .tableDiv2 {
        padding: 10px;
        BORDER-RIGHT: #C0C0C0 0px solid;
        border-top: #C0C0C0 1px solid;
        BORDER-LEFT: #C0C0C0 1px solid;
        BORDER-BOTTOM: #C0C0C0 0px solid;
    }
</style>
