<template>
    <el-popover placement="right" trigger="hover" popper-class="machine_popover">
        <!-- 弹出内容 -->
        <template #default>
            <div class="flow_title">{{ title }}</div>
            <div class="flow_value">K离子含量: {{ machineValue }} %</div>
        </template>

        <!-- 悬浮触发区域 -->
        <template #reference>
            <div class="flow_meter_icon">
                <!-- 离子检测仪图标 -->
                <i class="icon iconfont-hnyz-colour icon-hnyz-colourIonDetectionMachine"
                    :style="{ fontSize: props.iconSize + 'px' }"></i>
            </div>
        </template>
    </el-popover>
</template>

<script setup>

const props = defineProps({
    title: String,
    machineValue: {// 离子含量
        type: Number,
        default: 5,
    },
    iconSize: {// 图标大小
        type: Number,
        default: 50
    },
});

</script>

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

    i {
        cursor: pointer;
    }
}

.flow_title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}

.flow_value,
.flow_total {
    font-size: 12px;
    color: #333;
}
</style>
