<template>
    <div class="pump_progress_component" :style="gePumptProgressStyle">
        <i class="icon iconfont-hnyz-colour pump_icon" :class="getPumpIconClass"
            :style="{ fontSize: `${pumpIconSize}px` }"></i>
        <div class="pump_title">{{ title }}</div>
        <Pipe :pipeStatus="pipeStatus" :strokeWidth="pumpIconSize * 0.1" :class="[getProgressClass]" :style="getProgressStyle"></Pipe>
    </div>
</template>

<script setup>
import Pipe from '@/components/HnyzDcs/PipeComponent.vue'
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {// 泵名称
        type: String,
        required: true
    },
    //管道长度（默认70%）
    pipeLength: {
        type: Number,
        default: 70
    },
    //管道偏移量
    pipeLeftOffset: {
        type: Number,
        default: 74
    },
    //是否反转(默认不反转，泵口朝右)
    isReverse: {
        type: Boolean,
        default: false
    },
    //管道流通状态
    pipeStatus: {
        type: Boolean,
        default: false
    },
    //泵图标大小
    pumpIconSize: {
        type: Number,
        default: 80
    },
    //进度条类型
    progressType: {
        type: String,
        default: 'steam'
    }
})

//泵icon大小
const pumpIconSize = computed(() => {
    return props.pumpIconSize;
});
// 计算 pump组件 的 style
const gePumptProgressStyle = computed(() => {
    return {
        fontSize: `${props.pumpIconSize}px`,
        width: `${props.pumpIconSize}px`,
        height: `${props.pumpIconSize}px`,
    }
})

// 计算 pumpIcon 的 class
const getPumpIconClass = computed(() => {
    return `icon-hnyz-colourbeng2_${props.isReverse ? 'L' : 'R'}`
})

// 计算 progress管道 的 style
const getProgressStyle = computed(() => {
    const leftOrRight = props.isReverse ? 'right' : 'left'
    return {
        position: 'absolute',
        top: '19%',
        width: `${props.pipeLength}%`,
        zIndex: 1,
        [leftOrRight]: `${props.pipeLeftOffset}%`,
    }
})

// 计算 progress 的 class
const getProgressClass = computed(() => {
    return `progress_${props.progressType}`
})


</script>


<style scoped lang="scss">
.pump_progress_component {
    .pump_icon {
        position: absolute;
        z-index: 50;
    }

    .pump_title {
        color: #C7D2E0;;
        position: absolute;
        top: 110%;
        left: 43%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
}
</style>