<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- j1罐体 -->
        <div class="tank_j1">
            <i class="icon iconfont-colour icon-tank5" :style="{ fontSize: iconSize + 'px' }"></i>
            <div class="tank_title" v-if="title">{{ title }}</div>
        </div>
        <!-- d1/d3阀门 -->
        <div :style="valveProgressStyle" class="valve_progress1 rotate_270" v-if="hasValve(valveNames[0])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270"
                progressType="heat_exchange_fluid" :valveStatusArr="getValveStatusArr(valveNames[0])"
                :pipeStatus="getValveAndStatus(valveNames[0])"/>
        </div>
        <!-- d2 -->
        <div :style="valveProgressStyle" class="valve_progress2" v-if="hasValve(valveNames[1])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" progressType="steam"
                :valveStatusArr="getValveStatusArr(valveNames[1])" :pipeStatus="getValveAndStatus(valveNames[1])"
                :pipeReverse="true" />
        </div>
        <!-- d4 -->
        <div :style="valveProgressStyle" class="valve_progress4" v-if="!!valveNames[2] && hasValve(valveNames[2])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" progressType="materials"
                :valveStatusArr="getValveStatusArr(valveNames[2])" :pipeStatus="getValveAndStatus(valveNames[2])"
                :pipeReverse="true" />
        </div>

    </div>
</template>
<script setup>
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import { defineProps, computed } from 'vue'
import { useValveHelper } from '@/hooks/useValveHelper'
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    valveArr: {//阀门数组
        type: Array,
    },
    iconSize: {//罐体图标大小
        type: Number,
        default: 300,
    },
})

// 将 props.valveArr 引用传入
const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(computed(() => props.valveArr));

const valveNames1 = ['D1', 'D2']
const valveNames2 = ['D3', '', 'D4']
// 根据title进行判断
const valveNames = computed(() => {
    switch (props.title) {
        case 'J1':
            return valveNames1;
        case 'J2':
            return valveNames2;
        default:
            return valveNames1;
    }
});

//阀门icon大小（罐子300-阀门50）
const valveIconSize = computed(() => {
    return props.iconSize / 6;
});

//阀门进度样式
const valveProgressStyle = computed(() => {
    return {
        width: `${valveIconSize.value}px`,
        height: `${valveIconSize.value}px`,
    }
});



</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #0b172c;

    .tank {
        margin: 200px;
        position: relative;
        z-index: 10;

        .tank_j1 {
            position: absolute;
            z-index: 10;

            .tank_title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 28px;
                color: #FFA500;
                font-weight: bold;
            }

        }


        .valve_progress1 {
            position: absolute;
            top: 112%;
            left: 48%;
        }

        .valve_progress2 {
            position: absolute;
            top: 14%;
            left: 72%;
        }

        .valve_progress4 {
            position: absolute;
            top: 63%;
            left: 72%;
        }


    }
}
</style>