<template>
    <!-- 阀门以及对应管道组件 -->
    <div class="valve_progress_component" :style="{ height: `${iconSize}px`, width: `${iconSize}px` }" v-if="title">
        <singleValve :title="title" :rotateAngle="rotateAngle" v-bind="getValveStatus1" :iconSize="iconSize"
            class="valve" />
        <Pipe :pipeStatus="pipeStatus" :strokeWidth="iconSize * 0.16" :style="getProgressStyle"
            :class="[getProgressClass, { 'rotate_180': pipeReverse }]"></Pipe>
    </div>
</template>

<script setup>
import singleValve from '@/components/DCS/singleValveComponent';
import Pipe from '@/components/HnyzDcs/PipeComponent';
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {// 阀门名称
        type: String,
    },
    //阀门title逆旋转角度
    rotateAngle: {
        type: Number,
        default: 0
    },
    // 阀门状态数组[TRUE,FALSE,TRUE]/[TRUE]
    valveStatusArr: {
        type: Array,
        default: null
    },
    //管道长度（默认200%）
    pipeLength: {
        type: Number,
        default: 200
    },
    //管道左偏移量
    pipeLeftOffset: {
        type: Number,
        default: -44
    },
    //管道是否反转
    pipeReverse: {
        type: Boolean,
        default: false
    },
    //管道流通状态
    pipeStatus: {
        type: Boolean,
        default: false
    },
    //阀门图标大小
    iconSize: {
        type: Number,
        default: 50
    },
    //进度条类型
    progressType: {
        type: String,
        default: 'red'
    }
})


// 计算 pointer 的 class
const getProgressStyle = computed(() => {
    return {
        position: 'absolute',
        top: '59%',
        left: `${props.pipeLeftOffset}%`,
        width: `${props.pipeLength}%`,
        zIndex: 1,
    }
})

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


//计算阀门状态
const getValveStatus1 = computed(() => {
    const val = props.valveStatusArr;
    if (!val) return {};
    if (val.length === 1) {
        return { valveOpenObj: val[0] };
    } else if (val.length === 3) {
        return {
            valveOpenSignalStatus: val[0],
            valveCloseSignalStatus: val[1],
            valveOpenObj: val[2],
        };
    } else {
        return {};
    }
});


</script>


<style scoped lang="scss">
.valve_progress_component {
    .valve {
        position: absolute;
        z-index: 100;
    }
}
</style>