<template>
  <modulen>
    <template #title>平台资源分配情况</template>
    <template v-if="true">
      <div class="chart-container">
        <div
          class="chart-box"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <RingChart :datas="item.chartData" />
          <div class="info">
            <div
              class="p-1.5 flex justify-between"
              v-for="(info, index) in item.infos"
              :key="index"
            >
              <span class="text-blue-300">{{ info.name }}</span>
              <span>{{ info.val }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </modulen>
</template>
<script>
import { reactive, onMounted } from 'vue'
import RingChart from '@/components/Chart/RingChart'
import { getCloudStorageUsage, getCloudCpuUsage, getCloudMemoryUsage } from '@/api/dataMonitor'
import { rlBaseData, cpuBaseData, ncBaseData } from './dataConfig'
export default {
  components: { RingChart },
  setup() {
    const cpuData = reactive(cpuBaseData)
    const ncData = reactive(ncBaseData)
    const rlData = reactive(rlBaseData)
    const dataList = reactive([
      {...cpuData},
      {...ncData},
      {...rlData},
    ])
    // 获取存储容量数据
    const getStorageUsage = async () => {
      const { msgState, msgContent } = await getCloudStorageUsage()
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const data = msgContent[0]
        rlData.infos[0].val = data.totalCapacity + ' T'
        rlData.infos[1].val = data.availableCapacity + ' T'
        rlData.infos[2].val = data.storageUsage + ' %'
        rlData.chartData.value = data.storageUsage
      }
    }
    // cpu
    const getCpuUsage = async () => {
      const { msgState, msgContent } = await getCloudCpuUsage()
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const data = msgContent[0]
        cpuData.infos[0].val = data.totalCpuCapacity + ' Core'
        cpuData.infos[1].val = data.availableCpuCapacity + ' Core'
        cpuData.infos[2].val = data.cpuUsage + ' %'
        cpuData.chartData.value = data.cpuUsage
      }
    }
    // 内存
    const getMemoryUsage = async () => {
      const { msgState, msgContent } = await getCloudMemoryUsage()
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const data = msgContent[0]
        ncData.infos[0].val = data.totalMemoryCapacity + ' GB'
        ncData.infos[1].val = data.availableMemoryCapacity + ' GB'
        ncData.infos[2].val = data.memoryUsage + ' %'
        ncData.chartData.value = data.memoryUsage
      }
    }
    onMounted(() => {
      getStorageUsage()
      getCpuUsage()
      getMemoryUsage()
    })
    return {
      dataList,
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.chart-box {
  display: flex;
  align-items: center;
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  }
} 
</style>