<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>
        <Pipe :pipeStatus="hzValue > 0" :strokeWidth="getStrokeWidth" :style="getPipeStyle" v-if="props.showPipe"
            :class="'progress_' + props.pipeType" class="rotate_270"></Pipe>
    </div>
</template>

<script setup>
import Pipe from '@/components/HnyzDcs/PipeComponent.vue'
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {
        type: String,
    },
    iconSize: {
        type: Number,
        default: 100
    },
    // 泵类型 1：水泵
    pumpType: {
        type: Number,
        default: 1
    },
    //泵朝向 L：左  R：右
    pumpDirection: {
        type: String,
        default: 'L'
    },
    pumpDataArr: {
        type: Array,
        default: [1, 10]
    },
    // 是否显示管道
    showPipe: {
        type: Boolean,
        default: false
    },
    // 管道颜色
    pipeType: {
        type: String,
        default: 'steam'
    },
    //管道长度
    pipeLength: {// 管道长度百分比
        type: Number,
        default: 85
    }
})
// 频率值 保留两位小数
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(() => {
    return `icon-beng${props.pumpType}_${props.pumpDirection}`
})

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

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

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

// 管道宽度
const getStrokeWidth = computed(() => {
    return props.iconSize * 0.1
})
// 管道样式
const getPipeStyle = computed(() => {
    const pipeLeft = props.pumpDirection === 'R' ? `122%` : `41%`
    return {
        width: `${props.pipeLength}%`,
        position: 'absolute',
        top: '0%',
        left: `${pipeLeft}`,
    }
})

</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>