<template>
    <div class="row items-center imageOperaBox" 
    :class="[handleElement.type=='image'?'imageOperaI':'imageOperaT']">
        <!-- <div class="text-opera-item" @click="handleCopyImage">
            <el-tooltip content="复制图" placement="top">
                <IconCopy :size="18"></IconCopy>
            </el-tooltip>
        </div> -->
        <div class="text-opera-item" @click="handleInsert">
            <el-tooltip content="插入图" placement="top">
                <IconDocAdd :size="18"></IconDocAdd>
            </el-tooltip>
        </div>
        <div v-show="handleElement.type=='image'" class="text-opera-item" @click="handleReplace">
            <el-tooltip content="替换图" placement="top">
                <IconFileConversion :size="18"></IconFileConversion>
            </el-tooltip>
        </div>
    </div>
</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 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 scoped>
    .text-opera-item{
        padding:5px;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        line-height: 1;
        
    }
    .text-opera-item:hover{
        background: #ffff;
        color: black;
    }
    .imageOperaBox{
        padding:4px;
        position: relative;
        position: fixed;
        top: -50px; 
        z-index: 99;
        background: rgba(23,23,23,.5);
        border-radius: 8px;
    }
    .imageOperaT{
        left: 180px;
    }
    .imageOperaT::after{
        content: ' ';
        width: 0;
        height: 0;
        position: absolute;
        left: 13px;
        bottom: -5px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 5px solid rgba(23,23,23,.5);
    }
    .imageOperaI{
        left: 160px;
    }
    .imageOperaI::after{
        content: ' ';
        width: 0;
        height: 0;
        position: absolute;
        left: 28px;
        bottom: -5px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 5px solid rgba(23,23,23,.5);
    }
</style>