<template>
  <div class="container clickCount">
    <!-- 路径面包屑 -->
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="containerIn" ref="tableDataRef">
      <search-form
        :key-onoff="keyOnoff"
        :search-form="searchForm"
        :type-value="typeValue"
        @submit="search">
      </search-form>
      <table-form 
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        :isShowOper="isShowOper"
        border 
        :stripe="true"
        :sortable="sortable"
        >
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable || sortable">
        </el-table-column>
      </table-form>

      <el-row type="flex" justify="end" class="tableBottom">
        <el-pagination
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import SearchForm from './otherComponent/SearchForm.vue'
  import TableForm from '@/components/Table.vue'
  import Api from '@/api/index.js'

  export default {
    name: 'SystemLog',
    components: {
      BreadCrumb,
      SearchForm,
      TableForm
    },
    data () {
      return {
        breadCrumbList: [],
        isLoadingTableData: false,
        colData: [],
        tableData: null,
        isShowOper: false,
        rowKey: 'domainId',
        height: '330',
        sortable: true,
        submiting: false,
        typeValue: '',
        keyOnoff: false,
        // 搜索
        searchForm: {
          typeOptions: [],
          selectLabel: '',
          selectPlaceholder: ''
        },
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        logLevel: '',
        startDate: '',
        endDate: '',
        total: null
      }
    },
    mounted () {
      this.init()
    },
    destroyed () {
      window.removeEventListener('resize', this.handleFn)
    },
    methods: { 
      init () {
        this.breadCrumbList = [
          {title: '系统监控'},
          {title: '系统日志'}
        ]
        this.colData = [
          {prop: 'logLevel', label: '日志级别', width: '140', sortable: true, align: 'center'},
          {prop: 'location', label: '位置信息', sortable: true, align: 'center'},
          {prop: 'content', label: '日志内容', sortable: true, align: 'center'},
          {prop: 'createTime', label: '创建时间', width: '160', sortable: true, align: 'center'}
        ]
        this.searchForm = { 
          typeOptions: [{ // 类型选择列表
              value: '',
              label: '所有记录'
            }, {
              value: 'ERROR',
              label: 'ERROR'
            }, {
              value: 'INFO',
              label: 'INFO'
            }, {
              value: 'WARN',
              label: 'WARN'
            }
          ], 
          selectLabel: '信息级别',
          selectPlaceholder: '选择审批状态'
        }
        this.getSystemLogByPage()
        // 钩子
        this.$nextTick(() => {
          this.handleFn()
        })

        window.addEventListener('resize', this.handleFn)
      },
      // resize的函数
      handleFn () {
        this.height = this.$refs.tableDataRef.clientHeight - 133
      },
      getSystemLogByPage () {
        Api.getSystemLogByPage(this.currentPage, this.pageSize, this.logLevel, this.startDate, this.endDate)
        .then(data => {
          let datas = data.data
          if (data.status === 0) {
            if (datas.total > 0) {
              this.tableData = datas.result
              this.total = datas.total
            } else {
              this.total = 0
              this.tableData = []
              this.$message({
                type: 'warning',
                message: '请求数据为空'
              })
            }
          } else {
            this.$message({
              type: 'warning',
              message: data.message
            })
          }
        })
        .catch(res => {
          this.isLoadingTableData = false
          this.$message({
            type: 'error',
            message: '获取数据失败！'
          })
        })
      },
      search (data) {
        this.logLevel = data[0]
        if (data[1].length !== 0) { 
          this.startDate = data[1][0]
          this.endDate = data[1][1]
        } else { 
          this.startDate = ''
          this.endDate = ''
        }
        this.currentPage = 1
        this.getSystemLogByPage()
      },
      // 分页操作
      handleSizeChange (val) {
        this.pageSize = val
        if (this.tableData !== null) { 
          this.getSystemLogByPage()
        }
      },
      handleCurrentChange (currentPage) {
        this.currentPage = currentPage
        if (this.tableData !== null) {
          this.getSystemLogByPage()
        }
      }
    }
  }
</script>

<style lang="scss">
  .clickCount { 
    width: 100%;

    .searchForm {
      padding: 10px;
    }
    .tableBottom {
      padding-top: 10px;
      height: 51px;
    }
  } 
</style>

