<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- G或X型罐体 -->
        <div class="abreastTanks">
            <GorXTypeTankValves :title="tankNames[0]" :iconWidth="iconWidth" :iconHeight="iconHeight"
                :iconSize="iconSize" :strokeWidth="pipeWidth" :pipeStatus="initPipeStatus" />
            <GorXTypeTankValves :title="tankNames[1]" :iconWidth="iconWidth" :pipeStatus="initPipeStatus"
                :strokeWidth="pipeWidth" :iconHeight="iconHeight" :iconSize="iconSize" />
            <GorXTypeTankValves :title="tankNames[2]" :iconWidth="iconWidth" :pipeStatus="initPipeStatus"
                :strokeWidth="pipeWidth" :iconHeight="iconHeight" :iconSize="iconSize" />
        </div>

        <!-- 阀门进度 -->
        <div class="valve_progress">
            <!-- 左下 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="1000" :pipeLeftOffset="-223"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress1" />
            <!-- 左上 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="460" :pipeLeftOffset="-223"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress2" />
            <!-- 右下 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="250" :pipeLeftOffset="-52"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress3" />
            <!-- 右上 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="250" :pipeLeftOffset="-52"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress4" />
        </div>
        <!-- 泵进度 -->
        <div class="pump_progress">
            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="false"
                :pipeType="steam" pumpDirection="L" :pipeLength="120" class="pump_progress1" />
        </div>
        <!-- 拓展管道 -->
        <div class="pipe_extend">
            <!-- 下方流进泵的拓展管道  -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos1" />
            <!-- 泵向上拓展管道  -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                class="progress_steam progress_pos2 rotate_90" />
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos3 rotate_90"
                v-if="valveNames[3]" />
            <!-- 左上阀门联通管道 -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                class="progress_steam progress_pos4 rotate_270" />
        </div>
        <!-- 大箭头指向 -->
        <div class="arrows">
            <Arrow arrowDir="right" arrowText="人工降雨" :iconSize="65" :fontSize="10" class="arrow_pos1" />
            <Arrow arrowDir="right" arrowText="人工降雨" :iconSize="65" :fontSize="10" class="arrow_pos2" v-if="valveNames[3]"/>
            <Arrow arrowDir="right" arrowText="外排" :iconSize="65" :fontSize="10" class="arrow_pos3" v-if="valveNames[2]"/>
        </div>
    </div>
</template>

<script setup>
import GorXTypeTankValves from '@/components/HnyzDcs/GorXTypeTankValvesComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import PumpProgress from '@/components/DCS/PumpComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Arrow from '@/components/HnyzDcs/ArrowComponent.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,
    },
    tankType: {//罐型
        type: String,
        default: 'G'
    },
})

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

// 阀门名称映射表
const valveNameArr = {
    'G': ['QQF1004', 'QQF1018', '', ''],
    'X': ['QQF1005', 'QQF1019', 'QQF1006', 'QQF1007']

}
//泵名称映射表
const pumpNameArr = {
    'G': ['P1005'],
    'X': ['P1006']
}
//罐子名称映射表
const tankNameArr = {
    'G': ['G1001', 'G1002', 'G1003'],
    'X': ['X1001', 'X1002', 'X1003']
}


//阀门名称数组,根据罐名来匹配
const valveNames = computed(() => {
    return valveNameArr[props.tankType] || defaultValveNames
})
//泵名称
const pumpNames = computed(() => {
    return pumpNameArr[props.tankType] || defaultPumpNames
})
//罐名数组
const tankNames = computed(() => {
    return tankNameArr[props.tankType] || []
})
//罐体的宽高
const tankBodyWidth = computed(() => {
    return props.iconWidth ?? props.iconSize
})
const tankBodyHeight = computed(() => {
    return props.iconHeight ?? props.iconSize
})
//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${tankBodyWidth.value * 3}px`,
    height: `${tankBodyHeight.value}px`,
}))

//阀门icon大小（罐子150-阀门30）
const valveIconSize = computed(() => {
    return tankBodyHeight.value * 0.2;
});

//泵icon大小（罐子150-泵48）
const pumpIconSize = computed(() => {
    return tankBodyHeight.value * 0.32;
});

//管道宽度(罐子150-管道4.8)
const pipeWidth = computed(() => {
    return tankBodyHeight.value * 0.032;
});
</script>

<style scoped lang="scss">
.tank_valves {

    position: relative;
    z-index: 10;

    .abreastTanks {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
    }

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

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

        .valve_progress3 {
            position: absolute;
            top: -29%;
            left: 108%;
        }

        .valve_progress4 {
            position: absolute;
            top: -59%;
            left: 108%;
        }

    }

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

    }

    .pipe_extend {
        .progress_pos1 {
            position: absolute;
            top: 115%;
            left: 5%;
            width: 100%;
        }

        .progress_pos2 {
            position: absolute;
            top: 45%;
            left: 102.5%;
            width: 78%;
        }

        .progress_pos3 {
            position: absolute;
            top: -32%;
            left: 102.5%;
            width: 19%;
        }

        .progress_pos4 {
            position: absolute;
            top: -32%;
            left: -27%;
            width: 19%;
        }
    }

    .arrows {
        .arrow_pos1 {
            position: absolute;
            top: -47%;
            left: 48%;
            transform: translate(-50%, -50%);
        }

        .arrow_pos2 {
            position: absolute;
            top: -47%;
            left: 146%;
            transform: translate(-50%, -50%);
        }

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

        .arrow_pos4 {
            position: absolute;
            top: 26%;
            left: 90%;
            transform: translate(-50%, -50%);
        }
    }

}
</style>