<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <el-row>
          <el-col :span="6">
            <el-row>
              <label class="label-name_1">访问者：</label>
              <div class="search-input-box_1">
                <el-input v-model="searchForm.username" size="mini" clearable type="text" class="search-input" placeholder="请输入访问者账号" @keyup.enter.native="search" />
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <label class="label-name_1">选择日期：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchForm.searchDate"
                size="mini"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="btn-box">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
              <el-button size="mini" @click="searchForm.username = '';searchForm.searchDate='';">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content-body">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 95%;margin:0 auto"
        :fit="true"
        :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名">
                <span>{{ scope.row.username }}</span>
              </el-form-item>
              <el-form-item label="IP">
                <span>{{ scope.row.host }}</span>
              </el-form-item>
              <el-form-item label="方法">
                <span>{{ scope.row.method }}</span>
              </el-form-item>
              <el-form-item label="访问时间">
                <span>{{ scope.row.time }}</span>
              </el-form-item>
              <el-form-item label="接口耗时(ms)">
                <span>{{ scope.row.timeSpend }}</span>
              </el-form-item>
              <el-form-item label="操作系统-浏览器">
                <span>{{ scope.row.device }}</span>
              </el-form-item>
              <el-form-item label="参数">
                <span>{{ scope.row.body && scope.row.body.length > 0 ? scope.row.body: scope.row.query }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="index" label="序号" min-width="30" align="center" />
        <el-table-column prop="host" label="访问者IP" min-width="60" align="left" />
        <el-table-column prop="username" :show-overflow-tooltip="true" label="访问者账号" min-width="60" align="left" />
        <el-table-column prop="uri" label="访问接口" min-width="120" align="left" />
        <el-table-column prop="status" label="返回结果状态" min-width="60" align="left" />
        <el-table-column prop="time" label="访问时间" min-width="90" align="left" :formatter="lockTimeFormat" />
      </el-table>
      <div class="page-box">
        <el-pagination
          :disabled="loading"
          :page-size="pageParam.pageSize"
          :total="pageParam.total"
          :page-sizes="[10, 20, 30, 40,50,100,200]"
          layout="slot,total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
        >
          <span>
            第 {{ pageParam.curPage }} 页 /
            共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1)/pageParam.pageSize) : 1) }} 页
          </span>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import searchHeader from '@/components/searchHeader'
import { queryAll } from '@/api/queryLog'
export default {
  components: {
    searchHeader
  },
  data() {
    return {
      searchForm: {
        username: '',
        searchDate: ''
      },
      loading: false,
      tableData: [],
      pageParam: {
        customParamMap: {},
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  mounted() {
    // this.loadPage()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 时间转换
    lockTimeFormat(row) {
      if (this.$util.isEmpty(row.time)) {
        return ''
      } else {
        return this.$util.formatDate.format(new Date(Date.parse(row.time)), 'yyyy-MM-dd hh:mm:ss')
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      queryAll(this.pageParam).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      })
    },
    search() {
      this.pageParam.customParamMap = this.searchForm
      this.pageParam.curPage = 1
      this.loadPage()
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-content{
    background: #fff;
    padding: 10pt;
    .content-header{
      background: white;
      .label-name_1 {
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 100px;
        font-size: $table-content-font-size;
      }
      .search-input-box_1{
        display: inline-block;
        width: calc(100% - 110px);
      }
      .label-name_2 {
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 110px;
        font-size: $table-content-font-size;
      }
      .search-input-box_2{
        display: inline-block;
        width: calc(100% - 120px);
      }
      .label-name_3 {
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 140px;
        font-size: $table-content-font-size;
      }
      .custom{
        width: calc(100% - 150px);
      }
      .search-input{
        cursor: pointer;
      }
      .body{
        padding: 20px 0;
        border-top:none;
        margin-bottom: 40PX;
      }
    }
    .content-body{
      background:white
    }
    .header{
      .title{
        font-weight: 600;
        font-size: 1.2rem;
      }
    }
    .page-box{margin:10PX;text-align:right}
    .mb10{
      margin-bottom: 10px;
    }
    .btn-box{
      display: inline-block;
      padding-left: 10px;
    }
  }
</style>
<style lang="css">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 110px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

