<!--  参数配置-->
<template>
  <el-table :data="list" style="width: 100%" @selection-change="change">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="gpu_id" label="gpuID" width="150">
    </el-table-column>
    <el-table-column prop="gpu_name" label="名称">
    </el-table-column>
    <el-table-column prop="total_memory" label="显存总大小(M)">
    </el-table-column>
    <el-table-column prop="used_memory" label="使用大小(M)">
    </el-table-column>
    <el-table-column prop="free_memory" label="剩余大小(M)">
    </el-table-column>
    <el-table-column prop="gpu_util" label="显卡利用率">
      <template slot-scope="scope">
        {{ scope.row.gpu_util }}%
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ModelDeployment } from '@/api/gptController.js'
export default {
  data() {
    return {
      list: [],
      configData: undefined
    }
  },
  props: ['existingTask', 'value'],
  components: {},

  computed: {},

  mounted() {
    this.getGpuInfo()
  },

  methods: {
    change(data) {
      console.log(data)
      this.$emit('input', JSON.stringify(data))
    },
    isJSON(str) {
      try {
        return JSON.parse(str)
      } catch (e) {
        // 转换出错，抛出异常
        return false
      }
    },
    getGpuInfo() {
      ModelDeployment.getGpuInfo(this, {})
        .then((res) => {
          this.list = this.isJSON(res.data).gpu_list
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>
<style >
div /deep/ .el-cascader-menu__wrap {
  height: auto;
}
</style>
