<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="205"
                :pipeLeftOffset="-47" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress1 rotate_270" />
            <!-- 左 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress2" />
            <!-- 右 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="185" :pipeLeftOffset="-45"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress3" />
            <!-- 下 -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="200" :pipeLeftOffset="-40"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                :rotateAngle="270" :pipeReverse="true" class="valve_progress4 rotate_270" />
        </div>
        <div class="pump_progress">
            <!-- 右  -->
            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="iconSize * 0.4" :showPipe="true"
                :pipeType="steam" class="pump_progress1" />
        </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 { computed } from 'vue'
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: undefined,// undefined表示未传风扇状态,如果不写它会默认false
    },
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
})
//默认阀门名称数组
const defaultValveNames = new Array(4).fill('ACV_default')
//泵默认名称
const defaultPumpNames = new Array(1).fill('P_default')

// 阀门名称映射表
const valveNameArr = {
    'V5001': ['', '', 'ACV5001', ''],
    'V2002': ['ACV2011', 'ACV2009', 'ACV2012', ''],
    'V2001': ['ACV2023', '', '', 'ACV2010'],
    'V2003': ['ACV2020', '', 'ACV2022', ''],
    'V2004': ['', 'ACV2054', 'ACV2038', ''],
    'V2007': ['ACV2028', 'ACV2021', '', 'ACV2036'],
    'V2009': ['', '', 'ACV2035', ''],
    'V2014': ['', '', 'ACV2055', ''],
    'V2006': ['', '', 'ACV2061', ''],
    'V2008': ['ACV2072', '', 'ACV2070', ''],
    'V2010': ['ACV2073', 'ACV2071', 'ACV2074', ''],
    'V2011': ['ACV2078', '', '', ''],
    'V2012': ['', '', 'ACV2082', ''],
    'V2013': ['ACV2079', '', 'ACV2077', ''],
    'S2008': ['ACV2076', '', '', ''],
    'V2017': ['', '', 'ACV2086', ''],
    'V2015': ['', '', 'ACV2084', ''],
    'V6109': ['ACV6153', '', 'ACV6154', ''],
}
//泵名称映射表
const pumpNameArr = {
    'V5001': ['P5001'],
    'V2002': ['P2003'],
    'V2001': [''],
    'V2003': ['P2004'],
    'V2004': ['P2009'],
    'V2007': [''],
    'V2009': ['P2008'],
    'V2014': ['P2014'],
    'V2006': ['P2022'],
    'V2008': ['P2017'],
    'V2010': ['P2018'],
    'V2011': [''],
    'V2012': ['P2019'],
    'V2013': ['P2020'],
    'S2008': [''],
    'V2017': ['P2023'],
    'V2015': ['P2021'],
    'V6109': ['P6121'],
}

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

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

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

</script>

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

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

        .valve_progress2 {
            position: absolute;
            top: 10%;
            left: -6%;
        }

        .valve_progress3 {
            position: absolute;
            top: 62%;
            left: 82%;
        }

        .valve_progress4 {
            position: absolute;
            top: 115%;
            left: 45%;
        }
    }

    .pump_progress {
        .pump_progress1 {
            position: absolute;
            top: 77%;
            left: 134%;
            transform: translate(-50%, -50%);
            z-index: 100;
        }
    }
}
</style>