<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="登录时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <div style="padding-top: 10px">
      <vxe-table
        ref="tables"
        :loading="loading"
        align="center"
        class="mytable-style"
        auto-resize
        border
        resizable
        export-config
        highlight-current-row
        show-overflow
        max-height="700"
        :data="list"
      >
        <vxe-table-column field="day" title="日期"/>
        <vxe-table-column field="count" title="登录总次数"/>
        <vxe-table-column field="success" title="成功次数"/>
        <vxe-table-column field="fail" title="失败次数"/>
        <vxe-table-column field="ips" title="ip个数"/>
      </vxe-table>
    </div>
  </div>
</template>

<script>

import {debounce} from "lodash";

export default {
  name: "Logininfor",
  data() {
    return {
      showTable: true,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 选择用户名
      selectName: "",
      // 显示搜索条件
      showSearch: true,
      // 表格数据
      list: [],
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: {prop: 'loginTime', order: 'descending'},
      // 查询参数
      queryParams: {
      },
      sortOrder: 'loginTime&asc',
    };
  },
  created() {
  },
  methods: {
    /** 查询登录日志列表 */
    getList:debounce(function(){
      if (this.dateRange == null || this.dateRange.length==0) {
        this.$message({
          type: 'warning',
          message: '请选择统计时间范围!'
        });
        return
      }
      let dateDiff = new Date(this.dateRange[1]).getTime()-new Date(this.dateRange[0]).getTime()
      let dayDiff = Math.ceil(dateDiff/(24*3600*1000))
      if (dayDiff>31){
        this.$message.warning("最多只能统计31天的数据哦!")
        return
      }

      this.loading = true;
      var searchParams = {
        startLoginTime:this.dateRange[0],
        endLoginTime:this.dateRange[1]
      }
      this.$axios.get('/sysLogininforController/logininforTotal',
        {params: searchParams}).then((res) => {
        this.list = res.data
        if (res.data == '') {
          this.showTable = false
        } else {
          this.showTable = true
        }
        this.loading = false
      }).catch((error) => {
        // this.$message.error(error)
      })
    },1000),
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    }
  }
};
</script>

