<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 换热器：温度、搅拌 -->
        <ETypeTank :title="title" :waterLevelValue="waterLevelValue" :iconWidth="iconWidth" :iconHeight="iconHeight"
            :iconSize="iconSize" :tempValue="tempValue" :fanStatus="fanStatus"></ETypeTank>
        <!-- 阀门进度 -->
        <div class="valve_progress">
            <!-- 左1 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="0" :pipeLength="258"
                :pipeLeftOffset="-108" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress1"/>
            <!-- 左2 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="0" :pipeLength="200"
                :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress2"/>
            <!-- 右1 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="498" :pipeLeftOffset="-114"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                :pipeReverse="true" class="valve_progress4"/>
            <!-- 右2 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="285" :pipeLeftOffset="-114"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress5"/>
            <!-- 右3 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="364" :pipeLeftOffset="-114"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress3"/>
        </div>
        <!-- 泵进度 -->
        <div class="pump_progress">
        </div>
        <!-- 流量计 -->
        <div class="flow_meters">
        </div>
    </div>
</template>

<script setup>
import ETypeTank from '@/components/HnyzDcs/ETypeTankComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import PumpProgress from '@/components/HnyzDcs/PumpProgressComponent.vue';
import FlowMeter from '@/components/HnyzDcs/FlowMeterComponent.vue';
import { computed } from 'vue'
const initValveStatusArr = [true]
const initPipeStatus = true
const props = defineProps({
    tempValue: {//temp
        type: Number,
        default: null
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
    },
    fanStatus: {//风扇状态
        type: Boolean,
        default: false,
    },
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
})

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

// 阀门名称映射表
const valveNameArr = {
    'E2001A': ['ACV2056A', 'ACV2057A', 'ACV2058A', 'ACV2059A', 'ACV2060A'],
    'E2001B': ['ACV2056B', 'ACV2057B', 'ACV2058B', 'ACV2059B', 'ACV2060B'],
}

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

//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${props.iconWidth ?? props.iconSize}px`,
    height: `${props.iconHeight ?? props.iconSize}px`,
}))


//阀门icon大小（罐子200-阀门50）
const valveIconSize = computed(() => {
    return (props.iconWidth ?? props.iconSize)*0.25;
});

</script>

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

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: 2%;
            left: -11%;
        }

        .valve_progress2 {
            position: absolute;
            top: 41%;
            left: -11%;
        }

        .valve_progress3 {
            position: absolute;
            top: 78%;
            left: 99%;
        }


        .valve_progress4 {
            position: absolute;
            top: 2%;
            left: 99%;
        }

        .valve_progress5 {
            position: absolute;
            top: 41%;
            left: 99%;
        }
    }
}
</style>