<!--
 * @Description: 系统日志页面
 * @Author: liusheng
 * @Date: 2021-01-17 22:43:52
-->
<template>
  <div class="panel-body">
    <el-row class="head-line">
      <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-date-picker>&emsp;
      <el-button size="small" @click="handleQuery" type="primary" icon="el-icon-search">查 询</el-button>
    </el-row>
    <div class="hr-line"></div>
    <el-table :data="fileList" :header-cell-style="{'background-color':'#EFF5FA'}"
      style="margin-top:20px; width:100%; border: 1px solid #f0f0f0;">
      <el-table-column label="" min-width="7%" align="left"></el-table-column>
      <el-table-column prop="name" label="文件名" min-width="35%" align="left"></el-table-column>
      <el-table-column prop="length" label="文件长度" min-width="20%" align="left"></el-table-column>
      <el-table-column prop="modifiedTime" label="最后修改时间" min-width="28%" align="left"></el-table-column>
      <el-table-column label="操作" min-width="10%" align="left">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="foot-line">
      <el-pagination background @size-change="handleSizeChange" @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 :visible.sync="showDrawer" size="70%" :with-header="false"
      direction="rtl" :before-close="handleDrawerClose">
      <div class="drawer-header">
        <b>日志文件：</b>{{filename}}&emsp;&emsp;&emsp;&emsp;
        <el-checkbox v-model="checkedAbnor" label="只显示异常内容" @change="handleChange" />
      </div>
      <div class="drawer-content" :style="dynamicHeight">
        <pre>{{logoContent}}</pre>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Constant from '../../global/CommonConst.js'
import Util from '../../global/CommonUtil.js'
import DateUtil from '../../global/DateUtil.js'
export default {
  name: 'SysLogPanel',
  props: ["curApplication"],

  data() {
    return {
      fileList: [],

      // 过滤查询相关变量
      dateRangePickerOptions: DateUtil.getDateRangePickerOptions(true, false),
      dateRange: null,
      filterParams: {
        begDate: null,
        endDate: null,
        page: 1,
        pageSize: Constant.PAGE_SIZE,
      },
      totalNumber: 0,
      pageSizes: Constant.PAGE_SIZES,

      // 查看日志文件内容相关变量
      showDrawer: false,
      filename: '',
      checkedAbnor: false,
      logoContent: ''
    }
  },

  computed: {
    dynamicHeight() {
      return 'height:' + (this.$root.windowHeight - 90) + 'px';
    },
  },

  methods: {
    initView() {
      this.dateRange = null;
      this.filterParams.begDate = null;
      this.filterParams.endDate = null;
      this.filterParams.page = 1;
      this.pageLogFiles();
    },

    handleQuery() {
      this.filterParams.begDate = !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.pageLogFiles();
    },

    handleView(row) {
      this.showDrawer = true;
      this.filename = row.name;
      this.checkedAbnor = false;
      this.logoContent = '';
      this.readLogFileContent(this.checkedAbnor);
    },

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

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

    pageLogFiles() {
      let url = Util.fillUrlArgments((this.curApplication.mobilelog === true)
        ? this.commonUrl.URL_PAGE_MOBILELOG_FILES : this.commonUrl.URL_PAGE_LOG_FILES,
        this.curApplication.applicationId);
      this.appAxios("GET", url, this.filterParams).then(result => {
        if (result != null) {
          this.fileList = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

    handleChange(checked) {
      this.checkedAbnor = checked;
      this.readLogFileContent(this.checkedAbnor);
    },

    readLogFileContent(onlyException) {
      let url = Util.fillUrlArgments(this.commonUrl.URL_READ_LOG_FILE_CONTENT,
        this.curApplication.applicationId, this.filename, onlyException);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.logoContent = result.data;
        }
      })
    },

    handleDrawerClose(done) {
      done();
    }
  },

  watch: {
    curApplication: {
      handler(_newName, _oldName) {
        this.initView();
      },
      immediate: false
    }
  },
}
</script>

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

.foot-line {
  margin-top: 20px;
  text-align: right;
  border: solid 0px;
}
.drawer-header {
  height: 70px;
  padding-top: 22px;
  text-align: center;
  border: solid 0px;
}
.drawer-content {
  margin: 0 20px;
  text-align: left;
  font-size: 16px;
  overflow: scroll;
  border: solid 1px;
}
</style>
