<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <VTypeTank :title="title" :waterLevelValue="waterLevelValue" :iconWidth="iconWidth" :iconHeight="iconHeight"
            :iconSize="iconSize" :phValue="phValue" :fanStatus="fanStatus"></VTypeTank>
        <div class="valve_progress">

            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="247"
                :pipeLeftOffset="-60" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_270" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress2" />
        </div>
        <div class="pump_progress">
            <div :style="[pumpProgressStyle, { left: props.iconWidth === 300 ? '124%' : '144%' }]"
                class="pump_progress1">
                <Pump :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true" />
            </div>
            <div :style="[pumpProgressStyle, { left: props.topPumpDir === 'L' ? '9%' : '108%' }]"
                class="pump_progress2">
                <Pump :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="80" :pumpDirection="topPumpDir"
                    :showPipe="true" />
            </div>
        </div>
        <div class="pipes" v-if="pumpNames[1]">
            <Pipe :pipeStatus="initPipeStatus" class="progress_steam" :class="getPipeClass"></Pipe>
        </div>
    </div>
</template>

<script setup>
import VTypeTank from '@/components/HnyzDcs/VTypeTank2Component.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import PumpProgress from '@/components/HnyzDcs/PumpProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Pump from '@/components/DCS/PumpComponent.vue';
import { computed } from 'vue'
import { get } from '@vueuse/core';
const initValveStatusArr = [true]
const initPipeStatus = true
const props = defineProps({
    phValue: {//ph
        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,
    },
    //上方泵的位置
    topPumpDir: {
        type: String,
        default: 'L',
    },
})

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

// 阀门名称映射表
const valveNameArr = {
    'V7002': ['', 'ACV2031'],
    'V7004': ['ACV2024', 'ACV2025'],
    'V7003': ['ACV2041', 'ACV2042'],
}
//泵名称映射表
const pumpNameArr = {
    'V7002': ['P2007', ''],
    'V7004': ['P2006', 'P2024'],
    'V7003': ['P2011', 'P2010'],
}

//阀门名称数组,根据罐名来匹配
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`,
}))

//ph值
const phValue = computed({
    get() {
        return props.phValue
    },
})

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

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

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

//管道class
const getPipeClass = computed(() => {
    const baseClass = 'progress_pos1_' + props.topPumpDir;
    const rotateClass = props.topPumpDir === 'R' ? 'rotate_180' : '';
    return [baseClass, rotateClass];
});

</script>

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

    .valve_progress {


        .valve_progress1 {
            position: absolute;
            top: -18%;
            left: 48%;
        }

        .valve_progress2 {
            position: absolute;
            top: 62%;
            left: 90%;
        }
    }

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

        .pump_progress2 {
            position: absolute;
            top: -15%;
            left: 12%;
            transform: translate(-50%, -50%);
            z-index: 100;
        }
    }

    .pipes {
        .progress_pos1_L {
            width: 46%;
            position: absolute;
            top: -53%;
            left: 6%;
        }

        .progress_pos1_R {
            width: 88%;
            position: absolute;
            top: -52.5%;
            left: 50.3%;
        }
    }
}
</style>