<!--
  @description: 系统日志信息列表
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-9-1-9:32
-->
<template>
  <div>
    <table-crud
      :search-form="searchForm"
      @on-load="loadData"
    >
      <template v-slot:header>
        日志管理
      </template>
      <template v-slot:search>
        <el-form-item label="日志等级">
          <el-select v-model="searchForm.logLevel" placeholder="请选择日志等级" style="width: 220px">
            <el-option
              v-for="(item,index) in logLevelList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.operateType" placeholder="请选择操作类型" style="width: 220px">
            <el-option
              v-for="(item,index) in logTypeList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="searchForm.createTime"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width:220px"
            @change="handleCreateTime"
          />
        </el-form-item>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <el-table-column
            header-align="center"
            prop="logContent"
            label="日志内容"
            min-width="230"
          />
          <el-table-column
            align="center"
            prop="logLevel"
            label="日志等级"
            width="80"
          >
            <template slot-scope="scope">
              {{ filterDictText(logLevelList,scope.row.logLevel) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="operateType"
            label="操作类型"
            width="80"
          />
          <el-table-column

            prop="note"
            label="操作IP"
            min-width="260"
          />
          <el-table-column

            header-align="center"
            label="操作人ID"
            prop="userId"
            min-width="260"
          />
          <el-table-column
            header-align="center"
            label="操作人"
            prop="userName"
            align="left"
            min-width="200"
          />
          <!--  label="(推荐使用IE8+,谷歌浏览器可以获得更快,更安全的页面响应速度) 技术支持" -->
          <el-table-column
            header-align="center"
            label="浏览器"
            prop="broswer"
            align="center"
            min-width="120"
          />
          <el-table-column
            align="center"
            label="操作时间"
            prop="operateTime"
            min-width="120"
          />
          <el-table-column
            header-align="center"
            label="操作"
            width="90"
            align="center"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click.stop="examine(scope.row)"
              >
                [查看]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <systemLogDetailDialog ref="systemLogDetail" />
  </div>
</template>

<script>
/* 接口*/
import { getUserLogList } from '@/api/common/user.js'
/* 公用方法 */
import { filterDictText } from '@assets/js/utils'// 常用方法
/* 组件*/
import systemLogDetailDialog from './systemLogDetail-dialog'

export default {
  name: 'SystemLogList',
  components: {
    systemLogDetailDialog
  },
  data() {
    return {
      // 操作类型
      logTypeList: [
        {
          typecode: '1',
          typename: '登录'
        }/* , {
          typecode: '2',
          typename: '登出'
        }, {
          typecode: '3',
          typename: '插入'
        }, {
          typecode: '4',
          typename: '删除'
        }, {
          typecode: '5',
          typename: '更新'
        }, {
          typecode: '6',
          typename: '上传'
        }, {
          typecode: '7',
          typename: '其它'
        } */
      ],
      // 日志等级
      logLevelList: [
        {
          typecode: '1',
          typename: 'info'
        }, {
          typecode: '2',
          typename: '警告'
        }, {
          typecode: '3',
          typename: '错误'
        }
      ],
      loading: true,
      // 搜索
      searchForm: {
        logLevel: '', // 日志等级
        logType: '', // 操作类型
        startTime: '', // 操作开始时间
        endTime: '' // 操作结束时间
      },
      tableData: []
    }
  },
  methods: {
    filterDictText,
    // 获取数据
    loadData(params, callback) {
      getUserLogList(params).then(response => {
        this.loading = false
        response.data.records.forEach(info => {
          // 时间格式化
          info.operateTime = this.$Moment(info.operateTime).format(this.momentDateTime)
          // 日志等级
          info.logLevel = filterDictText(this.logLevelList, info.logLevel)
          // 操作类型
          info.operateType = filterDictText(this.logTypeList, info.operateType)
        })
        this.tableData = Object.freeze(response.data.records)
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 查看
    examine(row) {
      this.$refs.systemLogDetail.open(row)
    },
    // 处理搜索时间格式
    handleCreateTime(val) {
      if (val) {
        this.searchForm.startTime = this.$Moment(val[0]).format(this.momentDate)// 创建开始时间
        this.searchForm.endTime = this.$Moment(val[1]).format(this.momentDate)// 创建结束时间
      }
    }
  }
}
</script>

<style scoped>

</style>
