<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- s1罐体 拓展s2,s3罐体 -->
        <WaterTank :temperatureValue="temperatureValue" :tankType="3" :waterLevelValue="waterLevelValue"
            :iconSize="iconSize" :pressureValue="pressureValue" :weightValue="weightValue" :title="title"
            class="s1_tank" />
        <!-- d11阀门/d12/d13 -->
        <div :style="valveProgressStyle" class="valve_progress11 rotate_270" v-if="hasValve(valveNames[0])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="400"
                :pipeLeftOffset="-93" :valveStatusArr="getValveStatusArr(valveNames[0])" progressType="steam"
                :pipeStatus="getValveAndStatus(valveNames[0])" :pipeReverse="true" />
        </div>
        <!-- d5阀门/d6/d7 -->
        <div :style="valveProgressStyle" class="valve_progress5 rotate_270" v-if="hasValve(valveNames[1])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="270" :pipeLength="300"
                :pipeLeftOffset="-154" :valveStatusArr="getValveStatusArr(valveNames[1])" progressType="materials"
                :pipeStatus="getValveAndStatus('N10', valveNames[1])" :pipeReverse="true" />
        </div>
        <!-- d16阀门/d17/d18 -->
        <div :style="valveProgressStyle" class="valve_progress16 rotate_270" v-if="hasValve(valveNames[2])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :rotateAngle="270" :pipeLength="710"
                progressType="stench" :valveStatusArr="getValveStatusArr(valveNames[2])"
                :pipeStatus="getValveAndStatus(valveNames[2])" />
        </div>
        <!-- d8阀门/d9/d10 -->
        <div :style="valveProgressStyle" class="valve_progress8" v-if="hasValve(valveNames[3])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :rotateAngle="0" :pipeLength="200"
                progressType="compressed_air" :pipeLeftOffset="-63" :valveStatusArr="getValveStatusArr(valveNames[3])"
                :pipeStatus="getValveAndStatus(valveNames[3])" />
        </div>
        <!-- n22阀门 /n23/n24 -->
        <div :style="valveProgressStyle" class="valve_progress22 rotate_270" v-if="hasValve(valveNames[4])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :rotateAngle="270" :pipeLength="250"
                :pipeLeftOffset="-47" :valveStatusArr="getValveStatusArr(valveNames[4])" progressType="materials"
                :pipeStatus="getValveAndStatus(valveNames[4])" :pipeReverse="true" />
        </div>
        <!-- 搅拌电机 -->
        <div class="beng">
            <i class="icon iconfont icon-fengshan fan_pos" :class="{ 'fan_run': fanStatus }"></i>
        </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,
    },
    fanStatus: {//风扇状态
        type: Boolean,
    },
    valveArr: {//阀门数组
        type: Array,
    },
    iconSize: {//罐体图标大小
        type: Number,
        default: 300,
    },
})
// 将 props.valveArr 转换为响应式引用传入
const valveArrRef = computed(() => props.valveArr);
const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(valveArrRef)
// s1,s2,s3罐对应阀门数组
const valveNames1 = ['D11', 'D5', 'D16', 'D8', 'N22']
const valveNames2 = ['D12', 'D6', 'D17', 'D9', 'N23']
const valveNames3 = ['D13', 'D7', 'D18', 'D10', 'N24']
// 根据title进行判断
const valveNames = computed(() => {
    switch (props.title) {
        case 'S1':
            return valveNames1;
        case 'S2':
            return valveNames2;
        case 'S3':
            return valveNames3;
        default:
            return valveNames1;
    }
});
//阀门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;

        .valve_progress11 {
            position: absolute;
            top: -22%;
            left: 53%;
        }

        .valve_progress5 {
            position: absolute;
            top: -32%;
            left: 36%;

        }

        .valve_progress16 {
            position: absolute;
            top: -10%;
            left: 68%;

        }

        .valve_progress8 {
            position: absolute;
            top: 71%;
            left: 4%;
        }

        .valve_progress22 {
            position: absolute;
            top: 106%;
            left: 48%;
        }

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

        .beng {
            .fan_pos {
                color: red;
                position: absolute;
                top: 30%;
                left: 38%;
                font-size: 80px;
            }
        }



        //旋转动画
        @keyframes rotate-clockwise {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .fan_run {
            animation: rotate-clockwise 1s linear infinite;
        }


    }
}
</style>