<script setup lang="ts">
import { onMounted, toRefs, ref, PropType, Ref, onUnmounted, watch, nextTick } from 'vue';
import { IconRefresh } from '@computing/opendesign-icons';
import { computed } from 'vue';
import useStore from '@/stores';
import { IMonitorInfo, IEChartOption } from '../../home.datatype';
import { getGenericInfo, getOverView, getThermalOverView } from '../../services/home.service';
import { OChart, OChartLayout } from '@computing/opendesign2';
import { PieChart, GaugeChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { factoryMonitorInfo, getChartData } from '../../utils/monitor.util';
import { useRouter } from 'vue-router';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';
import { getStoreData } from '@/utils/composition';
import { ENERGY_PAGE_ENABLED } from '@/model/configure'; 

const kvmSupported = computed(() => {
  return getStoreData('loct', 'kvmspt');
});
const { getResolution, getWebStyle } = useHome();
// 使用 computed 响应式读取 store 数据，确保异步初始化后能触发重新渲染
const processorSupported = computed(() => getStoreData('loct', 'processorSupported'));
const memorySupported = computed(() => getStoreData('loct', 'memorySupported'));
const storageSupported = computed(() => getStoreData('loct', 'storageSupported'));
const powerWaveRecordSupported = computed(() => getStoreData('loct', 'powerWaveRecordSupported'));
const ibmaspt = computed(() => getStoreData('loct', 'ibmaspt'));
const fanSupported = computed(() => getStoreData('loct', 'fanspt'));
const resolution = getResolution;
const webStyle = getWebStyle();
interface ChartElement extends Element {
  resize: () => void;
  update: (opt: any, notMerge?: boolean) => void;
}

const props = defineProps({
  data: {
    type: Array as PropType<IMonitorInfo>,
    required: true,
    default: () => {
      return [];
    },
  },
});
const { data } = toRefs(props);
const monitorData: any = data?.value;
const store = useStore();
const refreshing = ref(false);
// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return store.state.glob.systemLocked;
});
let refreshTime = ref('');
const router = useRouter();
const chartOptions = ref(getChartData(monitorData, true, webStyle) as IEChartOption[]);
// 主题模式
const themeMode = computed(() => {
  return store.state.loct.systemTheme;
});

watch(themeMode, () => {
  chartOptions.value = getChartData(monitorData, true, webStyle) as IEChartOption[];
  drawChart();
});
watch(resolution, () => {
  chartOptions.value = getChartData(monitorData, true, webStyle) as IEChartOption[];
  drawChart();
});

let loadingData = ref(true);

const components = [PieChart, GaugeChart, GridComponent, TooltipComponent];

const diskEl: Ref<ChartElement | null> = ref(null);
const cpuEl: Ref<ChartElement | null> = ref(null);
const ramEl: Ref<ChartElement | null> = ref(null);
const tempEl: Ref<ChartElement | null> = ref(null);
const powerEl: Ref<ChartElement | null> = ref(null);
let option = ref();

// 定义 ref 与 chartOptions 索引的映射
const chartRefMap = [
  { ref: diskEl, index: 0 },
  { ref: cpuEl, index: 1 },
  { ref: ramEl, index: 2 },
  { ref: tempEl, index: 3 },
  { ref: powerEl, index: 4 },
];

// 监听图表 ref：当 v-if 条件满足、图表组件渲染后自动更新数据
chartRefMap.forEach(({ ref: chartRef, index }) => {
  watch(chartRef, (el) => {
    if (el && chartOptions.value[index]?.option) {
      nextTick(() => {
        el.update(chartOptions.value[index].option);
        loadingData.value = false;
      });
    }
  });
});

const updateChart = () => {
  loadingData.value = false;

  if (diskEl.value) {
    diskEl.value?.update(chartOptions.value[0].option);
  }
  if (cpuEl.value) {
    cpuEl.value?.update(chartOptions.value[1].option);
  }
  if (ramEl.value) {
    ramEl.value?.update(chartOptions.value[2].option);
  }
  if (tempEl.value) {
    tempEl.value?.update(chartOptions.value[3].option);
  }
  if (powerEl.value) {
    powerEl.value?.update(chartOptions.value[4].option);
  }
};

function refresh() {
  if (systemLockDownEnabled.value) {
    return;
  }
  refreshing.value = true;
  loadingData.value = true;

  getOverView()
    .then((res: any) => {
      const overviewData = res.data;
      return getThermalOverView().then((rsp: any) => {
        overviewData.Summary = { ...overviewData.Summary, ...rsp.data };

        let monitorInfo: IMonitorInfo = {};
        monitorInfo.powerConsumedWatts = 500;
        monitorInfo = factoryMonitorInfo(overviewData);
        chartOptions.value = getChartData(monitorInfo, true, webStyle);
        drawChart();
      });
    })
    .finally(() => {
      refreshing.value = false;
      loadingData.value = false;
    });
}

function drawChart() {
  updateChart();
  // 刷新时间
  getGenericInfo().then((res: any) => {
    const refreshTimeData = res.CurrentTime;
    refreshTime.value = refreshTimeData.substring(0, 19);
  });
}
function gotoPage(index: number) {
  router.push({
    path:
      chartOptions.value[index].navigatorUrl +
      (chartOptions.value[index]['routerParam'] !== undefined
        ? '/' + chartOptions.value[index]['routerParam']
        : ''),
  });
}
onMounted(() => {
  drawChart();
});
</script>

<template>
  <template v-if="!webStyle || webStyle === WebStyleType.DEFAULT">
    <div id="monitorChart" class="dashboard-overview-com-monitor-default background" :class="kvmSupported ? '' : 'width-max'">
      <div>
        <span v-t="'HOME_SYSTEM_MONITORING'" class="title"></span>
        <el-tooltip placement="top" :content="$t('COMMON_REFRESH')" trigger-keys>
          <span
            class="refresh-icon last-refresh-time"
            :class="{ 'icon-disabled': refreshing || systemLockDownEnabled }"
            @click="refresh"
          >
            <el-icon :size="16">
              <IconRefresh></IconRefresh>
            </el-icon>
          </span>
        </el-tooltip>
        <span id="refreshTime" class="refresh-text last-refresh-time">{{ refreshTime }}</span>
        <span
          id="getRefreshTimeBtn"
          v-t="'HOME_SYSMONITOR_LASTTIME'"
          class="refresh-text last-refresh-time"
        ></span>
      </div>
      <div v-if="!refreshing" class="monitor-container">
        <!-- 磁盘占用率 -->
        <div
          v-if="chartOptions[0].show && storageSupported && ibmaspt"
          :id="chartOptions[0].id"
          class="monitor-chart float-left"
          @click="gotoPage(0)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="diskEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[0]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[0].title" class="chart-title"></span>
          </div>
        </div>
        <!-- CPU占用率 -->
        <div
          v-if="chartOptions[1].show && processorSupported.CPU"
          :id="chartOptions[1].id"
          class="monitor-chart float-left"
          @click="gotoPage(1)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="cpuEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[1]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[1].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 内存占用率 -->
        <div
          v-if="chartOptions[2].show && memorySupported && ibmaspt"
          :id="chartOptions[2].id"
          class="monitor-chart float-left"
          @click="gotoPage(2)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="ramEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[2]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[2].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 进风口温度 -->
        <div
          v-if="chartOptions[3].show && fanSupported"
          :id="chartOptions[3].id"
          class="monitor-chart float-left"
          @click="gotoPage(3)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="tempEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[3]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[3].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 功率-->
        <div
          v-if="chartOptions[4].show && ENERGY_PAGE_ENABLED && powerWaveRecordSupported.System"
          :id="chartOptions[4].id"
          class="monitor-chart float-left"
          @click="gotoPage(4)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="powerEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[4]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[4].title" class="chart-title"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.STANDARD">
    <div id="monitorChart" class="dashboard-overview-com-monitor-standard">
      <div>
        <span v-t="'HOME_SYSTEM_MONITORING'" class="title"></span>
        <el-tooltip placement="top" :content="$t('COMMON_REFRESH')" trigger-keys>
          <span
            class="refresh-icon last-refresh-time"
            :class="{ 'icon-disabled': refreshing || systemLockDownEnabled }"
            @click="refresh"
          >
            <el-icon :size="16">
              <IconRefresh></IconRefresh>
            </el-icon>
          </span>
        </el-tooltip>
        <span id="refreshTime" class="refresh-text last-refresh-time">{{ refreshTime }}</span>
        <span
          id="getRefreshTimeBtn"
          v-t="'HOME_SYSMONITOR_LASTTIME'"
          class="refresh-text last-refresh-time"
        ></span>
      </div>
      <div v-if="!refreshing" class="monitor-container">
        <!-- 磁盘占用率 -->
        <div
          v-if="chartOptions[0].show && storageSupported && ibmaspt"
          :id="chartOptions[0].id"
          class="monitor-chart float-left"
          @click="gotoPage(0)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="diskEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[0]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[0].title" class="chart-title"></span>
          </div>
        </div>
        <!-- CPU占用率 -->
        <div
          v-if="chartOptions[1].show && processorSupported.CPU"
          :id="chartOptions[1].id"
          class="monitor-chart float-left"
          @click="gotoPage(1)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="cpuEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[1]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[1].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 内存占用率 -->
        <div
          v-if="chartOptions[2].show && memorySupported && ibmaspt"
          :id="chartOptions[2].id"
          class="monitor-chart float-left"
          @click="gotoPage(2)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="ramEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[2]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[2].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 进风口温度 -->
        <div
          v-if="chartOptions[3].show && fanSupported"
          :id="chartOptions[3].id"
          class="monitor-chart float-left"
          @click="gotoPage(3)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="tempEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[3]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[3].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 功率-->
        <div
          v-if="chartOptions[4].show && ENERGY_PAGE_ENABLED && powerWaveRecordSupported.System"
          :id="chartOptions[4].id"
          class="monitor-chart float-left"
          @click="gotoPage(4)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="powerEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[4]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[4].title" class="chart-title"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.IBMA">
    <div id="monitorChart" class="dashboard-overview-com-monitor-ibma">
      <div>
        <span v-t="'HOME_SYSTEM_MONITORING'" class="title"></span>
        <el-tooltip placement="top" :content="$t('COMMON_REFRESH')" trigger-keys>
          <span
            class="refresh-icon last-refresh-time"
            :class="{ 'icon-disabled': refreshing || systemLockDownEnabled }"
            @click="refresh"
          >
            <el-icon :size="16">
              <IconRefresh></IconRefresh>
            </el-icon>
          </span>
        </el-tooltip>
        <span id="refreshTime" class="refresh-text last-refresh-time">{{ refreshTime }}</span>
        <span
          id="getRefreshTimeBtn"
          v-t="'HOME_SYSMONITOR_LASTTIME'"
          class="refresh-text last-refresh-time"
        ></span>
      </div>
      <div v-if="!refreshing" class="monitor-container">
        <!-- 磁盘占用率 -->
        <div
          v-if="chartOptions[0].show && storageSupported && ibmaspt"
          :id="chartOptions[0].id"
          class="monitor-chart float-left"
          @click="gotoPage(0)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="diskEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[0].title" class="chart-title"></span>
          </div>
        </div>
        <!-- CPU占用率 -->
        <div
          v-if="chartOptions[1].show && processorSupported.CPU"
          :id="chartOptions[1].id"
          class="monitor-chart float-left"
          @click="gotoPage(1)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="cpuEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[1].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 内存占用率 -->
        <div
          v-if="chartOptions[2].show && memorySupported && ibmaspt"
          :id="chartOptions[2].id"
          class="monitor-chart float-left"
          @click="gotoPage(2)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="ramEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[2].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 进风口温度 -->
        <div
          v-if="chartOptions[3].show && fanSupported"
          :id="chartOptions[3].id"
          class="monitor-chart float-left"
          @click="gotoPage(3)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="tempEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[3].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 功率-->
        <div
          v-if="chartOptions[4].show && ENERGY_PAGE_ENABLED && powerWaveRecordSupported.System"
          :id="chartOptions[4].id"
          class="monitor-chart float-left"
          @click="gotoPage(4)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="powerEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[4].title" class="chart-title"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.SIMPLE">
    <div id="monitorChart" class="dashboard-overview-com-monitor-simple">
      <div>
        <span v-t="'HOME_SYSTEM_MONITORING'" class="title"></span>
        <el-tooltip placement="top" :content="$t('COMMON_REFRESH')" trigger-keys>
          <span
            class="refresh-icon last-refresh-time"
            :class="{ 'icon-disabled': refreshing || systemLockDownEnabled }"
            @click="refresh"
          >
            <el-icon :size="16">
              <IconRefresh></IconRefresh>
            </el-icon>
          </span>
        </el-tooltip>
        <span id="refreshTime" class="refresh-text last-refresh-time">{{ refreshTime }}</span>
        <span
          id="getRefreshTimeBtn"
          v-t="'HOME_SYSMONITOR_LASTTIME'"
          class="refresh-text last-refresh-time"
        ></span>
      </div>
      <div v-if="!refreshing" class="monitor-container">
        <!-- 磁盘占用率 -->
        <div
          v-if="chartOptions[0].show && storageSupported && ibmaspt"
          :id="chartOptions[0].id"
          class="monitor-chart float-left"
          @click="gotoPage(0)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="diskEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[0]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[0].title" class="chart-title"></span>
          </div>
        </div>
        <!-- CPU占用率 -->
        <div
          v-if="chartOptions[1].show && processorSupported.CPU"
          :id="chartOptions[1].id"
          class="monitor-chart float-left"
          @click="gotoPage(1)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="cpuEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[1]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[1].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 内存占用率 -->
        <div
          v-if="chartOptions[2].show && memorySupported && ibmaspt"
          :id="chartOptions[2].id"
          class="monitor-chart float-left"
          @click="gotoPage(2)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="ramEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[2]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[2].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 进风口温度 -->
        <div
          v-if="chartOptions[3].show && fanSupported"
          :id="chartOptions[3].id"
          class="monitor-chart float-left"
          @click="gotoPage(3)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="tempEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[3]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[3].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 功率-->
        <div
          v-if="chartOptions[4].show && ENERGY_PAGE_ENABLED && powerWaveRecordSupported.System"
          :id="chartOptions[4].id"
          class="monitor-chart float-left"
          @click="gotoPage(4)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="powerEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span
              v-if="resolution === Resolution.SMALL"
              v-t="chartOptions[4]['label']"
              class="chart-title-temp"
            ></span>
            <span v-t="chartOptions[4].title" class="chart-title"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.BEAUTIFUL">
    <div id="monitorChart" class="dashboard-overview-com-monitor-beautiful">
      <div>
        <span v-t="'HOME_SYSTEM_MONITORING'" class="title"></span>
        <el-tooltip placement="top" :content="$t('COMMON_REFRESH')" trigger-keys>
          <span
            class="refresh-icon last-refresh-time"
            :class="{ 'icon-disabled': refreshing || systemLockDownEnabled }"
            @click="refresh"
          >
            <el-icon :size="16">
              <IconRefresh></IconRefresh>
            </el-icon>
          </span>
        </el-tooltip>
        <span id="refreshTime" class="refresh-text last-refresh-time">{{ refreshTime }}</span>
        <span
          id="getRefreshTimeBtn"
          v-t="'HOME_SYSMONITOR_LASTTIME'"
          class="refresh-text last-refresh-time"
        ></span>
      </div>
      <div v-if="!refreshing" class="monitor-container">
        <!-- 磁盘占用率 -->
        <div
          v-if="chartOptions[0].show && storageSupported && ibmaspt"
          :id="chartOptions[0].id"
          class="monitor-chart float-left"
          @click="gotoPage(0)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="diskEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[0].title" class="chart-title"></span>
          </div>
        </div>
        <!-- CPU占用率 -->
        <div
          v-if="chartOptions[1].show && processorSupported.CPU"
          :id="chartOptions[1].id"
          class="monitor-chart float-left"
          @click="gotoPage(1)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="cpuEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[1].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 内存占用率 -->
        <div
          v-if="chartOptions[2].show && memorySupported && ibmaspt"
          :id="chartOptions[2].id"
          class="monitor-chart float-left"
          @click="gotoPage(2)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="ramEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[2].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 进风口温度 -->
        <div
          v-if="chartOptions[3].show && fanSupported"
          :id="chartOptions[3].id"
          class="monitor-chart float-left"
          @click="gotoPage(3)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="tempEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[3].title" class="chart-title"></span>
          </div>
        </div>
        <!-- 功率-->
        <div
          v-if="chartOptions[4].show && ENERGY_PAGE_ENABLED && powerWaveRecordSupported.System"
          :id="chartOptions[4].id"
          class="monitor-chart float-left"
          @click="gotoPage(4)"
        >
          <o-chart-layout v-loading="loadingData" class="chart-card">
            <o-chart
              ref="powerEl"
              class="demo-chart"
              :option="option"
              :theme="themeMode"
              :components="components"
            ></o-chart>
          </o-chart-layout>
          <div class="chart-title-box">
            <span v-t="chartOptions[4].title" class="chart-title"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<style lang="scss" scoped>
.chart-card {
  width: 100%;
  margin: auto;
  max-width: 230px;
  padding: 24px 8px 0px 8px !important;
}
.demo-chart {
  width: 100%;
  height: 220px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.monitor-chart {
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  :deep(canvas),
  .chart-title {
    cursor: pointer;
  }
}

.last-refresh-time {
  float: right;
  font-size: 14px;
  text-align: right;
  margin-right: 5px;
  color: var(--o-text-color-secondary);
}

.refresh-icon {
  display: flex;
  border: 1px solid var(--o-border-color-lighter);
  border-radius: 2px;
  width: fit-content;
  cursor: pointer;
  float: right;
  margin-left: 16px;
  &:hover {
    border: 1px solid var(--o-color-primary-secondary);
    .el-icon {
      color: var(--o-color-primary-secondary);
    }
  }
  .el-icon {
    color: var(--o-text-color-tertiary);
    margin: 4px;
  }
}

.refresh-text {
  margin-top: 4px;
}

.icon-disabled,
.icon-disabled:hover {
  cursor: not-allowed;
  .el-icon {
    color: var(--o-color-placeholder) !important;
  }
  border-color: var(--o-color-placeholder) !important;
}
#monitorChart {
  width: 100%;
  float: left;
  height: 100%;
}
.chart-title {
  top: -24px;
  position: relative;
  font-size: 16px;
  color: var(--o-text-color-primary);
  line-height: 24px;
  width: 100%;
}

.dashboard-overview-com-monitor-beautiful {
  .chart-title-box {
    width: 100%;
    position: relative;
    .chart-title-temp {
      left: 0px;
      position: absolute;
      font-size: 15px;
      color: #4e5865;
      text-align: center;
      line-height: 22.5px;
      width: 100%;
    }
    .chart-title {
      top: -8px !important;
      position: relative;
      font-size: 16px;
      color: var(--o-text-color-primary);
      line-height: 24px;
      width: 100%;
    }
  }
}

.chart-title-box {
  width: 100%;
  position: relative;
  .chart-title-temp {
    top: -48px;
    left: 0px;
    position: absolute;
    font-size: 15px;
    color: #4e5865;
    text-align: center;
    line-height: 22.5px;
    width: 100%;
  }
  .chart-title {
    top: -24px;
    position: relative;
    font-size: 16px;
    color: var(--o-text-color-primary);
    line-height: 24px;
    width: 100%;
  }
}

.dashboard-overview-com-monitor-default {
  width: calc(100% - 390px) !important;
  float: left !important;
  height: 100% !important;
  padding: 24px !important;
}

.width-max{
  width: 100% !important;
}
</style>
