<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <Separator :title="title" :iconWidth="iconWidth" :iconHeight="iconHeight" :iconSize="iconSize"></Separator>

        <!-- 阀门进度 -->
        <div class="valve_progress">
            <!-- 左 -->
            <div :style="valveProgressStyle" class="valve_progress1" v-if="valveNames[0]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="200" :pipeLeftOffset="-50"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <!-- 右  -->
            <div :style="valveProgressStyle" class="valve_progress4" v-if="valveNames[1]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="324" :pipeLeftOffset="-162"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <!-- 上  -->
            <div :style="valveProgressStyle" class="valve_progress6 rotate_90" v-if="valveNames[2]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :rotateAngle="90" :pipeLength="211"
                    :pipeLeftOffset="-55" :valveStatusArr="initValveStatusArr" progressType="steam"
                    :pipeStatus="initPipeStatus" />
            </div>

        </div>

        <!-- 泵进度 -->
        <div class="pump_progress">
            <!-- 左 -->
            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="iconSize * 0.4" :showPipe="true"
                :pipeType="steam" class="pump_progress1" v-if="pumpNames[0]" />
        </div>
        <!-- 管道 -->
        <div class="pipes">
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="props.iconSize * 0.04"
                class="pipe_pos1 progress_steam zIndex10" v-if="pumpNames[0]" />
        </div>

    </div>
</template>

<script setup>
import Separator from '@/components/HnyzDcs/SeparatorComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import PumpProgress from '@/components/DCS/PumpComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.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(3).fill('ACV_default')
//泵默认名称
const defaultPumpNames = new Array(1).fill('P_default')

// 阀门名称映射表
const valveNameArr = {
    'S2006': ['ACV2067', 'ACV2063', ''],
    'S2007': ['ACV2075', '', 'ACV2087'],
}
//泵名称映射表
const pumpNameArr = {
    'S2006': ['P2015'],
    'S2007': [''],
}

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

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

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

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

</script>

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

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

        .valve_progress4 {
            position: absolute;
            top: 37%;
            left: 106%;
        }

        .valve_progress6 {
            position: absolute;
            top: -8%;
            left: 50%;
        }

    }

    .pump_progress {
        .pump_progress1 {
            position: absolute;
            top: 85.1%;
            left: -97.5%;
            transform: translate(-50%, -50%);
        }
    }

    .pipes {
        .pipe_pos1 {
            position: absolute;
            top: 47.5%;
            left: -103%;
            width: 105%;
        }
    }
}
</style>