<template>
  <div class="app-container">
    <div style="margin-bottom:20px">
      <el-input v-model="name" placeholder="服务名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-date-picker
        v-model="startTime"
        type="date"
        dataformatas=""
        placeholder="选择日期时间"
        default-time="00:00:00"/>
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="选择日期时间"
        default-time="23:59:59"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-table
      :data="cpuResources"
      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="服务名" prop="Action" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column sortable label="Cpu Used Limit" prop="cpuLimit" align="center"/>

      <el-table-column sortable label="Cpu Used Max" prop="cpuMaxUsage" align="center">
        <template slot-scope="scope">
          <span >{{ scope.row.cpuMaxUsage.toFixed(5) }}</span>
        </template>
      </el-table-column>

      <el-table-column sortable label="Cpu最大利用率" prop="Percentage" align="center">
        <template slot-scope="scope">
          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
        </template>
      </el-table-column>

      <el-table-column :formatter="formatDate" label="日期" prop="createdAt" align="center"/>

      <el-table-column label="详情" align="center" 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>
  </div>
</template>

<script>
import { getCpu } from '@/api/resources'
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: 'CpuDetails',
  components: { Pagination, JsonEditor },
  directives: { waves },
  data() {
    return {
      startTime: moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'),
      endTime: moment(new Date()).format('YYYY-MM-DD'),
      name: undefined,
      cpuResources: null
    }
  },

  created() {
    this.fetchDate()
  },

  methods: {
    formatDate(row) {
      const pattern = 'YYYY-MM-DD'
      return moment(row.createdAt).format(pattern)
    },

    handleFilter() {
      this.fetchDate()
    },

    fetchDate() {
      if (this.startTime === null || this.endTime === null) {
        this.$notify({
          title: '错误',
          message: '请选择开始日期和结束日期',
          type: 'error'
        })
        return false
      }
      getCpu({ name: this.name, startTime: this.startTime, endTime: this.endTime }).then((res) => {
        if (res.data.length > 0) {
          this.cpuResources = res.data
        } else {
          this.$notify({
            title: '警告',
            message: '当前日期暂无数据',
            type: 'warning'
          })
        }
      })
    },

    handleInfo(row) {
      this.$router.push({
        name: 'cpuInfo',
        query: {
          name: row.name,
          startTime: moment(this.startTime).format('YYYY-MM-DD'),
          endTime: moment(this.endTime).format('YYYY-MM-DD')
        }
      })
    }
  }

}
</script>

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