<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 水槽  -->
        <WaterSinkComponent :title="title" :width="width" :height="height" :waterLevelValue="80" :tempValue="50" />
        <div class="valve_progress">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="90" :pipeLength="440"
                :pipeLeftOffset="-300" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="90" :pipeLength="440"
                :pipeLeftOffset="-220" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress2 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :rotateAngle="90" :pipeLength="440"
                :pipeLeftOffset="-140" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress3 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :rotateAngle="90" :pipeLength="440"
                :pipeLeftOffset="-60" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress4 rotate_90" />
        </div>
        <div class="pump_progress">
            <Pump :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                :pipeType="steam" class="pump_progress1" />
        </div>
        <div class="pipes" v-if="pumpNames[0]">
            <!-- 右下泵管道 -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="width * 0.048" class="progress_steam progress_pos1"></Pipe>
        </div>
    </div>
</template>

<script setup>
import WaterSinkComponent from '@/components/HnyzDcs/WaterSinkComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Pump from '@/components/DCS/PumpComponent.vue';
import { computed } from 'vue'
const initValveStatusArr = [true]
const initPipeStatus = true
const props = defineProps({
    iconSize: {
        type: Number,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
    tempValue: {
        type: Number,
    },
    waterLevelValue: {// 水位值
        type: Number,
        default: -1,// -1表示未传水位值
    },
    title: {//罐名
        type: String,
    },
})

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

// 阀门名称映射表
const valveNameArr = {
    'V6101': ['ACV6007A', 'ACV6007B', 'ACV6008A', 'ACV6008B'],
}
//泵名称映射表
const pumpNameArr = {
    'V6101': ['P6004'],
}

//阀门名称数组,根据罐名来匹配
const valveNames = computed(() => {
    return valveNameArr[props.title] || defaultValveNames
})
//泵名称
const pumpNames = computed(() => {
    return pumpNameArr[props.title] || defaultPumpNames
})

const width = computed(() => {
    return props.iconWidth ?? props.iconSize
})
const height = computed(() => {
    return props.iconHeight ?? props.iconSize
})

//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${width.value}px`,
    height: `${height.value}px`,
}))

//阀门icon大小（水槽100*80-阀门30）
const valveIconSize = computed(() => {
    return width.value * 0.3;
});

//泵icon大小（水槽100*80-泵48）
const pumpIconSize = computed(() => {
    return width.value * 0.48;
});

</script>

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

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: -30%;
            left: 13%;
        }

        .valve_progress2 {
            position: absolute;
            top: -60%;
            left: 41%;
        }

        .valve_progress3 {
            position: absolute;
            top: -90%;
            left: 69%;
        }

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

    .pump_progress {

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

    .pipes {
        .progress_pos1 {
            width: 46%;
            position: absolute;
            top: 92%;
            left: 90%;
        }
    }
}
</style>