<!-- 详情 -->

<template>
  <div style="position: relative">
    <el-form label-position="left" ref="form" label-width="100px" :size="defaultFormItemSize">
      <el-row class="title">基本信息</el-row>
      <el-form-item label="服务名称:" prop="modelManageDto.serviceName">
        {{ tableItem.serviceName }}
      </el-form-item>
      <el-form-item label="服务描述:">
        {{ tableItem.serviceDescription }}
      </el-form-item>
      <el-form-item label="选择模型:">
        {{ tableItem.modelName }}
      </el-form-item>
      <el-form-item label="API地址:">{{ tableItem.apiUrl}} </el-form-item>
      <el-row class="title">模型配置</el-row>
      <el-form-item label="资源配置:">
        <el-table :data="getResourceInfoList" style="width: 100%">
          <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>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },

  components: {},
  props: ['tableItem'],
  computed: {
    ...mapGetters(['getMainContextHeight']),
    tableHeight() {
      return this.getMainContextHeight - 95 + 'px'
    },
    getResourceInfoList() {
      return JSON.parse(this.tableItem.resourceInfo)
    }
  },

  methods: {},

  mounted() {}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';

.topBox {
  background-color: white;
  width: 100%;
  height: 95px;
  margin-bottom: 16px;

  .title {
    color: $--color-text-primary;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 20px 20px 10px 20px;
  }
}

.instructions {
  padding: 0px 20px 20px 20px;

  .describe {
    color: $--color-text-secondary;
    margin-bottom: 16px;
  }

  .itemTitle {
    color: $--color-text-primary;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .head-index {
    font-size: 24px;
    color: #e8e9eb;
    line-height: 32px;
  }

  .itemDescribe {
    width: 170px;
    color: $--color-text-secondary;
  }

  .img {
    height: 72px;
    width: 140px;
  }
}

.tableBox {
  background-color: white;
  width: 100%;
  padding: 20px;
  overflow: auto;
  .add {
    margin-bottom: 20px;
  }
}
/deep/ .el-descriptions__table {
  width: 100%;
}
</style>
