<template>
    <div class="tank" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
        <!-- S罐体 -->
        <i class="icon iconfont-colour icon-initialTank3 tank_s" :style="getTankStyle">
            <div class="tank_title" v-if="title" :style="{ fontSize: titleFontSize }">
                {{ title }}
            </div>
        </i>
    </div>
</template>
<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    iconSize: {
        type: Number,
        default: 400
    },
    iconWidth: {
        type: Number,
    },
    iconHeight: {
        type: Number,
    },
})

// 根据标题长度动态设置字体大小
const titleFontSize = computed(() => {
    const len = props.title.length
    if (len <= 4) return '24px'
    if (len <= 8) return '16px'
    if (len <= 12) return '14px'
    return '12px'
})
const fontSize = computed(() => props.iconSize ?? 200)

// 罐子样式
const getTankStyle = computed(() => {
    const style = {
        fontSize: fontSize.value + 'px',
        display: 'inline-block'
    }
    const scaleX = props.iconWidth ? props.iconWidth / fontSize.value : 1
    const scaleY = props.iconHeight ? props.iconHeight / fontSize.value : 1

    if (scaleX !== 1 || scaleY !== 1) {
        style.transform = `scale(${scaleX}, ${scaleY})`
        style['--scale-x'] = scaleX
        style['--scale-y'] = scaleY
    }

    return style
})
</script>

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

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

        .tank_title {
            position: absolute;
            top: 6%;
            left: 50%;
            transform: translate(-50%, -50%) scale(calc(1 / var(--scale-x, 1)), calc(1 / var(--scale-y, 1)));
            color: #e65100;
            font-weight: bold;
            z-index: 20;
            pointer-events: none;
            text-align: center;
        }
    }
}
</style>