<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 分离塔·  -->
        <VTypeTank2 title="title" :iconSize="iconSize" />
        <div class="valve_progress">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="1250"
                :pipeLeftOffset="-1090" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_270" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="90" :pipeLength="140"
                :pipeLeftOffset="-20" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress2 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :rotateAngle="90" :pipeLength="140"
                :pipeLeftOffset="-20" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress3 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :rotateAngle="90" :pipeLength="140"
                :pipeLeftOffset="-20" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress4 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :rotateAngle="90" :pipeLength="140"
                :pipeLeftOffset="-20" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress5 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :rotateAngle="90" :pipeLength="140"
                :pipeLeftOffset="-20" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress6 rotate_90" />
        </div>
        <div class="pump_progress">
           
        </div>
        <div class="pipes">
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth" class="progress_steam progress_pos1"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth" class="progress_steam progress_pos2"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth" class="progress_steam progress_pos3"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth" class="progress_steam progress_pos4"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth" class="progress_steam progress_pos5"></Pipe>
        </div>
    </div>
</template>

<script setup>
import VTypeTank2 from '@/components/HnyzDcs/VTypeTank2Component.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Pump from '@/components/DCS/PumpComponent.vue';
import { computed } from 'vue'
const initValveStatusArr = [true]
const initPipeStatus = true
const props = defineProps({
    iconSize: {
        type: Number,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
    tempValue: {
        type: Number,
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
    },
    title: {//罐名
        type: String,
    },
})

//默认阀门名称数组
const defaultValveNames = new Array(6).fill('ACV_default')

// 阀门名称映射表
const valveNameArr = {
    '分离塔1': ['ACV6301A', 'ACV6011B', 'ACV6003A', 'ACV6015A', 'ACV6020A', 'ACV6502A'],
}


//阀门名称数组,根据罐名来匹配
const valveNames = computed(() => {
    return valveNameArr[props.title] || defaultValveNames
})



const width = computed(() => {
    return props.iconWidth ?? props.iconSize
})
const height = computed(() => {
    return props.iconHeight ?? props.iconSize
})

//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${width.value}px`,
    height: `${height.value}px`,
}))

//阀门icon大小（水槽100*80-阀门30）
const valveIconSize = computed(() => {
    return width.value * 0.3;
});

//管道宽度
const strokeWidth = computed(() => {
    return width.value * 0.048;
});

</script>

<style scoped lang="scss">
.tank_valves {
    position: relative;
    z-index: 10;

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: -300%;
            left: 60%;
        }

        .valve_progress2 {
            position: absolute;
            top: -20%;
            left: 40%;
        }

        .valve_progress3 {
            position: absolute;
            top: -70%;
            left: 40%;
        }

        .valve_progress4 {
            position: absolute;
            top: -120%;
            left: 40%;
        }

        .valve_progress5 {
            position: absolute;
            top: -170%;
            left: 40%;
        }

        .valve_progress6 {
            position: absolute;
            top: -240%;
            left: 40%;
        }
    }

    .pump_progress {

        .pump_progress1 {
            position: absolute;
            top: 93%;
            left: 146%;
            transform: translate(-50%, -50%);
        }
    }

    .pipes {
        .progress_pos1 {
            width: 34%;
            position: absolute;
            top: -3%;
            left: 33%;
        }

        .progress_pos2 {
            width: 34%;
            position: absolute;
            top: -53%;
            left: 33%;
        }

        .progress_pos3 {
            width: 34%;
            position: absolute;
            top: -103%;
            left: 33%;
        }


        .progress_pos4 {
            width: 34%;
            position: absolute;
            top: -153%;
            left: 33%;
        }

        .progress_pos5 {
            width: 34%;
            position: absolute;
            top: -223%;
            left: 33%;
        }
    }
}
</style>