<template>
    <div class="mixer_pump">
        <i class="icon iconfont icon-fengshan icon_fan" :class="{ fan_run: safePumpDataArr[1] > 0 }"
            :style="{ fontSize: iconSize + 'px' }"></i>
    </div>
</template>

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

const props = defineProps({
    pumpDataArr: {
        type: Array,
        default: () => []
    },
    iconSize: {
        type: Number,
        default: 30
    }
})

// 处理默认值逻辑：传空数组或未传时，使用 [1, 100]
const safePumpDataArr = computed(() => {
    return Array.isArray(props.pumpDataArr) && props.pumpDataArr.length >= 2
        ? props.pumpDataArr
        : [1, 100]
})
</script>

<style lang="scss" scoped>
.mixer_pump {
    .icon_fan {
        display: inline-block;
        color: red;
    }
}

@keyframes rotate-clockwise {
    from {
        transform: rotate(0deg);
    }

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

.fan_run {
    animation: rotate-clockwise 1s linear infinite;
    transform-origin: 49% 52%;
    transform-box: fill-box;
}
</style>
