<template>
    <el-popover placement="right" trigger="hover" popper-class="flow_meter_popover">
        <!-- 弹出内容 -->
        <template #default>
            <div class="flow_title">{{ title }}</div>
            <div class="flow_value" v-if="meterType === 1">瞬时流量: {{ flowValueArr[0] }} m³/h</div>
            <div class="flow_value" v-if="meterType === 1">累计流量: {{ flowValueArr[1] }} m³</div>
            <div class="flow_value" v-if="meterType === 2">K离子浓度: {{ ionValue }} %</div>
        </template>
        <!-- 悬浮触发区域 -->
        <template #reference>
            <div class="flow_meter_icon" :style="getRotateStyle">
                <i class="icon iconfont-hnyz-colour icon-hnyz-colourflowmeter"
                    :style="{ fontSize: `${props.iconSize}px` }"></i>
            </div>
        </template>
    </el-popover>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
    title: {
        type: String,
    },
    flowValueArr: {// 瞬时流量和累计流量
        type: Array,
        default: () => [10, 10],
    },
    ionValue: {// K离子浓度
        type: Number,
        default: 3,
    },
    rotateAngle: {// 旋转角度
        type: Number,
        default: 0,
    },
    iconSize: {// 流量图标大小
        type: Number,
        default: 55
    },
    //仪表类型1：流量计，2：离子浓度测量仪
    meterType: {
        type: Number,
        default: 1
    }

});

// 计算旋转角度样式
const getRotateStyle = computed(() => ({
    transform: `rotate(${props.rotateAngle}deg) translate(-50%, -50%)`,
}))
</script>

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

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

.flow_value {
    font-size: 12px;
    color: #333;
}
</style>
<style lang="scss">//写到非 scoped <style> 里，因为 popover 是挂在 body 外部的 DOM 节点
.flow_meter_popover {
    min-width: unset !important;// 取消弹出层的最小宽度限制
    width: auto !important;
}
</style>