<template>
    <el-popover placement="top" trigger="hover" popper-style="min-width:unset;padding:0;width:auto;">
        <template #reference>
            <div ref="operaTextRef" style="height:100%">
                <slot></slot>
            </div>
        </template>
        <div class="row items-center" style="padding:4px">
            <div class="text-opera-item" @click="handleInsert">
                <el-tooltip content="插入图" placement="top">
                    <IconDocAdd :size="18"></IconDocAdd>
                </el-tooltip>
            </div>
            <div v-if="handleElement.type=='image'" class="text-opera-item" @click="handleReplace">
                <el-tooltip content="替换图" placement="top">
                    <IconFileConversion :size="18"></IconFileConversion>
                </el-tooltip>
            </div>
        </div>
    </el-popover>
</template>

<script lang="ts" setup>
    import { useMainStore } from "@/store";
    import { ElMessage } from "element-plus";
    import { storeToRefs } from "pinia";
    import { ref } from "vue";
    import useHistorySnapshot from '@/hooks/useHistorySnapshot'
    
    const mainStore = useMainStore();
    const { handleElement } = storeToRefs(mainStore);
    const operaTextRef = ref<any>()
    
    const emit = defineEmits<{
        (event: 'handleCopyImage'): void
        (event: 'handleInsert'): void
        (event: 'handleReplace'): void
    }>()
    
    const handleCopyImage= () => {
        emit('handleCopyImage')
    }
    const handleReplace=()=>{
        emit('handleReplace')
    }
    const handleInsert=()=>{
        emit('handleInsert')
    }
    
</script>

<style>
    .text-opera-item{
        padding:5px;
        border-radius: 5px;
        cursor: pointer;
        color: #000;
        line-height: 1;
        
    }
    .text-opera-item:hover{
        background: #000;
        color: #FFF;
    }
</style>