<template>
    <div class="tank_valves" :style="getTankBodyStyle">
        <RTypeTank :title="title" :waterLevelValue="waterLevelValue" :iconWidth="iconWidth" :iconHeight="iconHeight"
            :iconSize="iconSize" :tempValue="tempValue" :fanStatus="fanStatus"></RTypeTank>
        <!-- 阀门进度 -->
        <div class="valve_progress">
            <div :style="valveProgressStyle" class="valve_progress1 rotate_270" v-if="valveNames[0]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="419"
                    :pipeLeftOffset="-271" :valveStatusArr="initValveStatusArr" progressType="steam"
                    :pipeStatus="initPipeStatus" :pipeReverse="true" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress2" v-if="valveNames[1]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="290"
                    :pipeLeftOffset="-60" :valveStatusArr="initValveStatusArr" progressType="steam"
                    :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress3" v-if="valveNames[2]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="200" :pipeLeftOffset="-60"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
            <div :style="valveProgressStyle" class="valve_progress4" v-if="valveNames[3]">
                <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="575" :pipeLeftOffset="-232"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
            </div>
        </div>
        <!-- 泵进度 -->
        <div class="pump_progress">
            <div :style="pumpProgressStyle" class="pump_progress1" v-if="pumpName">
                <Pump :title="pumpName" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true" :pipeType="steam" />
            </div>
        </div>
        <!-- 流量计 -->
        <div class="flow_meters">
            <div class="flow_meter1">
                <FlowMeter title="PIT2001" :flowValueArr="[100, 100]" :rotateAngle="270" :iconSize="flowMeterIconSize" />
            </div>

            <div class="flow_meter2">
                <FlowMeter title="PIT2002" :flowValueArr="[100, 100]" :iconSize="flowMeterIconSize" />
            </div>
        </div>
    </div>
</template>

<script setup>
import RTypeTank from '@/components/HnyzDcs/RTypeTankComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import PumpProgress from '@/components/HnyzDcs/PumpProgressComponent.vue';
import Pump from '@/components/DCS/PumpComponent.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(4).fill('ACV_default')
//泵默认名称
const defaultPumpName = 'P_default'
//流量计默认名称
const defaultFlowMeterName = new Array(4).fill('PIT_default')
// 阀门名称映射表
const valveNameArr= {
    'R2001': ['ACV2003', 'ACV2001', 'ACV2007','ACV2005'],
    'R2002': ['ACV2004', 'ACV2002', 'ACV2008','ACV2006'],
}
//泵名称映射表
const pumpNameArr = {
    'R2001': 'P2001',
    'R2002': 'P2002',
}
//流量计名称映射表
const flowMeterNameArr = {
    'R2001': ['PIT2001', 'PIT2002'],
    'R2002': ['PIT2004', 'PIT2003'],
}
//阀门名称数组,根据罐名来匹配
const valveNames = computed(() => {
    return valveNameArr[props.title] || defaultValveNames
})

//泵名称
const pumpName = computed(() => {
    return pumpNameArr[props.title] || defaultPumpName
})

//流量计名称数组
const flowMeterNames = computed(() => {
    return flowMeterNameArr[props.title] || defaultFlowMeterName
})

//罐体样式
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;
});

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

//泵icon大小（罐子200-泵80）
const pumpIconSize = computed(() => {
    return props.iconSize * 0.4;
});

//泵进度样式
const pumpProgressStyle = computed(() => {
    return {
        width: `${pumpIconSize.value}px`,
        height: `${pumpIconSize.value}px`,
    }
});
//流量计icon大小（罐子200-流量计55）
const flowMeterIconSize = computed(() => {
    return props.iconSize * 0.275;
});

//temp值
const tempValue = computed({
    get() {
        return props.tempValue
    },
})

</script>

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

    .valve_progress {
        .valve_progress1 {
            position: absolute;
            top: -38%;
            left: 61%;
        }

        .valve_progress2 {
            position: absolute;
            top: 17%;
            left: -11%;
        }

        .valve_progress3 {
            position: absolute;
            top: 78%;
            left: 96%;
        }

        .valve_progress4 {
            position: absolute;
            top: 18%;
            left: 126%;
        }
    }

    .pump_progress {
        .pump_progress1 {
            position: absolute;
            top: 93%;
            left: 150%;
            transform: translate(-50%, -50%);
            z-index: 50;
        }
    }

    .flow_meters {
        .flow_meter1 {
            position: absolute;
            top: -30%;
            left: 58.2%;
        }

        .flow_meter2 {
            position: absolute;
            top: 27%;
            left: 100%;
        }
    }
}
</style>