<template>
    <!-- 换热器：温度、搅拌 -->
    <div class="tank_body" :style="getTankBodyStyle">
        <!-- 罐体 -->
        <i class="icon iconfont-hnyz-colour tank" :class="getTankClass" :style="getTankStyle">
            <!-- 标题 -->
            <div class="tank_title" :style="{ fontSize: `${iconSize * 0.15}px` }" v-if="title">{{ title }}</div>
        </i>
        <!-- 搅拌电机 -->
        <div class="mixer_machine" v-if="typeof fanStatus === 'boolean'">
            <i class="icon iconfont icon-fengshan" :class="{ 'fan_run': fanStatus }"
                :style="{ fontSize: `${iconSize * 0.25}px` }"></i>
        </div>
        <!-- temp值组件 -->
        <TempSlider :tempValue="tempValue" :sliderWidth="iconSize * 0.05" class="temp_pos"
            :style="getTempSliderStyle" />
    </div>
</template>

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

const props = defineProps({
    tempValue: {//temp
        type: Number,
        default: null
    },
    fanStatus: {//风扇状态
        type: Boolean,
    },
    iconSize: {//图标大小
        type: Number,
        default: 200,
    },
    title: {//罐名
        type: String,
    },
    iconWidth: {//图标宽度
        type: Number,
    },
    iconHeight: {//图标高度
        type: Number,
    },
})
//解构
const { iconSize, title, iconWidth, iconHeight } = props

const width = computed(() => props.iconWidth ?? props.iconSize)
const height = computed(() => props.iconHeight ?? props.iconSize)

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


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

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

    return style
})

// 罐子类名 
const getTankClass = computed(() => {
    return props.fanStatus
        ? 'icon-hnyz-colourheatExchanger_hollowedOut'
        : 'icon-hnyz-colourheatExchanger';
});

// 温度组件样式
const getTempSliderStyle = computed(() => {
    const leftMap = {
        100: '54%',
        150: '59%',
        200: '62%',
    };
    return {
        left: leftMap[width.value] ?? '54%' 
    };
})
</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;
        }
    }

    .temp_pos {
        position: absolute;
        top: 23%;
        left: 59%;
        z-index: 100;
    }

    //搅拌电机
    .mixer_machine {
        position: absolute;
        top: 26%;
        left: 50%;
        transform: translate(-50%, -50%);

        .icon-fengshan {
            color: aliceblue;
            font-size: 50px;
            display: inline-block;
        }

        //旋转动画
        @keyframes rotate-clockwise {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .fan_run {
            animation: rotate-clockwise 1s linear infinite;
        }
    }

}
</style>