<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 换热器 温度，搅拌-->
        <ETypeTank :title="title" :tempValue="tempValue" :fanStatus="fanStatus" :iconWidth="iconWidth"
            :iconHeight="iconHeight" :iconSize="iconSize" />
        <!-- 阀门进度 -->
        <div class="valve_progress">
            <!-- 左1 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="490" :pipeLeftOffset="-310"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress1" />
            <!--  左2 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="235" :pipeLeftOffset="-83"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress2" />
            <!-- 左3  -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="260" :pipeLeftOffset="-50"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                :pipeReverse="true" class="valve_progress3" />
            <!-- 右 1 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="336" :pipeLeftOffset="-136"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                :pipeReverse="true" class="valve_progress4" />
            <!-- 右 2 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="265" :pipeLeftOffset="-110"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress5" />
            <!-- 右 3 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :pipeLength="265" :pipeLeftOffset="-110"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress6" />
            <!-- 右3-泵后面的阀门 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" :pipeLength="385" :pipeLeftOffset="-205"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" :rotateAngle="90"
                class="valve_progress7 rotate_90" />
        </div>
        <!-- 泵进度 -->
        <div class="pump_progress">
            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" pumpDirection="R" :pipeLength="120" class="pump_progress1" />
            <PumpProgress :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" pumpDirection="L" :pipeLength="157" class="pump_progress2" />
            <PumpProgress :title="pumpNames[2]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" pumpDirection="L" :pipeLength="60" class="pump_progress3" />
        </div>
        <!-- 拓展管道 -->
        <div class="pipe_extend" v-if="pumpNames[2]">
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos1" />
        </div>
    </div>
</template>

<script setup>
import ETypeTank from '@/components/HnyzDcs/ETypeTankComponent.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,
    },
    tempValue: {//temp
        type: Number,
        default: null
    },
    fanStatus: {//风扇状态
        type: Boolean,
        default: undefined,
    },
})

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

// 阀门名称映射表
const valveNameArr = {
    'E6002': ['ACV6101', 'ACV6102', 'ACV6103', 'ACV6104', 'ACV6105', ''],
    'E6003': ['ACV6106', 'ACV6107', 'ACV6108', 'ACV6109', 'ACV6110', ''],
    'E6004': ['ACV6114', 'ACV6113', '', 'ACV6117', 'ACV6118', 'ACV6119', 'ACV6120'],
    'E6005': ['ACV6123', '', '', 'ACV6126', 'ACV6127', 'ACV6128', 'ACV6129'],
    'E6006': ['ACV6132', '', '', 'ACV6135', 'ACV6136', 'ACV6137', 'ACV6138'],
    'E6007': ['ACV6139', 'ACV6140', 'ACV6141', 'ACV6142', 'ACV6143', 'ACV6144'],
    'E6008': ['', '', '', '', '', '']
}
//泵名称映射表
const pumpNameArr = {
    'E6002': ['P6106', 'P6102', ''],
    'E6003': ['P6103', 'P6104', ''],
    'E6004': ['', 'P6106', 'P6107'],
    'E6005': ['', 'P6109', 'P6110'],
    'E6006': ['', 'P6112', 'P6113'],
    'E6007': ['P6114', 'P6115', 'P6116'],
    'E6008': ['', '', '']
}

//阀门名称数组,根据罐名来匹配
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-阀门37.5）
const valveIconSize = computed(() => {
    return (props.iconWidth ?? props.iconSize) * 0.18755;
});

//泵icon大小（罐子200-泵60）
const pumpIconSize = computed(() => {
    return (props.iconWidth ?? props.iconSize) * 0.3;
});

//管道宽度
const pipeWidth = computed(() => {
    return (props.iconWidth ?? props.iconSize) * 0.03;
});
</script>

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

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: 3%;
            left: 0%;
        }

        .valve_progress2 {
            position: absolute;
            top: 50.5%;
            left: 0%;
        }

        .valve_progress3 {
            position: absolute;
            top: 83%;
            left: 0%;
        }

        .valve_progress4 {
            position: absolute;
            top: 3%;
            left: 95%;
        }

        .valve_progress5 {
            position: absolute;
            top: 41%;
            left: 95%;
        }

        .valve_progress6 {
            position: absolute;
            top: 83%;
            left: 95%;
        }

        .valve_progress7 {
            position: absolute;
            top: 118%;
            left: 185%;
        }
    }

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

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

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

    .pipe_extend {
        .progress_pos1 {
            position: absolute;
            top: 70%;
            left: 130%;
            width: 53%;
        }
    }

}
</style>