<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-column
        align="center"
        label="参数"
        :show-overflow-tooltip="true"
        prop="params"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="checkDetail(scope.row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-num.sync="listQuery.pageNum"
      :page-row.sync="listQuery.pageRow"
      @pagination="getList"
    />

    <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <span>{{ row.api }}</span>
        </el-form-item>
        <el-form-item label="接口地址" :label-width="formLabelWidth">
          <span>{{ row.uri }}</span>
        </el-form-item>
        <el-form-item label="接口方法类型" :label-width="formLabelWidth">
          <span>{{ row.requestMethod }}</span>
        </el-form-item>
        <el-form-item label="接口参数" :label-width="formLabelWidth">
          <json-viewer
            :value="JSON.parse(row.params)"
            :expand-depth="5"
            copyable
            boxed
            sort
          />
        </el-form-item>
        <el-form-item label="方法名称" :label-width="formLabelWidth">
          <span>{{ row.method }}</span>
        </el-form-item>
        <el-form-item label="接口所属模块" :label-width="formLabelWidth">
          <span>{{ row.module }}</span>
        </el-form-item>
        <el-form-item label="接口IP地址" :label-width="formLabelWidth">
          <span>{{ row.requestIp }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'LogInfo',
  components: { Pagination },
  data() {
    return {
      total: 0,
      list: [],
      row: {},
      dialogFormVisible: false,
      formLabelWidth: '150px',
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        orderBy: 'id desc',
        logType: true,
        address: '',
        api: '',
        apiOperation: '',
        businessType: '',
        contentType: '',
        requestMethod: '',
        requestParams: '',
        time: '',
        updateBy: '',
        uri: ''
      },
      value1: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.api({
        url: '/log/list',
        method: 'get',
        params: this.listQuery
      }).then((data) => {
        this.list = data.list
        this.total = data.total
      })
    },
    checkDetail(row) {
      this.dialogFormVisible = true
      this.row = row
    },
    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>
