<template>
    <div v-show="show" :style="style">
        <el-tooltip class="item" effect="dark" :content="copied?'复制成功':'点击复制'" placement="top">
            <el-tag type="success" @click="copy">
                <i :class="copied?'el-icon-success':'el-icon-document-copy'"></i><!---->
            </el-tag>
        </el-tooltip>
    </div>
</template>

<script>
import {copyElement} from "../../../../../util/pattern/dom/clipBoard"

export default {
    name: "copyButton",
    data() {
        return {
            show: false,
            copied: false,
            style: {}
        }
    },
    created() {
        let vm = this;
        window.addEventListener('scroll', function () {
            vm.show && vm.initPosition(vm.element);
        }, true);
    },
    methods: {
        watch(element_) {
            let element = element_;
            let vm = this;
            $(element).bind("mouseenter", function () {
                vm.initPosition(element);
                vm.show = true;
            }).bind("mouseleave", function (e) {
                if (!e.relatedTarget) return;
                if (e.relatedTarget.parentElement === vm.$el) return;
                vm.show = false;

            });
        },
        copy() {
            copyElement(this.element)
            this.copied = true;
        },
        initPosition(element) {
            let vm = this;
            this.element = element;
            vm.show || (vm.copied = false);
            let rect = element.getBoundingClientRect();
            this.style = {
                position: "fixed",
                cursor: "pointer",
                left: rect.right - 50 + "px",
                top: rect.top + 10 + "px",
            }
        },
        unwatch(element) {
            $(element).unbind("mouseenter").unbind("mouseleave");
        },
    }
}
</script>

<style scoped lang="less">
    .item{
        padding: ;
    }
</style>
