<template>
    <!-- G或X型罐体 -->
    <div class="tank_body">
        <!-- 罐体 -->
        <i class="icon iconfont-hnyz-colour icon-hnyz-colourheatExchanger tank" :style="getTankStyle">
            <!-- 标题 -->
            <div class="tank_title" :style="{ fontSize: `${iconSize * 0.15}px` }" v-if="title">{{ title }}</div>
        </i>
        <Pipe :pipeStatus="pipeStatus" :strokeWidth="strokeWidth" class="pipe_pos rotate_90 progress_steam" :style="{width: `${iconHeight * 1.35}px`}"/>
    </div>
</template>

<script setup>
import Pipe from '@/components/HnyzDcs/PipeComponent.vue'
import { computed } from 'vue'

const props = defineProps({
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
    pipeStatus: {//管道状态
        type: Boolean,
        default: false,
    },
    strokeWidth: {//管道宽度
        type: Number,
    }
})
//解构
const { iconSize, title, iconWidth, iconHeight } = props

// 罐子样式
const getTankStyle = computed(() => {
    const style = {
        fontSize: iconSize + 'px',
        display: 'block',
        margin: '0 auto',
    }
    //根据传进来的iconWidth和iconHeight来控制图标的大小
    const scaleX = iconWidth ? iconWidth / iconSize : 1
    const scaleY = iconHeight ? iconHeight / iconSize : 1

    if (scaleX !== 1 || scaleY !== 1) {
        style.transform = `scale(${scaleX}, ${scaleY})`
        style.transformOrigin = 'center center'
    }

    return style
})

</script>

<style scoped lang="scss">
//水位罐
.tank_body {
    text-align: center;
    position: relative;

    .tank {
        position: relative;
        z-index: 10;

        //罐子名称
        .tank_title {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #e65100;
            font-weight: bold;
        }
    }

    .pipe_pos {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
    }
}
</style>