<template>
    <div class="transport_progress_component" :style="{ fontSize: `${iconSize}px` }">
        <!-- 运输器 -->
        <i class="icon iconfont-hnyz-colour icon-hnyz-colourkaomianjin-1 transport_icon"
            :style="{ fontSize: `${iconSize}px` }"></i>
        <div class="transport_title">{{ title }}</div>
        <Pipe :pipeStatus="pipeStatus" :class="[getProgressClass]" :style="getProgressStyle" class="rotate_90"></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
    },
    //管道流通状态
    pipeStatus: {
        type: Boolean,
        default: false
    },
    //泵图标大小
    iconSize: {
        type: Number,
        default: 60
    },
    //进度条类型
    progressType: {
        type: String,
        default: 'steam'
    },
    //进度条宽度
    pipeLength: {
        type: Number,
        default: 130
    },
    //进度条位移
    pipeTopOffset: {
        type: Number,
        default: -40
    },
})

//泵icon大小
const iconSize = computed(() => {
    return props.iconSize;
});

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

// 计算 progress 的 style（单独使用时方便引入）
const getProgressStyle = computed(() => {
    return {
        'position': 'absolute',
        'top': `${props.pipeTopOffset}%`,
        'left': '42%',
        'width': `${props.pipeLength}%`,
    }
})

</script>


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

    .transport_title {
        color: white;
        position: absolute;
        top: 118%;
        left: 145%;
        transform: translate(-50%, -50%);
        font-size: 16px;
    }
}
</style>