<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.createBy" placeholder="用户名" style="width: 150px" size="small" clearable @keyup.enter.native="handleFilter" />
          <el-input v-model="listQuery.address" placeholder="IP来源" style="width: 150px" size="small" clearable @keyup.enter.native="handleFilter" />
          <el-input v-model="listQuery.description" placeholder="描述" style="width: 150px" size="small" clearable @keyup.enter.native="handleFilter" />
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" size="small" fit highlight-current-row>
      <el-table-column align="center" label="用户名" prop="createBy" />
      <el-table-column align="center" label="IP" prop="requestIp" :formatter="formatterIp" />
      <el-table-column align="center" label="IP来源" prop="address" />
      <el-table-column align="center" label="描述" prop="description" />
      <el-table-column align="center" label="方法名称" :show-overflow-tooltip="true" prop="method" />
      <el-table-column align="center" label="参数" :show-overflow-tooltip="true" prop="params" />
      <el-table-column align="center" label="创建日期" prop="createTime" />
      <el-table-column prop="createTime" label="异常详情" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="info(scope.$index)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalCount>0" :total="totalCount" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="0" width="85%">
      <span>
        {{ errorInfo }}
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'LogError',
  components: { Pagination },
  data() {
    return {
      totalCount: 0,
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        orderBy: 'id desc',
        logType: false
      },
      dialog: false,
      errorInfo: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.api({
        url: '/log/list',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.totalCount = data.total
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    info($index) {
      this.errorInfo = this.list[$index].exceptionDetail
      this.dialog = true
    },
    formatterIp(row, column, cellValue) {
      let ip = ''
      if (cellValue <= 0) {
        return ip
      }
      const ip3 = (cellValue << 0) >>> 24
      const ip2 = (cellValue << 8) >>> 24
      const ip1 = (cellValue << 16) >>> 24
      const ip0 = (cellValue << 24) >>> 24
      ip += ip3 + '.' + ip2 + '.' + ip1 + '.' + ip0
      return ip
    }
  }
}
</script>
