<template>
    <!-- 下锥形镂空罐 -->
    <div class="tank_body" :style="getTankBodyStyle">
        <i class="icon iconfont-colour icon-tank1 tank_icon" :style="getTankStyle">
            <!-- 标题 -->
            <div class="tank_title" v-if="title" :style="{ fontSize: titleFontSize }">
                {{ title }}
            </div>
        </i>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
})

const iconSize = computed(() => props.iconSize ?? props.iconWidth)

//罐体样式
const getTankBodyStyle = computed(() => ({
    width: `${props.iconWidth ?? props.iconSize}px`,
    height: `${props.iconHeight ?? props.iconSize}px`,
    fontSize: `${props.iconSize ?? 200}px`,
}))


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

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

    return style
})
// 根据标题长度动态设置字体大小
const titleFontSize = computed(() => {
    const len = props.title.length
    if (len <= 4) return iconSize.value *0.15 + 'px'
    if (len <= 8) return iconSize.value *0.1 + 'px'
    if (len <= 12) return iconSize.value *0.08 + 'px'
    return iconSize.value *0.06 + 'px'
})
</script>

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

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

        //罐子名称
        .tank_title {
            position: absolute;
            top: 6%;
            left: 49%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            color: #e65100;
            font-weight: bold;
        }
    }
}
</style>