<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-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @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 prop="time" label="请求耗时" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.time <= 300">
            {{ scope.row.time }}ms
          </el-tag>
          <el-tag v-else-if="scope.row.time <= 1000" type="warning">
            {{ scope.row.time }}ms
          </el-tag>
          <el-tag v-else type="danger">
            {{ scope.row.time }}ms
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期" prop="createTime" />
    </el-table>
    <pagination v-show="totalCount>0" :total="totalCount" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'LogInfo',
  components: { Pagination },
  data() {
    return {
      totalCount: 0,
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        orderBy: 'id desc',
        logType: true
      },
      value1: []
    }
  },
  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.listQuery.createTimeStart = this.value1[0]
      this.listQuery.createTimeEnd = this.value1[1]
      this.getList()
    },
    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>
