<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="210" :pipeLeftOffset="-60"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress2" v-if="valveNames[1]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="324" :pipeLeftOffset="-54"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress3" v-if="valveNames[2]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="430" :pipeLeftOffset="-267"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress4" v-if="valveNames[3]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="324" :pipeLeftOffset="-162"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress5" v-if="valveNames[4]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="324" :pipeLeftOffset="-136"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress6 rotate_90" v-if="valveNames[5]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :rotateAngle="90" :pipeLength="211"
                    :pipeLeftOffset="-55" :valveStatusArr="initValveStatusArr" progressType="steam"
                    :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress7 rotate_270" v-if="valveNames[6]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" :rotateAngle="270" :pipeLength="350"
                    :pipeLeftOffset="-197" :valveStatusArr="initValveStatusArr" progressType="steam"
                    :pipeStatus="initPipeStatus" :pipeReverse="true" />
            </div>
        </div>

        <!-- 运输器及管道 -->
        <div class="transport_progress">
            <div :style="transportProgressStyle" class="transport_progress1 zIndex10" v-if="transportName">
                <Conveyor :title="transportName" iconSize="70" />
            </div>
        </div>

        <!-- 拓展管道排布 -->
        <div class="expand_pipe" v-if="showExpandPipe">
            <!-- 左上ACV2045向上延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1 rotate_90"></Pipe>
            <!-- 右上ACV2049，ACV2050向上延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1 rotate_270"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_2 rotate_270"></Pipe>
            <!-- 左下ACV2046向下延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3 rotate_270"></Pipe>
            <!-- 右上ACV2048，ACV2047向上延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>
            <!-- 右下ACV2051向下延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_90"></Pipe>
            <!-- S2003分离器-PD2003 管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_90"></Pipe>
            <!-- 下方PD2003向下延伸管道 -->
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 rotate_90"></Pipe>
        </div>
    </div>
</template>

<script setup>
import Separator from '@/components/HnyzDcs/SeparatorComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Conveyor from '@/components/HnyzDcs/ConveyorComponent.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,
    },
    //是否显示拓展管道
    showExpandPipe: {
        type: Boolean,
        default: false,
    },
})


//默认阀门名称数组
const defaultValveNames = new Array(7).fill('ACV_default')
// 阀门名称映射表
const valveNameArr = {
    'S2003A': ['ACV2045A', 'ACV2046A', 'ACV2049A', 'ACV2050A', 'ACV2051A', 'ACV2047A', 'ACV2048A'],
    'S2003B': ['ACV2045B', 'ACV2046B', 'ACV2049B', 'ACV2050B', 'ACV2051B', 'ACV2047B', 'ACV2048B'],
    'S2003C': ['ACV2045C', 'ACV2046C', 'ACV2049C', 'ACV2050C', 'ACV2051C', 'ACV2047C', 'ACV2048C'],
}
//阀门名称数组,根据罐名来匹配
const valveNames = computed(() => {
    return valveNameArr[props.title] || defaultValveNames
})

//默认pd名称
const defaultTransportName = 'PD_default'
//pd名称映射表
const transportNameArr = {
    'S2003A': 'PD2003A',
    'S2003B': 'PD2003B',
    'S2003C': 'PD2003C',
}
//pd名称
const transportName = computed(() => {
    return transportNameArr[props.title] || defaultTransportName
})

//罐体样式
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`,
    }
});

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

//泵进度样式
const transportProgressStyle = computed(() => {
    return {
        width: `${transportIconSize.value}px`,
        height: `${transportIconSize.value}px`,
    }
});

</script>

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

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

        .valve_progress2 {
            position: absolute;
            top: 48%;
            left: -64%;
        }

        .valve_progress3 {
            position: absolute;
            top: 2%;
            left: 120%;
        }

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

        .valve_progress5 {
            position: absolute;
            top: 72%;
            left: 94%;
        }

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

        .valve_progress7 {
            position: absolute;
            top: -8%;
            left: 106%;
        }
    }

    .transport_progress {
        .transport_progress1 {
            position: absolute;
            top: 119%;
            left: 54%;
            transform: translate(-50%, -50%);
        }
    }

    //拓展管道排布
    .expand_pipe {
        .progress_pos1 {
            position: absolute;
            top: -46%;
            left: -46%;
            width: 144%;
        }

        .progress_pos2_1 {
            position: absolute;
            top: 36%;
            left: 159%;
            width: 38%;
        }

        .progress_pos2_2 {
            position: absolute;
            top: -34%;
            left: 159%;
            width: 105%;
        }

        .progress_pos3 {
            position: absolute;
            top: 109.5%;
            left: -76%;
            width: 93%;
        }

        .progress_pos4 {
            position: absolute;
            top: -34%;
            left: 71.7%;
            width: 40.6%;
        }

        .progress_pos5 {
            position: absolute;
            top: -37.5%;
            left: 73.65%;
            width: 14%;
        }

        .progress_pos6 {
            position: absolute;
            top: 138%;
            left: 139%;
            width: 100%;
        }

        .progress_pos7 {
            position: absolute;
            top: 180%;
            left: 122%;
            width: 85%;
        }

        .progress_pos8 {
            position: absolute;
            top: 90%;
            left: 47%;
            width: 50%;
        }

    }

}
</style>