<template>
  <div>
    <div style="padding: 20px;">
      <el-table
        v-loading="loading"
        :max-height="600"
        :data="tableData">
        <el-table-column
          prop="projectName"
          label="项目名称" />
        <el-table-column
          prop="os"
          label="OS" />
        <el-table-column
          show-overflow-tooltip
          prop="memory"
          label="内存" />
        <el-table-column
          show-overflow-tooltip
          prop="disk"
          label="磁盘" />
        <el-table-column
          show-overflow-tooltip
          prop="network"
          label="网络" />
        <el-table-column
          show-overflow-tooltip
          prop="cpu"
          label="CPU" />
      </el-table>
      <el-pagination
        background
        :page-size="10"
        @current-change="handlePage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div class="dialog-btn-wrap">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getProjectHeartbeat } from '@/api/platform'

export default {
  props: {
    projectItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      total: 0,
      loading: false,
      tableData: [],
      pageSize: 10,
      pageNum: 1
    }
  },
  computed: {
    projectId () {
      return this.projectItem.id
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    async getList (goFirst) {
      if (goFirst) {
        this.pageNum = 1
      }
      const { projectId, pageSize, pageNum } = this
      if (!projectId) return
      this.tableData = []
      this.loading = true
      const res = await getProjectHeartbeat({ projectId, pageSize, pageNum })
      this.tableData = res.data.records || []
      this.total = res.data.total || 0
      this.loading = false
    },
    handlePage (pageNum) {
      this.pageNum = pageNum
      this.getList()
    }
  },
  watch: {
    async visible (val) {
      this.getList(true)
    }
  }
}
</script>

<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
