<script setup lang="ts">
import { IFanInfo } from '../model/fan.datatype';
import { computed, PropType } from 'vue';
import { traduction } from '@/utils/language';
import { getStoreData } from '@/utils/composition';
const locale = getStoreData('loct', 'locale');
const prop = defineProps({
  data: {
    type: Object as PropType<IFanInfo>,
    required: true,
    default: () => {
      return {};
    },
  },
});

const title = {
  id: '',
  fanName: '',
  fanModel: traduction('FAN_HEAT_TYPE'),
  fanSpeed: traduction('FAN_HEAT_ROTATIONAL_SPEED'),
  expectedSpeedRatio: traduction('FAN_HEAT_RATE_TAUX'),
  fanRate: traduction('FAN_HEAT_RATE'),
  fanPartNumber: traduction('OTHER_PART_NUMBER'),
};

const cardData = computed(() => [
  {
    key: 'fanModel',
    label: traduction('FAN_HEAT_TYPE'),
    value: prop.data.fanModel
  },
  {
    key: 'fanSpeed',
    label: traduction('FAN_HEAT_ROTATIONAL_SPEED'),
    value: prop.data.fanSpeed
  },
  {
    key: 'expectedSpeedRatio',
    label: traduction('FAN_HEAT_RATE_TAUX'),
    value: prop.data.expectedSpeedRatio
  },
  {
    key: 'fanRate',
    label: traduction('FAN_HEAT_RATE'),
    value: prop.data.fanRate
  },
  {
    key: 'fanPartNumber',
    label: traduction('OTHER_PART_NUMBER'),
    value: prop.data.fanPartNumber
  },
  {
    key: 'fanDutyCycle',
    label: traduction('FAN_RATE'),
    value: prop.data.fanDutyCycle
  },
  {
    key: 'fanPosition',
    label: traduction('SERVICE_SNMP_LOCATION'),
    value: prop.data.position
  }
]);

</script>
<template>
  <div class="fan-info-card">
    <span class="fan-name">{{ data.fanName }}</span>
    <el-tag v-if="data.presence !== ''" type="info" class="fan-state">
      {{ data.presence }}
    </el-tag>
    <el-divider />
    <div class="key-value-box">
      <div class="part">
        <div class="keys">
          <div v-for="item in cardData" :key="item.key">
            <div class="key">
              {{ item.label }}
            </div>
          </div>
        </div>

        <div class="values">
          <div
            v-for="items in cardData"
            :key="items.key"
          >
            <div class="value" :class="items.key === 'expectedSpeedRatio' && locale === 'ru' ? 'high-height' : ''">
              <span>
                {{ items.value }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.fan-info-card {
  width: calc(25% - 12px);
  display: inline-block;
  background: var(--o-bg-color-light);
  margin-top: 16px;
  padding-top: 16px;

  .fan-name {
    font-size: 16px;
    line-height: 24px;
    margin-left: 24px;
    font-weight: 900;
  }

  .fan-state {
    margin-left: 8px;
    margin-bottom: 6px;
  }

  .el-divider--horizontal {
    margin-top: 16px !important;
  }
  .key-value-box {
    display: flex;
    font-size: 12px;
    line-height: 16px;

    .part {
      display: flex;
      margin-left: 24px;
      margin-bottom: 8px;

      .keys {
        .key {
          color: var(--o-text-color-secondary);
          margin-bottom: 16px;
        }
        @media screen and (max-width: 1440px) {
          .key {
            min-height: 32px;
          }
        }
      }

      .values {
        margin-left: 24px;

        .value {
          margin-bottom: 16px;
        }
        @media screen and (max-width: 1440px) {
          .value {
            min-height: 32px;
          }
          .high-height {
            min-height: 48px;
          }
        }
      }
    }
  }
}
</style>
