<template>
    <!-- 泵组件 -->
    <div class="pump" :style="{ width: `${props.iconSize}px`, height: `${props.iconSize}px` }" v-if="props.title">
        <i class="icon iconfont-colour icon_pump" :class="getPumpClass"
            :style="{ fontSize: `${props.iconSize}px` }"></i>
        <div class="pump_title zIndex10" :style="getPumpTitleStyle">
            {{ props.title }}
        </div>
        <div class="pump_status zIndex10" :style="getPumpStatusStyle"> {{ getStartStatus }} </div>
        <div class="pump_hz zIndex10" :style="getPumpHzStyle"> {{ hzValue }} Hz</div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {
        type: String,
    },
    iconSize: {
        type: Number,
        default: 100
    },
    //是否反转
    isReverse: {
        type: Boolean,
        default: false
    },
    pumpDataArr: {
        type: Array,
        default: [1, 10]
    },
})
// 频率值 保留两位小数
const hzValue = computed(() => {
    const raw = Number(props.pumpDataArr[1]) * 0.01;
    return Math.floor(raw * 100) / 100;
});

//状态启动字
const getStartStatus = computed(() => {
    switch (props.pumpDataArr[0]) {
        case 1:
            return '正转'
        case 2:
            return '反转'
        case 3:
            return '停机'
        case 4:
            return '故障'
        default:
            return '未知'
    }
})

// 泵图标类名
const getPumpClass = computed(() => {
    const pumpDirection = props.isReverse ? 'R' : 'L'
    return `icon-beng1_${pumpDirection}`
})

// 泵标题样式
const getPumpTitleStyle = computed(() => {
    return props.isReverse ? {
        fontSize: `${props.iconSize * 0.2}px`,
        left: 'auto',
        right: '0%'
    } : { fontSize: `${props.iconSize * 0.2}px` }
})

// 泵状态样式
const getPumpStatusStyle = computed(() => {
    return props.isReverse ? {
        fontSize: `${props.iconSize / 6}px`,
        left: 'auto',
        right: '-40%',
        top: '40%'
    } : { fontSize: `${props.iconSize / 6}px` }
})

// 频率样式
const getPumpHzStyle = computed(() => {
    return props.isReverse ? {
        fontSize: `${props.iconSize / 5}px`,
        left: '25%',
    } : { fontSize: `${props.iconSize / 5}px` }
})

</script>


<style scoped lang="scss">
.pump {
    position: relative;
    z-index: 15;

    .icon_pump {
        position: absolute;
        z-index: 10;
    }

    .pump_title {
        position: absolute;
        width: max-content;
        top: -7%;
        left: 56%;
        color: aliceblue;
    }

    .pump_status {
        position: absolute;
        text-align: center;
        top: 40%;
        left: 26%;
        color: #d7e908;
    }

    .pump_hz {
        position: absolute;
        width: max-content;
        text-align: center;
        top: 42%;
        left: 82%;
        font-weight: bold;
        color: #d7e908;
    }

}
</style>