<template>
  <modulen>
    <template #title>资源总览</template>
    <template v-if="true">
      <div class="resource-container">
        <div
          class="box"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div class="text-2xl text-blue-300">{{ item.name }}</div>
          <div class="flex justify-between items-center my-4">
            <div class="text-6xl text-blue-200">{{ item.infos[0].val }}</div>
            <div>
              <div
                class="info"
                v-for="(info, index) in item.infos"
                :key="index"
              >
                <div>
                  <span class="icon" :style="{'background': colorList[index]}"></span>
                  <span>{{ info.name }}</span>
                </div>
                <span>{{ info.val }}</span>
              </div>
            </div>
          </div>
          <el-progress :percentage="item.infos[0].val" :color="colorList[0]" :show-text="false" status="success"></el-progress>
          <span :style="{'color': colorList[0]}">{{ item.infos[0].name }}</span>
        </div>
      </div>
    </template>
  </modulen>
</template>
<script>
import { reactive, onMounted } from 'vue'
import { getCloudphostCount, getCloudVhostCount } from '@/api/dataMonitor'
import { colorList, yzjBaseData, wljBaseData } from './dataConfig'
export default {
  setup() {
    const yzjData= reactive(yzjBaseData)
    const wljData = reactive(wljBaseData)
    const dataList = reactive([
      { ...yzjData },
      { ...wljData }
    ])
    // 获取物理机数据
    const getCloudphost = async () => {
      const { msgState, msgContent } = await getCloudphostCount()
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const data = msgContent[0]
        wljData.infos[0].val = data.enablePhostCount
        wljData.infos[1].val = data.disablePhostCount
        wljData.infos[2].val = data.totalPhostCount
      }
    }
    // 获取云主机数据
    const getCloudVhost = async () => {
      const { msgState, msgContent } = await getCloudVhostCount()
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const data = msgContent[0]
        yzjData.infos[0].val = data.runningVhostCount
        yzjData.infos[1].val = data.stopVhostCount
        yzjData.infos[2].val = data.totalVhostCount
      }
    }
    onMounted(() => {
      getCloudphost()
      getCloudVhost()
    })
    return {
      dataList,
      colorList,
    }
  }
}
</script>
<style lang="scss" scoped>
.resource-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .box {
    padding: 10px 30px;
    background: rgba(11,20,34,0.8);
    border-radius: 10px;
  }
}
.info {
  width: 120px;
  padding: 3px 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
  .icon {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
}
::v-deep .el-progress-bar__outer {
  background-color: #36425c;
}
</style>