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

import { t } from '@/i18n';
import { calcPercentage, getFixedNum, isNotEmptyVal } from '@/utils';
import { DevParamChillerUnit } from '@/constants/device-params';

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

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

const coolingCapacityPercent = computed(() => {
  const currentCooling = props.realTimeData?.[DevParamChillerUnit.制冷量] as number;
  const maxCooling = props.deviceDetail.nominalCoolingcapacity;
  return calcPercentage(currentCooling, maxCooling);
});

const coolingCapacityTip = computed(() => {
  const coolingCapacity = props.realTimeData?.[DevParamChillerUnit.制冷量];
  const nominalCoolingcapacity = props.deviceDetail.nominalCoolingcapacity;

  const isCoolingcapacityNotEmpty = isNotEmptyVal(coolingCapacity);
  const isNominalCoolingcapacityNotEmpty = isNotEmptyVal(nominalCoolingcapacity);
  const percent = isCoolingcapacityNotEmpty && isNominalCoolingcapacityNotEmpty ? coolingCapacityPercent.value : '-';

  return `${t('deviceWorkStatus.chillerUnit.coolingCapacityPercentage')}: ${getFixedNum(percent, 1)}%
${t('deviceWorkStatus.chillerUnit.coolingCapacity')}: ${getFixedNum(coolingCapacity, 1)}kW
${t('deviceWorkStatus.chillerUnit.coolingCapacityNominal')}: ${getFixedNum(nominalCoolingcapacity, 1)}kW`;
});

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

const activePowerTip = computed(() => {
  const activePower = props.realTimeData?.[DevParamChillerUnit.有功功率];
  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 showEvapCondTempPre = computed(() => {
  const { numberUnitCircuits } = props.deviceDetail;
  return numberUnitCircuits === 1;
});

const showDisSucTemp = computed(() => {
  const { numberUnitCircuits, singleLoopCompressor } = props.deviceDetail;
  return numberUnitCircuits === 1 && singleLoopCompressor === 1;
});
</script>

<template>
  <div>
    <div class="chiller-unit-top">
      <div class="chiller-unit-left">
        <div v-if="enableCopSet">
          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.coolingCapacity') }} (kW)</div>
          <ATooltip overlay-class-name="hvac-tooltip">
            <template #title>{{ coolingCapacityTip }}</template>
            <ProgressTextBar
              :text="getFixedNum(realTimeData?.[DevParamChillerUnit.制冷量], 1)"
              :percent="coolingCapacityPercent"
              :data-param-code="DevParamChillerUnit.制冷量"
            />
          </ATooltip>
        </div>
        <div v-else>
          <div class="device-card-label"></div>
          <div class="device-card-value device-card-no-history"></div>
        </div>
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.activePower') }} (kW)</div>
          <ATooltip overlay-class-name="hvac-tooltip">
            <template #title>{{ activePowerTip }}</template>
            <ProgressTextBar
              :text="getFixedNum(realTimeData?.[DevParamChillerUnit.有功功率], 1)"
              :percent="activePowerPercent"
              :data-param-code="DevParamChillerUnit.有功功率"
            />
          </ATooltip>
        </div>
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.loadRate') }}</div>
          <ProgressTextBar
            :text="getFixedNum(realTimeData?.[DevParamChillerUnit.负载率], 1) + '%'"
            :percent="realTimeData?.[DevParamChillerUnit.负载率] || 0"
            :data-param-code="DevParamChillerUnit.负载率"
          />
        </div>
      </div>
      <div class="chiller-unit-img">
        <img src="@/assets/img/device-chiller-unit.png" />
        <div
          v-if="realTimeData?.[DevParamChillerUnit.冷冻水回水温度] !== undefined"
          class="chiller-unit-img-text evap-water-temp-in"
          :data-param-code="DevParamChillerUnit.冷冻水回水温度"
        >
          <ATooltip>
            <template #title>
              {{ $t('deviceWorkStatus.chillerUnit.evapWaterTempIn') }}:
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水回水温度]) }}°C
            </template>
            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水回水温度]) }}°C
          </ATooltip>
        </div>
        <div
          v-if="realTimeData?.[DevParamChillerUnit.冷冻水出水温度] !== undefined"
          class="chiller-unit-img-text evap-water-temp-out"
          :data-param-code="DevParamChillerUnit.冷冻水出水温度"
        >
          <ATooltip>
            <template #title>
              {{ $t('deviceWorkStatus.chillerUnit.evapWaterTempOut') }}:
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度]) }}°C
            </template>
            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度]) }}°C
          </ATooltip>
        </div>
        <div
          v-if="realTimeData?.[DevParamChillerUnit.冷却水回水温度] !== undefined"
          class="chiller-unit-img-text cond-water-temp-in"
          :data-param-code="DevParamChillerUnit.冷却水回水温度"
        >
          <ATooltip>
            <template #title>
              {{ $t('deviceWorkStatus.chillerUnit.condWaterTempIn') }}:
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水回水温度]) }}°C
            </template>
            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水回水温度]) }}°C
          </ATooltip>
        </div>
        <div
          v-if="realTimeData?.[DevParamChillerUnit.冷却水出水温度] !== undefined"
          class="chiller-unit-img-text cond-water-temp-out"
          :data-param-code="DevParamChillerUnit.冷却水出水温度"
        >
          <ATooltip>
            <template #title>
              {{ $t('deviceWorkStatus.chillerUnit.condWaterTempOut') }}:
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水出水温度]) }}°C
            </template>
            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水出水温度]) }}°C
          </ATooltip>
        </div>
        <template v-if="showEvapCondTempPre">
          <div
            v-if="realTimeData?.[DevParamChillerUnit.蒸发压力] !== undefined"
            class="chiller-unit-img-text evap-pre"
            :data-param-code="DevParamChillerUnit.蒸发压力"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.evapPre') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发压力]) }}kPa
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发压力]) }}kPa
            </ATooltip>
          </div>
          <div
            v-if="realTimeData?.[DevParamChillerUnit.蒸发温度] !== undefined"
            class="chiller-unit-img-text evap-temp"
            :data-param-code="DevParamChillerUnit.蒸发温度"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.evapTemp') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发温度]) }}°C
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发温度]) }}°C
            </ATooltip>
          </div>
          <div
            v-if="realTimeData?.[DevParamChillerUnit.冷凝压力] !== undefined"
            class="chiller-unit-img-text cond-pre"
            :data-param-code="DevParamChillerUnit.冷凝压力"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.condPre') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝压力]) }}kPa
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝压力]) }}kPa
            </ATooltip>
          </div>
          <div
            v-if="realTimeData?.[DevParamChillerUnit.冷凝温度] !== undefined"
            class="chiller-unit-img-text cond-temp"
            :data-param-code="DevParamChillerUnit.冷凝温度"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.condTemp') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝温度]) }}°C
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝温度]) }}°C
            </ATooltip>
          </div>
        </template>
        <template v-if="showDisSucTemp">
          <div
            v-if="realTimeData?.[DevParamChillerUnit.排气温度] !== undefined"
            class="chiller-unit-img-text dis-temp"
            :data-param-code="DevParamChillerUnit.排气温度"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.disTemp') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.排气温度], 1) }}°C
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.排气温度], 1) }}°C
            </ATooltip>
          </div>
          <div
            v-if="realTimeData?.[DevParamChillerUnit.吸气温度] !== undefined"
            class="chiller-unit-img-text suc-temp"
            :data-param-code="DevParamChillerUnit.吸气温度"
          >
            <ATooltip>
              <template #title>
                {{ $t('deviceWorkStatus.chillerUnit.sucTemp') }}:
                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.吸气温度], 1) }}°C
              </template>
              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.吸气温度], 1) }}°C
            </ATooltip>
          </div>
        </template>
      </div>
    </div>
    <div class="chiller-unit-bottom">
      <div>
        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.evapWaterTempOutSetFb') }}</div>
        <div class="device-card-value" :data-param-code="DevParamChillerUnit.冷冻水出水温度设定值反馈">
          {{
            isNotEmptyVal(realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈])
              ? getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈], 1) + '°C'
              : '-'
          }}
        </div>
      </div>
      <div>
        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.todayPowerConsumption') }} (kWh)</div>
        <div class="device-card-value device-card-no-history">
          {{ getFixedNum(realTimeData?.[DevParamChillerUnit.今日耗电量], 1) }}
        </div>
      </div>
      <div>
        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.monthSPowerConsumption') }} (kWh)</div>
        <div class="device-card-value device-card-no-history">
          {{
            isNotEmptyVal(realTimeData?.[DevParamChillerUnit.本月耗电量])
              ? getFixedNum(realTimeData?.[DevParamChillerUnit.本月耗电量]) + $t('common.tenThousand')
              : '-'
          }}
        </div>
      </div>
    </div>
  </div>
</template>

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

.chiller-unit-left {
  width: 170px;
  margin-right: 28px;

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

.chiller-unit-img {
  position: relative;
  flex-shrink: 0;
  width: 316px;

  img {
    width: 100%;
    height: 100%;
  }
}

.chiller-unit-img-text {
  position: absolute;
  font-size: 9px;
  font-weight: 500;
  color: #333;
  cursor: pointer;

  &:hover {
    color: var(--antd-color-primary);
  }

  &.evap-water-temp-in,
  &.cond-water-temp-in {
    top: 70px;
  }

  &.evap-water-temp-out,
  &.cond-water-temp-out {
    top: 118px;
  }

  &.evap-water-temp-in,
  &.evap-water-temp-out {
    right: calc(100% - 25px);
  }

  &.cond-water-temp-in,
  &.cond-water-temp-out {
    left: calc(100% - 25px);
  }

  &.evap-pre,
  &.evap-temp,
  &.cond-pre,
  &.cond-temp {
    height: 14px;
    padding-inline: 2px;
    line-height: 12px;
    color: #fff;
  }

  &.evap-pre,
  &.evap-temp {
    left: 51px;
    background: #3a9ad9;
    border: 1px solid #a5e1ff;
    box-shadow: 0 8px 12px 0 rgb(0 0 0 / 10%);
  }

  &.cond-pre,
  &.cond-temp {
    left: 194px;
    background: #f16962;
    border: 1px solid #ffcbc8;
    box-shadow: 0 8px 12px 0 rgb(0 0 0 / 10%);
  }

  &.evap-pre,
  &.cond-pre {
    top: 85px;
  }

  &.evap-temp,
  &.cond-temp {
    top: 102px;
  }

  &.dis-temp {
    top: 52px;
    right: 65px;
  }

  &.suc-temp {
    top: 29px;
    left: 104px;
  }
}

.chiller-unit-bottom {
  display: flex;
  justify-content: space-between;
}
</style>
