<template>

    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- m1罐体 -->
        <WaterTank :temperatureValue="temperatureValue" :tankType="1" :title="title" :waterLevelValue="waterLevelValue"
            :iconSize="iconSize" class="m1_tank" :pressureValue="pressureValue" :weightValue="weightValue">
        </WaterTank>
        <!-- n4/n14 -->
        <div :style="valveProgressStyle" class="valve_progress_4" v-if="hasValve(valveNames[0])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" progressType="compressed_air"
                :valveStatusArr="getValveStatusArr(valveNames[0])" :pipeStatus="getValveAndStatus(valveNames[0])"
                :pipeReverse="true" />
        </div>

        <!-- N6 /n16-->
        <div :style="valveProgressStyle" class="valve_progress_6" v-if="hasValve(valveNames[1])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="267" :pipeLeftOffset="-132"
                :valveStatusArr="getValveStatusArr(valveNames[1])" :progressType="getProgressType"
                :pipeStatus="getValveAndStatus(valveNames[1], valveNames[3]) || getValveAndStatus(valveNames[1], valveNames[4])"
                :pipeReverse="getValveAndStatus(valveNames[1], valveNames[4])" />
            <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                :striped="getValveAndStatus(valveNames[1], valveNames[3]) || getValveAndStatus(valveNames[1], valveNames[4])"
                :striped-flow="getValveAndStatus(valveNames[1], valveNames[3]) || getValveAndStatus(valveNames[1], valveNames[4])"
                :duration="6" class="progress rotate_90 progress6_2"
                :class="[getProgressClass, { 'rotate_270': getValveAndStatus(valveNames[1], valveNames[4]) }]" />
        </div>

        <!-- N7 /n17-->
        <div :style="valveProgressStyle" class="valve_progress_7" v-if="hasValve(valveNames[2])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="364" :pipeLeftOffset="-229"
                :valveStatusArr="getValveStatusArr(valveNames[2])" :progressType="getProgressType"
                :pipeStatus="getValveAndStatus(valveNames[2], valveNames[3]) || getValveAndStatus(valveNames[2], valveNames[4])"
                :pipeReverse="getValveAndStatus(valveNames[2], valveNames[4])" />
            <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                :striped="getValveAndStatus(valveNames[2], valveNames[3]) || getValveAndStatus(valveNames[2], valveNames[4])"
                :striped-flow="getValveAndStatus(valveNames[2], valveNames[3]) || getValveAndStatus(valveNames[2], valveNames[4])"
                :duration="progressConfig.duration" class="progress rotate_90 progress7_2"
                :class="[getProgressClass, { 'rotate_270': getValveAndStatus(valveNames[2], valveNames[4]) }]" />
        </div>

        <!-- N8 /n18-->
        <div :style="valveProgressStyle" class="valve_progress_8 rotate_315" v-if="hasValve(valveNames[3])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :rotateAngle="315" :pipeLength="237"
                :valveStatusArr="getValveStatusArr(valveNames[3])" progressType="compressed_air"
                :pipeStatus="getValveAndStatus(valveNames[3], valveNames[2]) || getValveAndStatus(valveNames[3], valveNames[1])" />
            <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                :striped="getValveAndStatus(valveNames[2], valveNames[3]) || getValveAndStatus(valveNames[1], valveNames[4])"
                :striped-flow="getValveAndStatus(valveNames[2], valveNames[3]) || getValveAndStatus(valveNames[1], valveNames[4])"
                class="progress progress8_1" :class="getProgressClass" />
        </div>

        <!-- N9 /n15-->
        <div :style="valveProgressStyle" class="valve_progress_9 rotate_315" v-if="hasValve(valveNames[4])">
            <ValveProgress :iconSize="iconSize * 0.125" :title="valveNames[4]" :rotateAngle="315" :pipeLength="287"
                :pipeLeftOffset="-49" :valveStatusArr="getValveStatusArr(valveNames[4])"
                :progressType="title === 'M1' ? 'heat_exchange_fluid' : 'materials'"
                :pipeStatus="getValveAndStatus(valveNames[4], valveNames[1]) || getValveAndStatus(valveNames[4], valveNames[2])" />
        </div>

        <!-- N11 /n20-->
        <div :style="valveProgressStyle" class="valve_progress_11 rotate_270" v-if="hasValve(valveNames[5])">
            <ValveProgress :iconSize="iconSize * 0.125" :title="valveNames[5]" :rotateAngle="270" progressType="stench"
                :valveStatusArr="getValveStatusArr(valveNames[5])" :pipeLength="600"
                :pipeStatus="getValveAndStatus(valveNames[5])" />
        </div>

        <!-- N1/n12 -->
        <div :style="valveProgressStyle" class="valve_progress_1" v-if="hasValve(valveNames[6])"
            :class="{ 'valve_progress_1_right': 'right' === valvePosition }">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" progressType="materials"
                :valveStatusArr="getValveStatusArr(valveNames[6])" :pipeStatus="getValveAndStatus(valveNames[6])"
                :pipeReverse="'right' === valvePosition" />
        </div>

        <!-- N2 /n13-->
        <div :style="valveProgressStyle" class="valve_progress_2" v-if="hasValve(valveNames[7])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[7]" :pipeReverse="true"
                :progressType="title === 'M1' ? 'heat_exchange_fluid' : 'red'"
                :valveStatusArr="getValveStatusArr(valveNames[7])" :pipeStatus="getValveAndStatus(valveNames[7])" />
        </div>

        <!-- N10 /n19-->
        <div :style="valveProgressStyle" class="valve_progress_10 rotate_270" v-if="hasValve(valveNames[8])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[8]" :rotateAngle="270" progressType="materials"
                :valveStatusArr="getValveStatusArr(valveNames[8])" :pipeLength="234"
                :pipeStatus="getValveAndStatus(valveNames[8])" :pipeReverse="true" />
        </div>


        <!-- N3-->
        <div :style="valveProgressStyle" class="valve_progress_3" v-if="hasValve(valveNames[9])">
            <ValveProgress :iconSize="valveIconSize" :title="valveNames[9]"
                :valveStatusArr="getValveStatusArr(valveNames[9])" :pipeStatus="getValveAndStatus(valveNames[9])"
                :pipeReverse="true" />
        </div>

        <!-- n5 暂时隐藏-->
        <div :style="valveProgressStyle" class="valve_progress_5 rotate_90" v-if="false">
            <ValveProgress :iconSize="iconSize * 0.125" :title="valveNames[10]" :rotateAngle="90"
                :valveStatusArr="getValveStatusArr(valveNames[10])" :pipeStatus="getValveAndStatus(valveNames[10])" />
        </div>
    </div>
</template>

<script setup>
import WaterTank from '@/components/DCS/WaterTankComponent';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import { defineProps, computed, onMounted } from 'vue'
import { useValveHelper } from '@/hooks/useValveHelper'

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    iconSize: {
        type: Number,
        default: 400
    },
    temperatureValue: {//温度
        type: Number,
    },
    waterLevelValue: {//液位
        type: Number,
    },
    pressureValue: {//压力
        type: Number,
    },
    weightValue: {//重量
        type: Number,
    },
    // fanStatus: {//风扇状态
    //     type: Boolean,
    // },
    valveArr: {//阀门数组
        type: Array,
    },
    //底部阀门朝向
    valvePosition: {
        type: String,
        default: 'left'
    },
})

//props.valveArr 是响应式的“只读属性”，但不是 ref，直接传给工具函数内部会失去响应性
const valveArrRef = computed(() => props.valveArr || []);
const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(valveArrRef)

//进度条配置
const progressConfig = {
    strokeWidth: 8,//进度条宽度
    percentage: 100,//进度条百分比
    duration: 10,//进度条流速
    showText: false,//是否显示文字
}
// M1,M2罐对应阀门名称
const valveNames1 = ['N4', 'N6', 'N7', 'N8', 'N9', 'N11', 'N1', 'N2', 'N10', 'N13', 'N5'];
const valveNames2 = ['N14', 'N16', 'N17', 'N18', 'N15', 'N20', 'N12', 'N13', 'N19', '', '']
// 根据title进行判断
const valveNames = computed(() => {
    switch (props.title) {
        case 'M1':
            return valveNames1;
        case 'M2':
            return valveNames2;
        default:
            return valveNames1;
    }
});

//阀门图标大小（罐子400-阀门50）
const valveIconSize = computed(() => {
    return props.iconSize * 0.125;
});
//阀门进度样式
const valveProgressStyle = computed(() => {
    return {
        width: `${valveIconSize.value}px`,
        height: `${valveIconSize.value}px`,
    }
});

//根据阀门状态获取n6/n7和n16/n17进度条颜色
const getProgressType = computed(() => {
    //如果下面的阀门开启，说明流进的是压缩空气
    if (getValveAndStatus(valveNames.value[3]))//computed运算出来的结果是对象，要解构
        return 'compressed_air';
    //如果上面的阀门开启，说明流出的是换热液/物料
    if (getValveAndStatus(valveNames.value[4]))
        return props.title === 'M1' ? 'heat_exchange_fluid' : 'materials';
    return 'compressed_air'
})

const getProgressClass = computed(() => `progress_${getProgressType.value}`);

</script>

<style lang="scss" scoped>
.tank {
    margin: 200px;
    position: relative;
    z-index: 10;

    .valve_progress_4 {
        position: absolute;
        top: 5%;
        left: 85%;
    }

    .valve_progress_5 {
        position: absolute;
        top: -25%;
        left: -11%;
    }

    .valve_progress_6 {
        position: absolute;
        top: -13%;
        left: 9%;


        .progress6_2 {
            position: absolute;
            width: 66%;
            top: 99%;
            left: 129%;
        }
    }

    .valve_progress_7 {
        position: absolute;
        top: -25%;
        left: 33%;



        .progress7_2 {
            position: absolute;
            width: 154%;
            top: 139%;
            left: 129%;

        }
    }

    .valve_progress_8 {
        position: absolute;
        top: 0%;
        left: -27%;


        .progress8_1 {
            width: 152%;
            top: -40%;
            left: 185%;
        }
    }

    .valve_progress_9 {
        position: absolute;
        top: -33%;
        left: 6%;


    }

    .valve_progress_10 {
        position: absolute;
        left: 48%;
        top: 110%;

    }

    .valve_progress_11 {
        position: absolute;
        top: -9%;
        left: 66%;
    }

    .valve_progress_1 {
        position: absolute;
        top: 64%;
        left: 9%;
    }

    .valve_progress_1_right {
        left: 79%;
    }

    .valve_progress_2 {
        position: absolute;
        top: 28%;
        left: 85%;
    }

    .valve_progress_3 {
        position: absolute;
        top: 45%;
        left: 2%;
    }

    .m1_tank {
        position: absolute;
        z-index: 10;
    }


}
</style>