<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <!-- 钠钾锂分离-单个罐体：温度、搅拌 -->
        <FTypeTank :title="title" :waterLevelValue="waterLevelValue" :iconWidth="iconWidth" :iconHeight="iconHeight"
            :iconSize="iconSize" :tempValue="tempValue"></FTypeTank>
        <!-- 阀门进度 -->
        <div class="valve_progress">
            <!-- 上 -->
            <!-- <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="258"
                :pipeLeftOffset="-108" :valveStatusArr="initValveStatusArr" progressType="red" :pipeReverse="true"
                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_270" /> -->
            <!-- 下1 -->
            <!-- <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="270" :pipeLength="0"
                :pipeLeftOffset="-200" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress2 rotate_270 zIndex10" /> -->
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="270" :pipeLength="0"
                :pipeLeftOffset="-200" :valveStatusArr="initValveStatusArr" progressType="steam"
                :pipeStatus="initPipeStatus" class="valve_progress3 rotate_270 zIndex10" />
        </div>
        <!-- 泵进度 -->
        <div class="pipes">
            <!-- 上左管道 -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="6" class="progress_red progress_pos3 rotate_90" />
            <!-- 上右管道 -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="6" class="progress_green progress_pos1 rotate_90" />
            <!-- 下管道 -->
            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="6" class="progress_blue progress_pos2 rotate_90" />
        </div>
        <!-- 流量计 -->
        <div class="flow_meters">
            <div class="flow_meter1">
                <FlowMeter title="K离子检测仪" ionValue="3" :rotateAngle="270" :meterType="2" :iconSize="iconSize * 0.275" />
            </div>
        </div>
    </div>
</template>

<script setup>
import FTypeTank from '@/components/HnyzDcs/FTypeTankComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import FlowMeter from '@/components/HnyzDcs/FlowMeterComponent.vue';
import { computed } from 'vue'
const initValveStatusArr = [true]
const initPipeStatus = true
const props = defineProps({
    tempValue: {//temp
        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,
    },
})

//默认阀门名称数组
const defaultValveNames = new Array(3).fill('SQF')

// 阀门名称映射表
const valveNameArr = {
}

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

//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${props.iconWidth ?? props.iconSize}px`,
    height: `${props.iconHeight ?? props.iconSize}px`,
}))


//阀门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: -33%;
            left: 40%;
        }

        .valve_progress2 {
            position: absolute;
            top: 140%;
            left: 45.6%;
        }

        .valve_progress3 {
            position: absolute;
            top: 160%;
            left: 45.6%;
        }
    }

    .flow_meters {
        .flow_meter1 {
            position: absolute;
            top: 115%;
            left: 56.5%;
            transform: translate(-50%, -50%);
        }
    }

    .pipes {
        .progress_pos1 {
            position: absolute;
            top: -3%;
            left: 63%;
            width: 25%;
        }

        .progress_pos2 {
            position: absolute;
            top: 142%;
            left: 50%;
            width: 115%;
        }

        .progress_pos3 {
            position: absolute;
            top: -23%;
            left: 43%;
            width: 70%;
        }
    }
}
</style>