<!-- 系统操作日志 -->
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{ $t("syslog.operTime") }}:</span>
        <el-date-picker
          style="width: 250px;"
          v-model="value1"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="container_item" style="margin-right: 10px;">
        <span class="item_text">{{ $t("syslog.module") }}:</span>
        <!-- <el-input v-model="query.module" style="width: 130px;" class="filter-item input_item"  /> -->
        <el-select v-model="query.module" style="width: 130px;" class="filter-item input_item">
          <el-option
          v-for="item in moduleList"
          :key="item.value"
          :label="item.key"
          :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="container_item" style="margin-right: 10px;">
        <span class="item_text">{{ $t("syslog.moduleStr") }}:</span>
        <el-input v-model="query.description" style="width: 130px;" class="filter-item input_item"  />
      </div>
      <div class="container_item" style="margin-right: 10px;">
        <span class="item_text">{{ $t("syslog.userName") }}:</span>
        <el-input v-model="query.userName" style="width: 130px;" class="filter-item input_item"  />
      </div>
      <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-reset" @click="handleReset">
        {{ $t('table.reset') }}
      </el-button>
    </div>
    <!-- table -->
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        class="numtable"
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :cell-class-name="cellClassName"
        :max-height="tableHeight"
        :cell-style="{ textAlign: 'left' }"
        :header-cell-style="{textAlign: 'left'}"
      >
        <el-table-column prop="moduleStr" :label="$t('syslog.module')" align="left" ></el-table-column>
        <el-table-column prop="description" width="200" :label="$t('syslog.moduleStr')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="requestIp" width="" :label="$t('syslog.requestIp')" align="left"></el-table-column>
        <el-table-column width="" :label="$t('syslog.operTime')" align="left">
          <template slot-scope="{row}">{{ row.createTime.substr(0, 10) }}</template>
        </el-table-column>
        <el-table-column prop="errorMessage" width="360" :label="$t('syslog.errorMessage')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" width="" :label="$t('syslog.userName')" align="left"></el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="queryLists" />
    <!-- <DialogAction v-if="actionVisile" ref="actionRef" :visible.sync="actionVisile" @refreshData="queryLists" /> -->
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination';
import http from '@/api/http';

// import { DialogAction } from './components'
export default {
  // name: 'log',

  components: {
    Pagination,
    // DialogAction
  },
  directives: { waves },
  data() {
    return {
      actionVisile: true,
      value1: undefined,
      query: {
        createTimeBegin: undefined, //
        createTimeEnd: undefined, //
        userName: undefined,
        module: undefined,
        description: undefined,
      },
      formData: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableHeight: 0,
      tableData: [],
      orgList: [],
      moduleList: []
    }
  },
  created() {
    this.initData();
    this.queryLists();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {

    // 初始化数据：模块列表
    initData() {
      http.post('/sys/errorLog/init').then((res) => {
        this.moduleList = res.data
      })
    },

    // 系统异常日志列表（分页）
    queryLists() {
      let { createTimeBegin, createTimeEnd, userName, module, description } = this.query
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
        createTimeBegin: this.value1 ? this.value1[0]+' 00:00:00' : undefined, //
        createTimeEnd: this.value1 ? this.value1[1]+' 23:59:59' : undefined, //
        userName: userName,
        module: module,
        description: description,
        sortColumns: 'createTime desc'
      }
      http.post('/sys/errorLog/pageList', params).then((res) => {
        let { list, total } = res.data
        this.tableData = list || []
        this.total = total
      }).catch(() => {})
    },
    // 查询
    handleSearch() {
      console.log(this.value1);
      this.pageNum = 1
      this.queryLists()
    },
    // 重置
    handleReset() {
      this.pageNum = 1;
      this.value1 = undefined
      Object.keys(this.query).forEach((v) => {
        this.query[v] = undefined
      })
      this.queryLists()
    },

    // 操作
    handleAction(type, row) { // type 0新增 1修改 2详情
      this.actionVisile = true
      this.$nextTick(() => {
        this.$refs.actionRef.init(type, row, this.orgList)
      })
    },

    cellClassName() {
      return 'u-cell'
    },

    headerStyle() {
      return 'u-cell tableStyle'
    },
  }
}
</script>

<style lang="scss" scoped>
.el-table ::v-deep .u-cell >.cell {
  padding-left: 82px;
}
</style>
