<template>
    <div class="kMapRightMenuBox" :style="`left:${(MenuPosition.x + 4).toFixed(1)}px;
    top:${(MenuPosition.y + 4).toFixed(1)}px;`" v-if="menuShow">
        <div class="menuItem title sp" v-if="model.currentName">
            {{ model.currentName }}
        </div>
        <div class="menuItem content" @click="clickMenuItem(0, 'fittingId')">
            功率曲线拟合
        </div>
        <div class="menuItem content" @click="clickMenuItem(1, 'processId')">
            对分偏差分析
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            rightMenuPosition: {
                type: Object,
                default: () => {
                    return {
                        x: 0,
                        y: 0
                    };
                },
            },

            rightMenuShow: {
                type: Boolean,
                default: () => false,
            },

            clickModel: {
                type: Object,
                default: () => {
                    return {};
                },
            },
        },

        data() {
            return {
                menuShow: false,
                MenuPosition: {
                    x: 0,
                    y: 0
                },
                preventStop: false,
                model: {},
            };
        },

        methods: {
            stopEvent() {
                this.$nextTick(() => {
                    if (!this.preventStop) {
                        const kMapRightMenuBox = document.querySelector(".kMapRightMenuBox");
                        kMapRightMenuBox.addEventListener("contextmenu", (event) => {
                            event.preventDefault && event.preventDefault();
                            this.preventStop = true;
                            return false;
                        });
                    }
                });
            },

            clickMenuItem(menuIndex, key) {
                if (this.model[key]) {
                    this.$emit("closeRightmenu");
                    this.$emit("cliclMenu", {
                        menuIndex,
                        current: this.model,
                    });
                }
            },
        },

        watch: {
            rightMenuShow(bool) {
                this.menuShow = bool;
                bool && this.stopEvent();
            },
            rightMenuPosition(menuPosition) {
                this.MenuPosition = menuPosition;
            },
            clickModel(model) {
                this.model = model;
            },
        },
    };
</script>

<style lang="less" scoped>
    .kMapRightMenuBox {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0px 8px 8px 8px;
        background: rgb(249, 249, 249);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 4px 0;
        overflow: hidden;

        .menuItem {
            font-size: 13px;
            padding: 4px 8px;
            width: 100%;
            white-space: nowrap;

            &.title {
                color: #999;
            }

            &.sp {
                border-bottom: 1px solid #999;
            }

            &.content {
                cursor: pointer;
                user-select: none;
                transition: 0.1s;
            }

            &.content:hover {
                background: #1890ff;
                color: #fff;
                transition: 0.1s;
            }
        }

        *.show {
            border: 1px solid rgb(229, 229, 229);
            height: 200px;
        }
    }
</style>