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

const title = {
  id: '',
  pumpName: '',
  pumpSpeedRPM: traduction('FAN_HEAT_ROTATIONAL_SPEED'),
  pumpSpeedPercent: traduction('FAN_HEAT_RATE'),
  pumpPartNumber: traduction('OTHER_PART_NUMBER'),
};
</script>
<template>
  <div class="pump-info-card">
    <span class="pump-name">{{ data.pumpName }}</span>
    <el-tag v-if="data.presence !== ''" type="info" class="pump-state">
      {{ data.presence }}
    </el-tag>
    <el-divider />
    <div class="key-value-box">
      <div class="part">
        <div class="keys">
          <div v-for="(value, key, idx) in data" v-show="idx !== 0 && idx !== 1" :key="key">
            <div class="key">
              {{ title[key] }}
            </div>
          </div>
        </div>

        <div class="values">
          <div
            v-for="(value, key) in data"
            v-show="key !== 'id' && key !== 'pumpName' && key !== 'presence'"
            :key="key"
          >
            <div class="value">
              {{ value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.pump-info-card {
  width: calc(25% - 12px);
  display: inline-block;
  background: var(--o-bg-color-light);
  margin-top: 16px;
  padding-top: 16px;

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

  .pump-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;
        }
      }

      .values {
        margin-left: 24px;

        .value {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
