<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>报表浏览记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card">
      <el-tab-pane label="报表浏览记录">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="访问时间">
            <el-date-picker v-model="timeArray" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch(false)">查询</el-button> 
            <el-button type="primary" icon="el-icon-download" @click="querySearch(true)">导出</el-button>
          </el-form-item>
        </el-form> 

        <el-table :data="listData" border style="width: 100%" class="table">
          <el-table-column prop="functionName" label="报表名"></el-table-column>
          <el-table-column prop="userName" label="访问者"></el-table-column>
          <el-table-column prop="requestUrl" label="报表地址"></el-table-column>
          <el-table-column prop="requestIp" label="访问ip"></el-table-column>
          <el-table-column prop="createTime" label="访问时间"></el-table-column>
        </el-table>
        <pagination :total="listQuery.total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="querySearch(false)" />
      </el-tab-pane>

    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
import commutil from "@/components/common/globaldata/commutil.data.vue";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  data() {
    return {
      timeArray: [],
      listData: [],
      listQuery: {
        total: 0,
        pageIndex: 1,
        pageSize: 50,
        startDate: '',
        endDate: '',
        isExport:false
      },
      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 * 15);
              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]);
            },
          },
        ],
      }
    };
  },
  mounted() {},
  methods: {
    querySearch(value) {
      if (this.timeArray == null || this.timeArray.length !=2) {
        this.$message.warning("请选择查看时间范围");
        return;
      }
      this.listQuery.isExport=value;
      this.listQuery.startDate=this.timeArray[0];
      this.listQuery.endDate=this.timeArray[1];
 
      if (value) {
        Service.$axiosGetReportLogExport(this.listQuery);
      } else {
        Service.$axiosGetReportLogList(this.listQuery)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData = res.data.data.dataList;
            this.listQuery.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>