<script setup lang="ts">
import { computed } from 'vue';

import ProgressTextBar from '@/components/ProgressTextBar.vue';
import { t } from '@/i18n';
import { calcPercentage, getFixedNum, isNotEmptyVal } from '@/utils';
import { DevParamCoolingTower } from '@/constants/device-params';

import type { DevWorkCardProps } from '@/types';

const props = defineProps<DevWorkCardProps<DevParamCoolingTower>>();

const activePowerPercent = computed(() => {
  const currentPower = props.realTimeData?.[DevParamCoolingTower.有功功率] as number;
  const maxPower = props.deviceDetail.powerRating;
  return calcPercentage(currentPower, maxPower);
});

const activePowerTip = computed(() => {
  const activePower = props.realTimeData?.[DevParamCoolingTower.有功功率];
  const powerRating = props.deviceDetail.powerRating;

  const isActivePowerNotEmpty = isNotEmptyVal(activePower);
  const isPowerRatingNotEmpty = isNotEmptyVal(powerRating);
  const percent = isActivePowerNotEmpty && isPowerRatingNotEmpty ? activePowerPercent.value : '-';

  return `${t('deviceWorkStatus.chillerUnit.activePowerPercentage')}: ${getFixedNum(percent, 1)}%
${t('deviceWorkStatus.chillerUnit.activePower')}: ${getFixedNum(activePower, 1)}kW
${t('deviceList.ratedPower')}: ${getFixedNum(powerRating, 1)}kW`;
});

const frequencyFbPercent = computed(() => {
  const currentFrequency = props.realTimeData?.[DevParamCoolingTower.频率反馈] as number;
  const maxFrequency = 50;
  return calcPercentage(currentFrequency, maxFrequency);
});

const showFrequency = computed(() => {
  const frequencyConversion = props.deviceDetail.frequencyConversion as string | undefined;
  return frequencyConversion?.includes('变频') || frequencyConversion?.includes('inverter');
});
</script>

<template>
  <div>
    <img class="cooling-tower-img" src="@/assets/img/device-cooling-tower.png" />
    <div class="cooling-tower-top">
      <div class="cooling-tower-left">
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.localRemoteStatus') }}</div>
          <div class="device-card-value device-card-no-history">
            {{ realTimeData?.[DevParamCoolingTower.本地远程状态] ?? '-' }}
          </div>
        </div>
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
          <ATooltip overlay-class-name="hvac-tooltip">
            <template #title>{{ activePowerTip }}</template>
            <ProgressTextBar
              :text="getFixedNum(realTimeData?.[DevParamCoolingTower.有功功率], 1)"
              :percent="activePowerPercent"
              :data-param-code="DevParamCoolingTower.有功功率"
            />
          </ATooltip>
        </div>
        <div v-if="showFrequency">
          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
          <ProgressTextBar
            :text="getFixedNum(realTimeData?.[DevParamCoolingTower.频率反馈], 0)"
            :percent="frequencyFbPercent"
            :data-param-code="DevParamCoolingTower.频率反馈"
          />
        </div>
        <div v-else>
          <div class="device-card-label"></div>
          <div class="device-card-value device-card-no-history"></div>
        </div>
      </div>
    </div>
    <div class="cooling-tower-bottom">
      <div>
        <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
        <div class="device-card-value device-card-no-history">
          {{ getFixedNum(realTimeData?.[DevParamCoolingTower.运行时间]) }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cooling-tower-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cooling-tower-left {
  width: 170px;
  margin-right: 28px;

  > div + div {
    margin-top: 22px;
  }
}

.cooling-tower-img {
  position: absolute;
  right: 8px;
  bottom: 4px;
}

.cooling-tower-bottom {
  display: flex;
  justify-content: space-between;
}

.cooling-tower-top,
.cooling-tower-bottom {
  position: relative;
  z-index: 1;
}
</style>
