<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, nextTick, computed } from 'vue';
import Date from '@/utils/date';
import {
  IUnitSwitch,
  IHistoryData,
  IPowerCappingInfo,
} from '../../../../../model/System/power-interface';
import TabSwitch from '@/pages/System/Power/components/common/TabSwitch.vue';
import PowerCappingInfo from '@/pages/System/Power/components/capping/PowerCappingInfo.vue';
import PowerCappingHistory from '@/pages/System/Power/components/capping/PowerCappingHistory.vue';
import { getPower, getPowerHistory, getPowerCount } from '../../services/power.services';
import { wattstoBTUs, W_TO_BTU_COEFF } from '../../utils/common';
import { loading } from '@/utils/composition';
import { traduction } from '@/utils/language';
import { getStoreData } from '@/utils/composition';
import { ENERGY_PAGE_ENABLED } from '@/model/configure';

let activeUnit = ref('W');
const multihost = getStoreData('loct', 'multihost');
const fanSupported = computed(() => {
  return getStoreData('loct', 'fanspt');
});
const unitSwitchValue = ref(getStoreData('loct', 'locale') === 'zh' ? 1 : 2);
const hostNumber = ref('');
// 历史功率可选列表
const unitSwitch = reactive([
  {
    id: 1,
    label: 'W',
  },
  {
    id: 2,
    label: 'BTU/h',
  },
]);

const hostSwitch = reactive([]);

const defaultData = {
  highPowerThresholdWatts: null,
  powerHistoryData: {
    powerPeakWattsList: [],
    powerAverageWattsList: [],
    powerWattsList: [],
    timeList: [],
    timeListLen: null,
    start: '',
    end: '',
  },
  maxLimitInWatts: null,
  minLimitInWatts: null,
};
const historyData: IHistoryData = reactive({
  activeUnit: activeUnit,
  highPowerThresholdWatts: null,
  powerHistoryData: {
    powerPeakWattsList: [],
    powerAverageWattsList: [],
    powerWattsList: [],
    timeList: [],
    timeListLen: null,
    start: '',
    end: '',
  },
  maxLimitInWatts: null,
  minLimitInWatts: null,
});
const cpuData: IHistoryData = reactive({
  activeUnit: activeUnit,
  ...JSON.parse(JSON.stringify(defaultData)),
});
const fanData: IHistoryData = reactive({
  activeUnit: activeUnit,
  ...JSON.parse(JSON.stringify(defaultData)),
});
const memData: IHistoryData = reactive({
  activeUnit: activeUnit,
  ...JSON.parse(JSON.stringify(defaultData)),
});

const historyChart = ref();
const cpuChart = ref();
const fanChart = ref();
const memChart = ref();

const historyType = ref('System');
// 历史功率可选列表
const conditionsList = reactive([
  {
    id: 'System',
    label: traduction('POWER_SYSTEM_HISTORY'),
  },
  {
    id: 'Fan',
    label: traduction('POWER_FAN_HISTORY'),
  },
  {
    id: 'Cpu',
    label: traduction('POWER_CPU_HISTORY'),
  },
  {
    id: 'Memory',
    label: traduction('POWER_MEM_MINOR'),
  },
]);
const showWarnLimit = ref(false);

const PCIeList = reactive<any>({
  GPUsMetrics: [],
  NPUsMetrics: [],
  DPUsMetrics: [],
  SDIsMetrics: [],
});

const PCIeSelcet = reactive({
  gpu: 1,
  npu: 1,
  sdi: 1,
  dpu: 1,
});

let pcieData = reactive<any>({});

let oldHistoryData: any = reactive({});
let oldCpuData: any = reactive({});
let oldFanData: any = reactive({});
let oldMemData: any = reactive({});
let oldPowerCappingInfo: any = reactive({});
let count = 0;

let powerCappingInfo: IPowerCappingInfo = reactive({
  activeUnit: activeUnit,
  averageConsumedWatts: null,
  currentCPUPowerWatts: null,
  currentMemoryPowerWatts: null,
  maxConsumedOccurred: '',
  maxConsumedWatts: null,
  powerConsumedWatts: null,
  statisticsCollected: '',
  totalConsumedPowerkWh: null,
  powerCapMode: null,
  powerLimit: {
    limitException: '',
    limitInWatts: null,
    limitState: '',
    MSPPEnabled: null,
    maxLimitInWatts: null,
    minLimitInWatts: null,
    powerLimitExceptionSupported: false,
    powerLimitStatus: null,
    powerCappingSupported: false,
    powerLimitMode: '',
  },
});

function renderHistoryData(histryData: IHistoryData, res: any, key: string): void {
  histryData.highPowerThresholdWatts = res.data.HighPowerThresholdWatts ?? 10;
  histryData.powerHistoryData.powerPeakWattsList = [];
  histryData.powerHistoryData.powerAverageWattsList = [];
  histryData.powerHistoryData.powerWattsList = [];
  histryData.powerHistoryData.timeList = [];
  histryData.maxLimitInWatts = res.data.PowerLimit?.MaxLimitInWatts;
  histryData.minLimitInWatts = res.data.PowerLimit?.MinLimitInWatts;
  if (res.data?.[key]) {
    res.data?.[key].forEach((item: any) => {
      const time = new Date(item.Time).pattern('yyyy/MM/dd HH:mm');
      histryData.powerHistoryData.powerPeakWattsList.push([time, item.PowerPeakWatts]);
      histryData.powerHistoryData.powerAverageWattsList.push([time, item.PowerAverageWatts]);
      histryData.powerHistoryData.powerWattsList.push([time, item.PowerWatts]);
      histryData.powerHistoryData.timeList.push(time);
    });
    histryData.powerHistoryData.timeListLen = res.data.History.length;
    histryData.powerHistoryData.start = histryData.powerHistoryData.timeList[0];
    histryData.powerHistoryData.end =
    histryData.powerHistoryData.timeList[histryData.powerHistoryData.timeList.length - 1];
  } else {
    histryData.powerHistoryData.timeListLen = null;
    histryData.powerHistoryData.start = '';
    histryData.powerHistoryData.end = '';
  }
}

/* eslint-disable-next-line max-lines-per-function*/
function init(type?: any) {
  loading(true);
  getPower(hostNumber.value)
    /* eslint-disable-next-line max-lines-per-function*/
    .then(res => {
      loading(false);
      renderHistoryData(historyData, res, 'History');
      showWarnLimit.value = res.data?.PowerLimit !== null;
      const tmp = (valParams: string) => {
        let val = valParams;
        if (val !== '' && val !== null && val !== undefined) {
          val = val.substring(0, 19);
          val = val.replace('T', ' ');
          val = val.replace(/-/g, '/');
        }
        return val;
      };
      const metrics = res.data.Metrics ? res.data.Metrics[0] : false;
      if (res.data.PowerLimit?.LimitState === 'On') {
        res.data.PowerLimit.limitState = true;
      } else if (res.data.PowerLimit?.LimitState === 'Off') {
        res.data.PowerLimit.limitState = false;
      }
      getPCIeList(metrics);
      ({
        AverageConsumedWatts: powerCappingInfo.averageConsumedWatts = null,
        CurrentCPUPowerWatts: powerCappingInfo.currentCPUPowerWatts = null,
        CurrentMemoryPowerWatts: powerCappingInfo.currentMemoryPowerWatts = null,
        MaxConsumedWatts: powerCappingInfo.maxConsumedWatts = null,
        PowerConsumedWatts: powerCappingInfo.powerConsumedWatts = null,
        CurrentFanPowerWatts: powerCappingInfo.currentFanPowerWatts = null,
      } = { ...metrics });
      ({
        LimitException: powerCappingInfo.powerLimit.limitException = '',
        LimitInWatts: powerCappingInfo.powerLimit.limitInWatts = null,
        MSPPEnabled: powerCappingInfo.powerLimit.MSPPEnabled = null,
        MaxLimitInWatts: powerCappingInfo.powerLimit.maxLimitInWatts = null,
        MinLimitInWatts: powerCappingInfo.powerLimit.minLimitInWatts = null,
        PowerLimitExceptionSupported: powerCappingInfo.powerLimit
          .powerLimitExceptionSupported = false,
        PowerLimitStatus: powerCappingInfo.powerLimit.powerLimitStatus = null,
        PowerLimitMode: powerCappingInfo.powerLimit.powerLimitMode = '',
      } = { ...res.data.PowerLimit });
      powerCappingInfo.powerLimit.limitState = res.data.PowerLimit?.limitState;
      powerCappingInfo.maxConsumedOccurred = tmp(metrics.MaxConsumedOccurred);
      powerCappingInfo.statisticsCollected = tmp(metrics.StatisticsCollected);
      powerCappingInfo.totalConsumedPowerkWh = (metrics.TotalConsumedPowerkWh || metrics.TotalConsumedPowerkWh === 0) ? metrics.TotalConsumedPowerkWh.toFixed(1) : metrics.TotalConsumedPowerkWh;
      powerCappingInfo.powerLimit.powerCappingSupported =
        res.data.PowerLimit === null ? false : res.data.PowerLimit?.PowerCappingSupported;
      powerCappingInfo.powerLimit.powerLimitExceptionAllowableValues =
        res.data.PowerLimit?.LimitExceptionAllowableValues ?? [];
    })
    .then(() => {
      loading(false);
      oldHistoryData = JSON.parse(JSON.stringify(historyData));
      oldPowerCappingInfo = JSON.parse(JSON.stringify(powerCappingInfo));
      switchUnitWrapper(unitSwitchValue.value, type);
      count++;
    })
    .catch(() => {
      loading(false);
    });
}

function renderHistoryUnit(newHistoryData: IHistoryData): void {
  newHistoryData.highPowerThresholdWatts = wattstoBTUs(newHistoryData.highPowerThresholdWatts);
  newHistoryData.powerHistoryData.powerPeakWattsList.forEach(item => {
    item[1] = wattstoBTUs(item[1]);
  });
  newHistoryData.powerHistoryData.powerAverageWattsList.forEach(item => {
    item[1] = wattstoBTUs(item[1]);
  });
  newHistoryData.powerHistoryData.powerWattsList.forEach(item => {
    item[1] = wattstoBTUs(item[1]);
  });
}

// 单位切换
const switchUnit = (value: number, type?: any) => {
  if (value === 2) {
    activeUnit.value = 'BTU/h';
    powerCappingInfo.activeUnit = activeUnit.value;
    renderHistoryUnit(historyData);
    if (!type && count < 1) {
      renderHistoryUnit(cpuData);
      renderHistoryUnit(fanData);
      renderHistoryUnit(memData);
    }

    powerCappingInfo.averageConsumedWatts = wattstoBTUs(powerCappingInfo.averageConsumedWatts);
    powerCappingInfo.currentCPUPowerWatts = wattstoBTUs(powerCappingInfo.currentCPUPowerWatts);
    powerCappingInfo.currentMemoryPowerWatts = wattstoBTUs(
      powerCappingInfo.currentMemoryPowerWatts
    );
    powerCappingInfo.maxConsumedWatts = wattstoBTUs(powerCappingInfo.maxConsumedWatts);
    powerCappingInfo.powerConsumedWatts = wattstoBTUs(powerCappingInfo.powerConsumedWatts);
    powerCappingInfo.currentFanPowerWatts = wattstoBTUs(powerCappingInfo.currentFanPowerWatts);
    powerCappingInfo.currentGPUPowerWatts = wattstoBTUs(powerCappingInfo.currentGPUPowerWatts);
    powerCappingInfo.currentNPUPowerWatts = wattstoBTUs(powerCappingInfo.currentNPUPowerWatts);
    powerCappingInfo.currentDPUPowerWatts = wattstoBTUs(powerCappingInfo.currentDPUPowerWatts);
    powerCappingInfo.currentSDIPowerWatts = wattstoBTUs(powerCappingInfo.currentSDIPowerWatts);
    
    powerCappingInfo.totalConsumedPowerkWh = wattstoBTUs(
      powerCappingInfo.totalConsumedPowerkWh ? powerCappingInfo.totalConsumedPowerkWh * 1000 : null
    );
    powerCappingInfo.powerLimit.limitInWatts = wattstoBTUs(
      powerCappingInfo.powerLimit.limitInWatts
    );
    powerCappingInfo.powerLimit.minLimitInWatts = wattstoBTUs(
      powerCappingInfo.powerLimit.minLimitInWatts
    );
    powerCappingInfo.powerLimit.maxLimitInWatts = wattstoBTUs(
      powerCappingInfo.powerLimit.maxLimitInWatts
    );
  } else if (value === 1) {
    initWTypeData();
  }
};

const switchUnitWrapper = (value: number, type?: any) => {
  if (value === 2) {
    activeUnit.value = 'BTU/h';
    count = 0;
  } else if (value === 1) {
    activeUnit.value = 'W';
    count = 0;
  }
  nextTick(() => {
    switchUnit(value, type);
  });
};

const switchHost = (value: number, type?: any) => {
  historyType.value = 'System';
  init();
};

function renderWTypeData(newHistoryData: IHistoryData, oldHistoryData1: IHistoryData): void {
  newHistoryData.highPowerThresholdWatts = oldHistoryData1.highPowerThresholdWatts;
  oldHistoryData1?.powerHistoryData?.powerPeakWattsList?.forEach((item: any, index: number) => {
    newHistoryData.powerHistoryData.powerPeakWattsList[index][1] = item[1];
  });
  oldHistoryData1?.powerHistoryData?.powerAverageWattsList?.forEach((item: any, index: number) => {
    newHistoryData.powerHistoryData.powerAverageWattsList[index][1] = item[1];
  });
  oldHistoryData1?.powerHistoryData?.powerWattsList?.forEach((item: any, index: number) => {
    newHistoryData.powerHistoryData.powerWattsList[index][1] = item[1];
  });
}

function initWTypeData(): void {
  activeUnit.value = 'W';
  oldPowerCappingInfo.activeUnit = activeUnit.value;
  renderWTypeData(historyData, oldHistoryData);
  renderWTypeData(cpuData, oldCpuData);
  renderWTypeData(fanData, oldFanData);
  renderWTypeData(memData, oldMemData);
  for (let key in oldPowerCappingInfo) {
    if (key === 'powerLimit') {
      powerCappingInfo.powerLimit.limitInWatts = oldPowerCappingInfo.powerLimit.limitInWatts;
      powerCappingInfo.powerLimit.minLimitInWatts = oldPowerCappingInfo.powerLimit.minLimitInWatts;
      powerCappingInfo.powerLimit.maxLimitInWatts = oldPowerCappingInfo.powerLimit.maxLimitInWatts;
    } else if (key !== 'powerLimit') {
      powerCappingInfo[key] = oldPowerCappingInfo[key];
    }
  }
}

function getPCIeList(res: any) {
  const pcieList = ['GPUsMetrics', 'NPUsMetrics', 'DPUsMetrics', 'SDIsMetrics'];
  for (let item of pcieList) {
    PCIeList[item].splice(0);
    if (res?.[item] && res?.[item]?.length > 0) {
      for (let index = 0; index < res[item].length; index++) {
        const name = `${item.substring(0, 3)}${res[item][index].Id}` as string;
        const power = res[item][index].Power;
        PCIeList[item].push({
          id: res[item][index].Id,
          value: getTypeValue(item, power),
          label: name
        });
      }
      if (item === 'GPUsMetrics') {
        powerCappingInfo.currentGPUPowerWatts = PCIeList[item][0].value;
        PCIeSelcet.gpu = PCIeList[item][0].id;
      } else if (item === 'NPUsMetrics') {
        powerCappingInfo.currentNPUPowerWatts = PCIeList[item][0].value;
        PCIeSelcet.npu = PCIeList[item][0].id;
      } else if (item === 'DPUsMetrics') {
        powerCappingInfo.currentDPUPowerWatts = PCIeList[item][0].value;
        PCIeSelcet.dpu = PCIeList[item][0].id;
      } else {
        powerCappingInfo.currentSDIPowerWatts = PCIeList[item][0].value;
        PCIeSelcet.sdi = PCIeList[item][0].id;
      }
    }
  }
}

function getTypeValue(type: string, value: number): any {
  if (type === 'GPUsMetrics') {
    return value || value === 0 ? value : '--';
  } else if (type === 'NPUsMetrics') {
    return (value || value === 0) && value !== 65535 && value !== 32768 ? value : '--';
  } else if (type === 'DPUsMetrics') {
    return value;
  } else {
    return (value || value === 0) && value !== 16384 && value !== 32768 ? value : '--';
  }
}

function getPCIeCurrent(type: string, value: string) {
  if (activeUnit.value === 'BTU/h') {
    switchUnitWrapper(1);
    nextTick(() => {
      setValue(type, value);
      oldPowerCappingInfo = JSON.parse(JSON.stringify(powerCappingInfo));
      switchUnitWrapper(2);
    });
  } else {
    setValue(type, value);
    oldPowerCappingInfo = JSON.parse(JSON.stringify(powerCappingInfo));
  }
}

function setValue(type: string, value: string) {
  switch (type) {
    case 'gpu': {
      powerCappingInfo.currentGPUPowerWatts = value ?? null;
      break;
    }
    case 'npu': {
      powerCappingInfo.currentNPUPowerWatts = value ?? null;
      break;
    }
    case 'dpu': {
      powerCappingInfo.currentDPUPowerWatts = value ?? null;
      break;
    }
    case 'sdi': {
      powerCappingInfo.currentSDIPowerWatts = value ?? null;
      break;
    }
    default:
      break;
  }
}

function setPCIeValue(params: any) {
  let item = {} as any;
  if (params.type === 'gpu') {
    item = PCIeList.GPUsMetrics.find((i: any) => i.id === params.value);
  } else if (params.type === 'npu') {
    item = PCIeList.NPUsMetrics.find((i: any) => i.id === params.value);
  } else if (params.type === 'sdi') {
    item = PCIeList.SDIsMetrics.find((i: any) => i.id === params.value);
  } else {
    item = PCIeList.DPUsMetrics.find((i: any) => i.id === params.value);
  }
  PCIeSelcet[params.type] = item.id;
  getPCIeCurrent(params.type, item.value);
}

function getMultiPower() {
  getPowerCount().then((res)=>{
    const countNum = res.data.SystemCount;
    hostSwitch.splice(0);
    for (let num = 1; num <= countNum; num++) {
      hostSwitch.push({
        id: `System${num}`,
        label: `System${num}`,
      });
    }
    hostNumber.value = 'System1';
    init();
  });
}

onMounted(() => {
  if (!multihost) {
    init();
  } else {
    // 走multihost逻辑
    getMultiPower();
    conditionsList.splice(1,1);
  }
  if (!fanSupported.value) {
    const fullList = [...conditionsList];
    conditionsList.splice(0);
    fullList.filter(opt => opt.id !== 'Fan').forEach(opt => conditionsList.push(opt));
  }
});

function thresholdChange(val: any) {
  if (val) {
    if (activeUnit.value === 'W') {
      historyData.highPowerThresholdWatts = val;
      oldHistoryData.highPowerThresholdWatts = val;
    } else if (activeUnit.value === 'BTU/h') {
      historyData.highPowerThresholdWatts = val;
      oldHistoryData.highPowerThresholdWatts = (val * W_TO_BTU_COEFF).toFixed(0);
    }
  }
}

function clear(event: string) {
  if (event !== 'System') {
    historyTypeChange(event);
  }
  nextTick(() => {
    init('clear');
  });
}

function reset() {
  if (historyType.value !== 'System') {
    historyTypeChange(historyType.value);
  }
  nextTick(() => {
    init('reset');
  });
}

function historyTypeChange(event: string): void {
  const handler = {
    System: () => {
      historyChart.value.resize();
    },
    Cpu: () => {
      cpuChart.value.resize();
    },
    Fan: () => {
      fanChart.value.resize();
    },
    Memory: () => {
      memChart.value.resize();
    },
  };
  loading(true);
  switch (event) {
    case 'System':
      init();
      nextTick(() => {
        handler?.[event]();
      });
      break;
    case 'Cpu':
      getPowerHistory(event, hostNumber.value)
        .then(res => {
          renderHistoryData(cpuData, res, 'History');
          oldCpuData = JSON.parse(JSON.stringify(cpuData));
        })
        .finally(() => {
          if (activeUnit.value === 'BTU/h') {
            renderHistoryUnit(cpuData);
          } else {
            renderWTypeData(cpuData, oldCpuData);
          }
          nextTick(() => {
            handler?.[event]();
            loading(false);
          });
        });
      break;
    case 'Fan':
      getPowerHistory(event, hostNumber.value)
        .then(res => {
          renderHistoryData(fanData, res, 'History');
          oldFanData = JSON.parse(JSON.stringify(fanData));
        })
        .finally(() => {
          if (activeUnit.value === 'BTU/h') {
            renderHistoryUnit(fanData);
          } else {
            renderWTypeData(fanData, oldFanData);
          }
          nextTick(() => {
            handler?.[event]();
            loading(false);
          });
        });
      break;
    case 'Memory':
      getPowerHistory(event, hostNumber.value)
        .then(res => {
          renderHistoryData(memData, res, 'History');
          oldMemData = JSON.parse(JSON.stringify(memData));
        })
        .finally(() => {
          if (activeUnit.value === 'BTU/h') {
            renderHistoryUnit(memData);
          } else {
            renderWTypeData(memData, oldMemData);
          }
          nextTick(() => {
            handler?.[event]();
            loading(false);
          });
        });
      break;
    default:
      break;
  }
}
</script>

<template>
  <div class="page-top">
    <div class="header-left">
      <div class="switch-title" id="switch-title">{{ $t('POWER_UNITS') }}</div>
      <div v-if="multihost && hostSwitch.length > 0" class="switch-title" id="host-title">
        {{ $t('POWER_SYSTEM') }}
      </div>
    </div>
    <div class="header-right">
      <div class="unitSwitch">
        <el-radio-group
          id="unitSwitch"
          v-model="unitSwitchValue"
          class="switch-btn"
          @change="switchUnitWrapper($event)"
        >
          <el-radio-button
            v-for="(item, index) in unitSwitch"
            :key="item.id"
            v-addId.radio="`unitSwitch${index}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="multihost" class="hostSwitch" id="hostSwitch">
        <el-radio-group
          id="hostSwitchBtn"
          v-model="hostNumber"
          class="switch-btn"
          @change="switchHost($event)"
        >
          <el-radio-button
            class="radioRight"
            v-for="item in hostSwitch"
            :key="item.id"
            v-addId.radio="`hostSwitch${item.id}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
  </div>
  <div class="page-mid">
    <PowerCappingInfo :data="powerCappingInfo" :options="PCIeList" :value="PCIeSelcet" @reset="reset" @setPCIeValue="setPCIeValue"></PowerCappingInfo>
  </div>
  <div class="page-buttom" v-if="ENERGY_PAGE_ENABLED">
    <div v-show="historyType === 'System'">
      <PowerCappingHistory
        ref="historyChart"
        :type="'System'"
        :data="historyData"
        :active-unit="activeUnit"
        :show-warn-limit="showWarnLimit"
        :host-number="hostNumber"
        @threshold-change="thresholdChange"
        @clear="clear"
      >
        <el-radio-group id="historyType" v-model="historyType" @change="historyTypeChange($event)">
          <el-radio-button
            v-for="(item, index) in conditionsList"
            :key="item.id"
            v-addId.radio="`historyType${index}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </PowerCappingHistory>
    </div>
    <div v-show="historyType === 'Cpu'">
      <PowerCappingHistory
        ref="cpuChart"
        :type="'Cpu'"
        :data="cpuData"
        :active-unit="activeUnit"
        :host-number="hostNumber"
        @threshold-change="thresholdChange"
        @clear="clear"
      >
        <el-radio-group id="historyType" v-model="historyType" @change="historyTypeChange($event)">
          <el-radio-button
            v-for="(item, index) in conditionsList"
            :key="item.id"
            v-addId.radio="`historyType${index}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </PowerCappingHistory>
    </div>
    <div v-show="historyType === 'Fan'">
      <PowerCappingHistory
        ref="fanChart"
        :type="'Fan'"
        :data="fanData"
        :active-unit="activeUnit"
        :host-number="hostNumber"
        @threshold-change="thresholdChange"
        @clear="clear"
      >
        <el-radio-group id="historyType" v-model="historyType" @change="historyTypeChange($event)">
          <el-radio-button
            v-for="(item, index) in conditionsList"
            :key="item.id"
            v-addId.radio="`historyType${index}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </PowerCappingHistory>
    </div>
    <div v-show="historyType === 'Memory'">
      <PowerCappingHistory
        ref="memChart"
        :type="'Memory'"
        :data="memData"
        :active-unit="activeUnit"
        :host-number="hostNumber"
        @threshold-change="thresholdChange"
        @clear="clear"
      >
        <el-radio-group id="historyType" v-model="historyType" @change="historyTypeChange($event)">
          <el-radio-button
            v-for="(item, index) in conditionsList"
            :key="item.id"
            v-addId.radio="`historyType${index}`"
            :label="item.id"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </PowerCappingHistory>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#unitSwitch {
  margin-bottom: 16px;
  :deep(label) {
    margin-right: 0 !important;
  }
}

.switch-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--o-text-color-primary);
  line-height: 32px;
  vertical-align: text-top;
  margin-left: 24px;
  margin-right: 24px;
  margin-bottom: 20px;
  height: 32px;
  white-space: nowrap;
  &:last-child {
    margin-bottom: 0px;
  }
}

.hostSwitch {
  margin-bottom: 16px;
}

.page-top {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding-top: 16px;
  height: auto;
  margin-bottom: 16px;
  margin-right: 24px;
  display: flex;
  .radioRight {
    margin-right: 4px !important;
  }
}
.page-mid,
.page-buttom {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 16px;
  margin-right: 24px;

  :deep(.el-radio-button__inner) {
    font-weight: 400 !important;
  }
}
</style>
