<!--
 * @Description: 业务日志面板组件
 * @Author: liusheng
 * @Date: 2021-09-10 9:43:52
-->
<template>
  <div class="panel-body">
    <el-row class="head-line" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="11" style="text-align:left">
        <span class="search-title">URL/方法：</span>
        <el-input v-model="filterParams.uriOrMethod" clearable size="small" 
          placeholder="输入请求URL地址/HTTP方法" style="width:280px" />
      </el-col>
      <el-col :span="11" style="text-align:left">
        <span class="search-title">返回状态：</span>
        <el-input v-model="filterParams.result" clearable size="small" 
          placeholder="输入返回状态" style="width:150px" />
      </el-col>
      <el-col :span="2" 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="callingList" :header-cell-style="{'background-color':'#EFF5FA'}"
      style="margin-top:20px; width:100%; border: 1px solid #f0f0f0;">
      <el-table-column label="" min-width="2%" align="left"></el-table-column>
      <el-table-column prop="accessTime" label="访问时间" min-width="20%" align="left"></el-table-column>
      <el-table-column prop="username" label="访问者" min-width="15%" align="left"></el-table-column>
      <el-table-column label="URL地址/方法" min-width="52%" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.uri}}<br/>{{scope.row.methodDesc}}
        </template>
      </el-table-column>
      <el-table-column label="返回状态" min-width="11%" align="left">
        <template slot-scope="scope">
          {{scope.row.result}}<br/>{{scope.row.errMsg}}
        </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>
  </div>
</template>

<script>
export default {
  name: 'BizLogListPanel',
  props: ["curApp", "date", "username"],

  data() {
    return {
      callingList: [],

      filterParams: {
        curDate: null,
        username: null,
        uriOrMethod: null,
        result: null,

        page: 1,
        pageSize: this.commonConst.PAGE_SIZE,
      },
      pageSizes: this.commonConst.PAGE_SIZES,
      totalNumber: 0,
    }
  },

  computed: {
    accessDate() {
      return function(dateTime) {
          return this.dateUtil.dateFormat(dateTime);
      }
    },

    accessTime() {
      return function(dateTime) {
          return this.dateUtil.timeFormat(dateTime);
      }
    },
  },

  methods: {
    initView() {
      this.filterParams.curDate = this.date;
      this.filterParams.username = this.username;
      this.filterParams.uriOrMethod = null;
      this.filterParams.result = null;
      
      this.filterParams.page = 1;
      this.pageBizLogs();
    },

    pageBizLogs() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_PAGE_BIZ_LOGS, this.curApp.id);
      this.appAxios("GET", url, this.filterParams).then(result => {
        if (result != null) {
          this.callingList = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

    handleQuery() {
      this.filterParams.page = 1;
      this.pageBizLogs();
    },

    //以下是分页控件操作
    handlePageSize(val) {
      this.filterParams.pageSize = val;
      this.pageBizLogs();
    },

    handleCurPage(curPage) {
      this.filterParams.page = curPage;
      this.pageBizLogs();
    },
  },
  
  watch: {
    curApp: {
      handler(_newName, _oldName) {
        this.initView();
      },
      immediate: false
    },

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

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

  mounted() {
    this.initView();
  }
}
</script>

<style scoped>
.panel-body {
  margin: 20px 30px;
  text-align: center;
  border: solid 0px;
}
.head-line {
  margin-bottom: 15px;
  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>