<template>
  <div id="operation_log" class="body">
    <div style="height: 50px">
      <el-row type="flex" :gutter="20">
        <el-col :span="5">
          <el-input
              v-model="operationPhone"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入操作人员手机号"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="operationName"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入操作人员姓名"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="operationType"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入操作功能模块类型"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <el-date-picker
              v-model="createTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-col>
        <el-col :span="16">
          <el-button v-on:click="getLogList" type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="flex: 1">
      <el-container>
        <el-table
            :data="logList"
            border
            style="width: 100%;flex: 1"
            :height="tableHeight"
            ref="table"
        >
          <el-table-column prop="userName" label="操作人员姓名" width="160"></el-table-column>
          <el-table-column prop="mobile" label="操作人员手机号" width="160"></el-table-column>
          <el-table-column prop="opType" label="操作功能模块类型" width="160"></el-table-column>
          <el-table-column prop="opStatusMemo" label="操作状态" width="200"></el-table-column>
          <el-table-column prop="ip" label="ip" width="160"></el-table-column>
          <el-table-column prop="opDesc" label="操作描述" width="300"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        </el-table>
      </el-container>
    </div>
    <div style="height: 50px">
      <el-row type="flex" :gutter="20">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <div style="text-align:right">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalNumber"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { AxiosRequestData } from '../../data/axios_request'
import cache from '@/utils/cache'

export default {
  name: 'operation_log',
  data() {
    return {
      account: '',
      token: '',
      logList: [],
      pageNum: 1,
      pageSize: 10,
      totalNumber: 0,
      totalPage: 0,
      pageSizes: [10, 30, 50, 100],
      tableHeight: '',
      operationPhone: '',
      operationName: '',
      operationType: '',
      createTime: ''
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    let user = JSON.parse(cache.getLocal('user'))
    this.account = user.account
    this.token = cache.getToken()
    this.getLogList()
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 变更每页显示的数据条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getLogList()
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageNum = val
      this.getLogList()
    },
    // 获取操作日志列表信息
    async getLogList() {
      let startTime = ''
      let endTime = ''
      if (this.createTime != null) {
        if (this.createTime.length > 0) {
          startTime = this.createTime[0]
          endTime = this.createTime[1]
        }
      }
      if (this.account && this.token) {
        const url = '/auth/log/findPage'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              mobile: this.account,
              operaterMobile: this.operationPhone,
              operaterName: this.operationName,
              createBeginTime: startTime,
              createEndTime: endTime,
              opType: this.operationType,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.totalNumber = response.data.total
            this.totalPage = response.data.pages
            this.logList = response.data.records
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ent_input {
  width: 250px;
}
</style>
