<!--
 * @Description: 访问统计报表组件
 * @Author: laoliu
 * @Date: 2022-09-23 16:43:52
-->
<template>
  <div class="body">
    <!-- 过滤条件 -->
    <el-row class="head-line" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="8" style="text-align:left">
        <span class="search-title">应用名称：</span>
        <el-select v-model="filterParams.globalAppName" placeholder="选择应用" size="small" style="width:200px" >
          <el-option v-for="item in AppNameOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="9" style="text-align:left">
        <span class="search-title">日期：</span>
        <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          size="small" :picker-options="dateRangePickerOptions" />
      </el-col>
      <el-col :span="7" style="text-align:right">
        <el-button @click="handleQuery" size="small" type="primary" icon="el-icon-search">查 询</el-button>
      </el-col>
    </el-row>
    <div class="hr-line"></div>

    <!-- 列表 -->
    <el-table :data="accessList" :header-cell-style="{'background-color':'#EFF5FA'}"
      style="margin-top:20px; width:100%; border: 1px solid #f0f0f0;">
      <el-table-column label="" min-width="1%"></el-table-column>
      <el-table-column prop="globalAppName" label="应用名称" min-width="12%"></el-table-column>
      <el-table-column prop="date" label="日期" min-width="9%"></el-table-column>
      <el-table-column prop="pv" label="PV" min-width="8%" />
      <el-table-column prop="uv" label="UV" min-width="8%"></el-table-column>
      <el-table-column prop="ip" label="IP" min-width="8%"></el-table-column>
      <el-table-column prop="maxConcurrent" label="最高并发(/分)" min-width="10%"></el-table-column>
      <el-table-column prop="minConcurrent" label="最小并发(/分)" min-width="10%"></el-table-column>
      <el-table-column prop="maxTimePeriod" label="最高并发时段" min-width="14%"></el-table-column>
      <el-table-column prop="maxRespTime" label="最长响应(ms)" min-width="10%"></el-table-column>
      <el-table-column prop="minRespTime" label="最短响应(ms)" min-width="10%"></el-table-column>
    </el-table>
    <el-row class="foot-line">
      <el-pagination background @size-change="handlePageSize" @current-change="handleCurPage" 
        :current-page="filterParams.page" :page-sizes="pageSizes" :page-size="filterParams.pageSize" 
        layout="total,prev, pager, next,sizes, jumper" :total="totalNumber" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AccessReport',
  components:{
  },

  data() {
    return {
      // 过滤查询相关变量 
      AppNameOptions: [],
      dateRangePickerOptions: this.dateUtil.getDateRangePickerOptions(true, false),
      
      dateRange: null,
      filterParams: {
        globalAppName: '',
        startDate: '',
        endDate: '',

        page: 1,
        pageSize: 31
      },
      pageSizes: [31, 50, 100],
      totalNumber: 0,

      accessList: []
    }
  },
  
  methods: {
    async listApps() {
      await this.appAxios("GET", this.commonUrl.URL_LIST_APPLICATIONS).then(result => {
        if (result != null) {
          let appList = result.data;
          this.AppNameOptions = [];
          for (let app of appList) {
            this.AppNameOptions.push({
              value: app.id,
              label: app.name + ' (' + app.id + ')'
            });
          }
          this.filterParams.globalAppName = this.AppNameOptions[0].value;
        }
      })
    },

    pageAccesses() {
      this.appAxios("GET", this.commonUrl.URL_PAGE_ACCESS_DATA, this.filterParams).then(result => {
          if (result != null) {
            this.accessList = result.data;
            this.totalNumber = result.totalNumber;
          }
      });
    },

    handleQuery() {
      this.filterParams.startDate = !this.dateRange ? null : this.dateUtil.dateFormat(this.dateRange[0]);
      this.filterParams.endDate = !this.dateRange ? null : this.dateUtil.dateFormat(this.dateRange[1]);
      
      this.filterParams.page = 1;
      this.pageAccesses();
    },

    handlePageSize(val) {
      this.filterParams.pageSize = val;
      this.pageAccesses();
    },

    handleCurPage(curPage) {
      this.filterParams.page = curPage;
      this.pageAccesses();
    },
  },

  mounted() {
    this.listApps().then(_result => {
      this.pageAccesses()
    })
  }
}
</script>

<style scoped>
.body {
  margin: 0 40px;
  text-align: center;
  border: solid 0px;
}
.head-line {
  margin: 19px 0;
  /* margin-bottom: 19px; */
  text-align: right;
  border: solid 0px;
}
.search-title {
  color: #657180;
  font-size: 14px;
}
.hr-line {
	height: 10px;
	background-color: #f0f0f0;
}
.foot-line {
  margin-top: 20px;
  text-align: right;
  border: solid 0px;
}
</style>