<template>
  <div class="app-container">
    <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="Pod名称" 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"/>

      <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>
  </div>
</template>

<script>
import { getCpuInfo } 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: 'CpuInfo',
  components: { Pagination, JsonEditor },
  directives: { waves },
  data() {
    return {
      startTime: undefined,
      endTime: undefined,
      name: undefined,
      cpuResources: null
    }
  },

  created() {
    this.name = this.$route.query.name
    this.startTime = this.$route.query.startTime
    this.endTime = this.$route.query.endTime
    this.fetchDate()
  },

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

    handleFilter() {
      this.fetchDate()
    },
    fetchDate() {
      getCpuInfo({ 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'
          })
        }
      })
    }
  }
}
</script>

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