<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- Z1罐体 -->
        <WaterTank :temperatureValue="temperatureValue" tankType="3" :waterLevelValue="waterLevelValue"
            :iconSize="iconSize" :weightValue="weightValue" :title="title" class="z1_tank" />
        <!-- n21 -->
        <div :style="valveProgressStyle" class="valve_progress21 rotate_270" v-if="hasValve(valveNames[0])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="270"
                :pipeLeftOffset="-47" :valveStatusArr="getValveStatusArr(valveNames[0])" progressType="heat_exchange_fluid"
                :pipeStatus="getValveAndStatus(valveNames[0])" :pipeReverse="true" />
        </div>
    </div>
</template>
<script setup>
import WaterTank from '@/components/DCS/WaterTankComponent';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import { defineProps, computed } from 'vue'
import { useValveHelper } from '@/hooks/useValveHelper'

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    temperatureValue: {//温度
        type: Number,
    },
    waterLevelValue: {//液位
        type: Number,
    },
    pressureValue: {//压力
        type: Number,
    },
    weightValue: {//重量
        type: Number,
    },
    valveArr: {//阀门数组
        type: Array,
    },
    iconSize: {//罐体图标大小
        type: Number,
        default: 300,
    },
})
// 将 props.valveArr 转换为响应式引用传入
const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(computed(() => props.valveArr))

const valveNames = ['N21']

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

//阀门进度样式
const valveProgressStyle = computed(() => {
    return {
        width: `${valveIconSize.value}px`,
        height: `${valveIconSize.value}px`,
    }
});


</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #0b172c;

    .tank {
        margin: 200px;
        position: relative;
        z-index: 10;

        //罐体
        .z1_tank {
            position: absolute;
            z-index: 10;
        }

        //阀门进度样式
        .valve_progress21 {
            position: absolute;
            top: 108%;
            left: 47%;
        }

    }
}
</style>