<template>
    <el-tooltip :content="btn_Info['textInfo']" placement="top" :disabled="!isBubble || !btn_Info['textInfo']" v-if="btn_Info">
        <slot></slot>
    </el-tooltip>
</template>

<script setup>
import {ref,watch,onMounted} from "vue";
import {useAppStore} from "~src/store";
const useAppState = useAppStore()

//参数
const props = defineProps({
    keys: {
        type: String,
        default: ''
    }
})

//变量
const btn_Info = ref(false);
const btn_key = ref(props.keys);
const isBubble = ref(useAppState.getBubble);

//监听
watch(() => [
    props.keys,
    useAppState.getBubble,
], ([keys, bubble]) => {
    btn_key.value = keys
    isBubble.value = bubble
    btn_Info.value = getButtonsVal(keys)
})

//渲染完成
onMounted(()=> {
    if (props.keys) {
        btn_Info.value = getButtonsVal(props.keys)
    }
})

//获取气泡数据
const getButtonsVal = (value) => {
    return useAppState.getButtonsVal(value)
}
</script>
