<template>
  <div class="layout-no-cols">
    <div class="tar">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="16">
          <el-date-picker id="userOperateLog-date-picker" class="layout-date-picker" v-model="userOperateLog.search.dateInterval" type="datetimerange" placeholder="选择日志时间范围"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input v-model="userOperateLog.search.userName" placeholder="用户名" @keyup.enter.native="searchLogsClickHandler" size="medium">
          </el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchLogsClickHandler" title="查询"></i></span>
        </el-col>
      </el-row>
    </div>

    <el-list-view ref="dataTable1" :data-read-url="getOperateLogsUrl" :pageSize="10">
      <template slot-scope="item">
        <div class="panel-card">
          <div class="card-header">
            <el-row>
              <el-col :span="12">
                <span class="f12"><i class="fa fa-clock-o"></i>{{item.addTime | fixDateTime}}</span>
              </el-col>
              <el-col :span="12" class="tar">
                <el-tag size="small">{{item.result}}</el-tag>
              </el-col>
            </el-row>
          </div>
        <div class="card-content">
          <el-row>
            <el-col :span="8">
              <span>用户名：<em>{{item.userName}}</em></span>
            </el-col>
            <el-col :span="8">
              <span>IP地址：<em>{{item.IP}}</em></span>
            </el-col>
            <el-col :span="8">
              <span>消息：<em>{{item.message}}</em></span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <span>原始信息：<em>{{item.logMessage}}</em></span>
            </el-col>
            <el-col :span="8">
              <span>相关URL：<em>{{item.url}}</em></span>
            </el-col>
            <el-col :span="8">
              <span>备注：<em>{{item.logMessageName}}</em></span>
            </el-col>
          </el-row>
          <el-row>
            <span>操作明细：<em>{{item.detailMessage}}</em></span>
          </el-row>
        </div>
        </div>
      </template>
    </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      userOperateLog: {
        search: {
          userName: '',
          dateInterval: []
        }
      }
    }
  },
  methods: {
    getOperateLogsUrl() {
      const userName = this.userOperateLog.search.userName
      const dateInterval = this.userOperateLog.search.dateInterval
      return [
        '/ui/logs/useroperatelog',
        {
          params: {
            userName,
            startTime: dateInterval[0] ? Date.parse(dateInterval[0]) : null,
            endTime: dateInterval[1] ? Date.parse(dateInterval[1]) : null
          }
        }
      ]
    },
    searchLogsClickHandler() {
      this.$refs.dataTable1.getData(1)
    }
  }
}
</script>

<style scoped>
  .panel-card {
    padding: 0px;
    margin: 10px auto 20px;
  }

  .panel-card .card-header{
    background-color: #fafafa;
    padding: 10px 15px;
  }

  .card-content{
    padding: 10px 15px;
  }

  .search-icon {
    top: 9px;
    right: 8px;
  }
</style>
