<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 加药罐，集中水罐，静置水罐  水位 -->
        <VTypeTank :title="title" :iconWidth="iconWidth" :iconHeight="iconHeight" :iconSize="iconSize"
            :waterLevelValue="waterLevelValue"></VTypeTank>
        <div class="valve_progress">
            <!-- 上 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="205"
                :pipeLeftOffset="-47" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress1 rotate_270" />
        </div>
        <div class="pump_progress">
            <!-- 左上  -->
            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" pumpDirection="L" class="pump_progress1" />
            <!-- 右1  -->
            <PumpProgress :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="false"
                :pipeType="steam" pumpDirection="L" :pipeLength="144" class="pump_progress2" />
            <!-- 右2  -->
            <PumpProgress :title="pumpNames[2]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" pumpDirection="L" class="pump_progress3" />
        </div>
        <div class="pipe_progress">
            <!-- 右上  泵相关管道-->
            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos1 progress_steam"
                v-if="pumpNames[1]" />
            <!-- 右下  泵相关管道-->
            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos2 progress_steam"
                v-if="pumpNames[2]" />
            <!-- 左上 泵 相关管道 -->
            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos3 progress_steam"
                v-if="pumpNames[0]" />
            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos4 progress_steam"
                v-if="pumpNames[0]" />

        </div>
    </div>
</template>

<script setup>
import VTypeTank from '@/components/HnyzDcs/VTypeTankComponent.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({
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
    waterLevelValue: {//水位值
        type: Number,
    },
})
//默认阀门名称数组
const defaultValveNames = new Array(1).fill('ACV_default')
//泵默认名称
const defaultPumpNames = new Array(3).fill('P_default')

// 阀门名称映射表
const valveNameArr = {
    'V1001': [''],
    'V1002': ['QQF1001'],
    'V1003': ['QQF1020'],
    'V1004': [''],
    'V1005': [''],
    'V1006': ['QQF1017'],
    'V1007': [''],
}
//泵名称映射表
const pumpNameArr = {
    'V1001': ['P1008', '', 'P1001'],
    'V1002': ['', '', 'P1002'],
    'V1003': ['', '', ''],
    'V1004': ['', 'P1004', 'P1003'],
    'V1005': ['', '', 'P1009'],
    'V1006': ['', '', ''],
    'V1007': ['', '', 'P1007'],
}

//阀门名称数组,根据罐名来匹配
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`,
    // fontSize: `${props.iconSize}px`,
}))


//阀门icon大小（罐子120-阀门30）
const valveIconSize = computed(() => {
    return props.iconSize * 0.25;
});
//泵icon大小(120-泵48)
const pumpIconSize = computed(() => {
    return props.iconSize * 0.4;
});
//阀门管道宽度(120-泵4.8)
const initPipeWidth = computed(() => {
    return props.iconSize * 0.04;
});

</script>

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

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

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

        .pump_progress2 {
            position: absolute;
            top: 16%;
            left: 110%;
            transform: translate(-50%, -50%);
        }

        .pump_progress3 {
            position: absolute;
            top: 80%;
            left: 110%;
            transform: translate(-50%, -50%);
        }
    }

    .pipe_progress {
        .pipe_pos1 {
            position: absolute;
            top: 15.5%;
            left: 43%;
            width: 55%;
        }

        .pipe_pos2 {
            position: absolute;
            top: 79.5%;
            left: 43%;
            width: 55%;
        }

        .pipe_pos3 {
            position: absolute;
            top: 13%;
            left: -35%;
            width: 63%;
        }

        .pipe_pos4 {
            position: absolute;
            top: 49.5%;
            left: -90%;
            width: 50%;
        }
    }
}
</style>