<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 分离塔·(铁合金PID流程)  -->
        <STypeTank :title="title" :iconSize="iconSize" :waterLevelValue="waterLevelValue" />
        <div class="valve_progress">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="90" :pipeLength="520"
                :pipeLeftOffset="-330" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_90" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="335" :pipeLeftOffset="-172"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress2" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="393" :pipeLeftOffset="-116"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress3" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="472" :pipeLeftOffset="-51"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress4" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="200" :pipeLeftOffset="-50"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress5" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :pipeLength="800" :pipeLeftOffset="-510"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress6" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" :rotateAngle="90" :pipeLength="846"
                :pipeLeftOffset="-332" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
                :pipeStatus="initPipeStatus" class="valve_progress7 rotate_90" />

            <ValveProgress :iconSize="valveIconSize" :title="valveNames[7]" :pipeLength="180" :pipeLeftOffset="-31"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress8" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[8]" :pipeLength="300" :pipeLeftOffset="-50"
                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                class="valve_progress9" />
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[9]" :rotateAngle="90" :pipeLength="250"
                :pipeLeftOffset="-65" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress10 rotate_90" />
        </div>
        <!-- <div class="pump_progress">

        </div> -->
        <div class="pipes">
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
                class="progress_steam progress_pos1 rotate_270"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
                class="progress_steam progress_pos2 rotate_270"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
                class="progress_steam progress_pos3 rotate_270"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
                class="progress_steam progress_pos4 rotate_270"></Pipe>
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
                class="progress_steam progress_pos4_1 rotate_90"></Pipe>
        </div>
        <div class="arrows">
            <Arrow flexDir="column" :iconFirst="false" arrowDir="up" arrowText="排气" :iconSize="65" :fontSize="10"
                class="arrow_pos1" />
            <Arrow arrowDir="right" arrowText="预留" :iconSize="65" :fontSize="10" class="arrow_pos2" />
            <Arrow flexDir="column" arrowDir="down" arrowText="产品" :iconSize="65" :fontSize="10" class="arrow_pos3" />
        </div>
    </div>
</template>

<script setup>
import STypeTank from '@/components/HnyzDcs/STypeTankComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Arrow from '@/components/HnyzDcs/ArrowComponent.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(10).fill('ACV_default')

// 阀门名称映射表
const valveNameArr = {
    'F1001': ['QQF1013', 'QQF1011', 'QQF1010', 'QQF1009', 'QQF1014', 'QQF1008', 'QQF1012', 'QQF1016', 'QQF1015', 'QQF1021'],
}


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

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大小（罐体150-阀门30）
const valveIconSize = computed(() => {
    return width.value * 0.2;
});

//管道宽度(罐体150-管道4.8)
const strokeWidth = computed(() => {
    return width.value * 0.032;
});

</script>

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

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: -20%;
            left: 28%;
        }

        .valve_progress2 {
            position: absolute;
            top: -22%;
            left: 107%;
        }

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

        .valve_progress4 {
            position: absolute;
            top: -63.6%;
            left: 53.4%;
        }

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

        .valve_progress6 {
            position: absolute;
            top: -87%;
            left: 82%;
        }

        .valve_progress7 {
            position: absolute;
            top: -100%;
            left: 142%;
        }

        .valve_progress8 {
            position: absolute;
            top: 44%;
            left: 88%;
        }

        .valve_progress9 {
            position: absolute;
            top: 68%;
            left: -20%;
        }

        .valve_progress10 {
            position: absolute;
            top: 114%;
            left: 54%;
        }
    }

    .pipes {
        .progress_pos1 {
            position: absolute;
            top: -20%;
            left: 45%;
            width: 64%;
        }

        .progress_pos2 {
            width: 45%;
            position: absolute;
            top: -8%;
            left: 60%;
        }

        .progress_pos3 {
            width: 20%;
            position: absolute;
            top: 0%;
            left: 74%;
        }

        .progress_pos4 {
            width: 80%;
            position: absolute;
            top: -35%;
            left: -18%;
        }

        .progress_pos4_1 {
            width: 20%;
            position: absolute;
            top: 15%;
            left: -18%;
        }
    }

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

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

        .arrow_pos3 {
            position: absolute;
            top: 165%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>