<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.query.active" placeholder="Action" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.query.microservice_name" placeholder="Microservice Name" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.query.namespace" placeholder="Namespace" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.query.user" placeholder="User" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-table
      :data="logs"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Action" prop="Action" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.active }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Microservice Name" prop="Microservice Name" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.microservice_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Namespace" prop="Namespace" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.namespace }}</span>
        </template>
      </el-table-column>
      <el-table-column label="User" prop="User" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.user }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Date" prop="Date" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.createdAt | formatDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Detail" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="count>0" :total="count" :page.sync="page" :limit.sync="listQuery.query.count" @pagination="handleFilter" />

    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
      <json-editor ref="jsonEditor" v-model="temp"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getLog, getLogCount } from '@/api/statistics'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import JsonEditor from '@/components/JsonEditor'
import moment from 'moment'

export default {
  name: 'Statistics',
  components: { Pagination, JsonEditor },
  directives: { waves },
  filters: {
    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
      return moment(date).format(pattern)
    }
  },
  data() {
    return {
      page: 1,
      listQuery: {
        query: {
          count: 10
        }
      },
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      logs: [],
      count: 1
    }
  },

  created() {
    this.getLog()
    this.getLogCount()
  },

  methods: {
    getLog() {
      for (const prop in this.listQuery) {
        if (this.listQuery[prop] === '') {
          delete this.listQuery[prop]
        }
      }
      getLog(this.listQuery).then(res => {
        this.logs = res.data
      })
    },

    getLogCount() {
      getLogCount(this.listQuery).then(res => {
        this.count = res.data
      })
    },

    handleFilter() {
      this.listQuery.query.num = this.page - 1
      this.getLog()
      this.getLogCount()
    },

    handleInfo(row) {
      this.temp = row
      delete this.temp._id
      this.dialogStatus = '详情'
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.el-form-item {
  width: 600px;
}
</style>
