<!--
 * @Description: 业务日志面板组件
 * @Author: liusheng
 * @Date: 2022-10-18 16:43:52
-->
<template>
  <div class="body">
    <el-row :gutter="40">
      <el-col :span="7">
        <el-card>
            <el-row class="card-left">
              <el-col :span="13" style="padding-left: 30px;">最近1分钟</el-col>
              <el-col :span="6">
                <span class="count-number">{{bizLogDto.callingCountArr[0]}}</span>次
              </el-col>
              <el-col :span="5">
                <span class="count-number">{{bizLogDto.userCountList[0]}}</span>人
              </el-col>
            </el-row>
            <el-row class="card-left">
              <el-col :span="13" style="padding-left: 30px;">最近5分钟</el-col>
              <el-col :span="6">
                <span class="count-number">{{bizLogDto.callingCountArr[1]}}</span>次
              </el-col>
              <el-col :span="5">
                <span class="count-number">{{bizLogDto.userCountList[1]}}</span>人
              </el-col>
            </el-row>
            <el-row class="card-left">
              <el-col :span="13" style="padding-left: 30px;">最近10分钟</el-col>
              <el-col :span="6">
                <span class="count-number">{{bizLogDto.callingCountArr[2]}}</span>次
              </el-col>
              <el-col :span="5">
                <span class="count-number">{{bizLogDto.userCountList[2]}}</span>人
              </el-col>
            </el-row>
            <el-row class="card-left">
              <el-col :span="13" style="padding-left: 30px;">最近30分钟</el-col>
              <el-col :span="6">
                <span class="count-number">{{bizLogDto.callingCountArr[3]}}</span>次
              </el-col>
              <el-col :span="5">
                <span class="count-number">{{bizLogDto.userCountList[3]}}</span>人
              </el-col>
            </el-row>
            <el-row class="card-left">
              <el-col :span="13" style="padding-left: 30px;">最近60分钟</el-col>
              <el-col :span="6">
                <span class="count-number">{{bizLogDto.callingCountArr[4]}}</span>次
              </el-col>
              <el-col :span="5">
                <span class="count-number">{{bizLogDto.userCountList[4]}}</span>人
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="17">
          <el-card>
            <el-row :gutter="5" v-for="item of bizLogDto.last5BizLogList" :key="item.url" class="card-right">
              <el-col :span="4" style="padding-left: 30px;">
                {{accessTime(item.accessTime)}}
              </el-col>
              <el-col :span="5">{{item.username}} (id={{item.accesserId}})</el-col>
              <el-col :span="13">{{item.uri}}</el-col>
              <el-col :span="2">{{item.result}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 过滤条件 -->
    <el-row class="filter-line" :gutter="0" type="flex" justify="space-between">
      <el-col :span="24">
        <span class="search-title">当前日期：</span>
        <el-date-picker v-model="selectedDate" type="date" :clearable="false"
          @change="handleSelect" :default-value="selectedDate" size="small"
          placeholder="选择日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-col>
    </el-row>
    <!-- 数据列表 -->
    <el-table :data="dataList" :header-cell-style="{'background-color':'#EFF5FA'}"
      style="margin-top:20px; width:100%; border: 1px solid #f0f0f0;">
      <el-table-column label="" min-width="3%"></el-table-column>
      <el-table-column prop="user" label="用户名" min-width="10%"></el-table-column>
      <el-table-column prop="timeRange" label="时间段" min-width="15%"></el-table-column>
      <el-table-column prop="countInterface" label="调用接口次数" min-width="15%"></el-table-column>
      <el-table-column prop="httpMethodCount" label="调用方法次数" min-width="28%"></el-table-column>
      <el-table-column prop="resultCount" label="返回状态" min-width="24%"></el-table-column>
      <el-table-column label="操作" min-width="8%">
        <template slot-scope="scope">
          <el-button @click="handleDetails(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </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>

    <el-drawer title="接口调用明细" :visible.sync="drawer" direction="rtl" size="60%">
      <biz-log-list-panel :curApp='curApp' :date='curDate' :username='curUser' />
    </el-drawer>
  </div>
</template>

<script>
import BizLogListPanel from './BizLogListPanel.vue'

export default {
  name: 'BizDataPanel',
  props: ["curApp"],

  components:{
    'biz-log-list-panel': BizLogListPanel
  },

  data() {
    return {
      refreshBizDataTimer: null,
      bizLogDto: {
        callingCountArr: ['', '', '', '', ''],
        userCountList: ['', '', '', '', '']
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: this.dateUtil.datePickerOptions.shortcuts
      },

      selectedDate: new Date(),
      filterParams: {
        date: '',
        page: 1,
        pageSize: this.commonConst.PAGE_SIZE,
      },
      pageSizes: this.commonConst.PAGE_SIZES,
      totalNumber: 0,

      dataList: [],

      drawer: false,
      curDate: null,
      curUser: null
    }
  },
  
  computed: {
    accessTime() {
      return function(accessTime) {
          return this.dateUtil.timeFormat(accessTime);
      }
    },
  },

  methods:{
    initView() {
      this.getRealtimeBizLogDTO();
      this.pageBizDatas();
    },

    getRealtimeBizLogDTO() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_REALTIME_BIZLOG_DTO, this.curApp.id);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.bizLogDto = result.data;
        }
      })
    },

    pageBizDatas() {
      this.filterParams.date = this.dateUtil.dateFormat(this.selectedDate);
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_PAGE_BIZ_DATAS, this.curApp.id);
      this.appAxios("GET", url, this.filterParams).then(result => {
        if (result != null) {
          this.dataList = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

    handleSelect(_selected) {
      this.pageBizDatas();
    },

    handleDetails(bizData) {
      this.curDate = bizData.date;
      this.curUser = bizData.user;
      this.drawer = true;
    },

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

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

  watch: {
    curApp: {
      handler(_newName, _oldName) {
        this.initView();
      },
      immediate: false
    }    
  },

  mounted() {
    //设置实时业务统计数据刷新定时器
    this.refreshBizDataTimer = setInterval(() => {
      this.getRealtimeBizLogDTO();
    }, this.commonConst.INTERVAL_SYSTEM_ACCESS_DATA);
  },

  destroyed() {
    clearInterval(this.refreshBizDataTimer);
  }
}
</script>

<style scoped>
.body {
  margin: 0;
  text-align: left;
  border: solid 0px;
}
.card-left {
  line-height: 26px;
  font-size: 14px;
  color: #657180;
}
.count-number {
  color: red;
  font-weight: bold;
}
.card-right {
  line-height: 26px;
  font-size: 15px;
  color: #657180;
}

.filter-line {
  margin: 20px 0 10px 0;
  text-align: right;
  border: solid 0px;
}
.search-title {
  color: #657180;
  font-size: 14px;
}
.foot-line {
  margin-top: 20px;
  text-align: right;
  border: solid 0px;
}
</style>