class NodeSlide {
    constructor(lf, data) {
        this.lf = lf;
        this.data = data;
    }
    rander() {
        if (document.getElementById('modals-slide' + this.data.nodeId) != undefined) {
            this.show();
        } else {
            return new Promise((resole, reject) => {
                let htmlTemplate = `<div class="modal modal-slide" id="modals-slide${this.data.nodeId}" style="display: none;">
            <div class="modal-dialog">
                <form class="modal-content">
                    <div class="row">
                    <button type="button" class="left" style="margin-left:50px;background-color:transparent;border:0px;position:fixed;line-height:1rem;margin-top: -35px;">
                    <i class="fas fa-arrow-left d-block"></i>
                    </button>
                    <button type="button" class="right" style="margin-left:50px;background-color:transparent;border:0px;position:fixed;line-height:1rem;margin-top:-35px;display:none">
                    <i class="fas fa-arrow-right d-block"></i>
                    </button>
                    <button type="button" class="close" style="font-size: 20px;margin-top: 10px;" data-dismiss="modal" aria-label="Close">
                    
                    <i class="fas fa-times d-block"></i>
                    </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-center text-big mb-4">Before you proceed, you have to login to make the necessary changes</p>
                        <button type="button" class="btn btn-primary btn-block">Continue</button>
                        <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
            </div>`
                document.getElementById('body').insertAdjacentHTML("beforeEnd", htmlTemplate);
                resole();
            }).then(() => {
                let that = this;
                let nodeSlideleftbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.left');
                let nodeSliderightbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.right');
                nodeSlideleftbotton.onclick = (e) => {
                    document.getElementById('modals-slide' + this.data.nodeId).querySelector('div.modal-dialog').style.right = 'auto';
                    nodeSlideleftbotton.style.display = 'none';
                    nodeSliderightbotton.style.display = 'block';
                }
                nodeSliderightbotton.onclick = (e) => {
                    document.getElementById('modals-slide' + this.data.nodeId).querySelector('div.modal-dialog').setAttribute('style', '')
                    nodeSlideleftbotton.style.display = 'block';
                    nodeSliderightbotton.style.display = 'none';
                }
                let nodeSlide = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.close');
                nodeSlide.onclick = (e) => {
                    that.hidden();
                }
            })
        }

    }
    show() {
        let nodex = this.data.nodex;

        if (nodex > (this.data.lfwidth / 2)) {
            this.showleft();//如果节点在屏幕右边，属性面板就显示在左边，反之依然
        } else {
            this.showright();
        }
    }
    showright() {
        let nodeSlideleftbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.left');
        let nodeSliderightbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.right');
        nodeSlideleftbotton.style.display = 'block';
        nodeSliderightbotton.style.display = 'none';
        document.getElementById('modals-slide' + this.data.nodeId).querySelector('div.modal-dialog').setAttribute('style', '')
        document.getElementById('modals-slide' + this.data.nodeId).setAttribute('style', 'display:block');
    }
    showleft() {
        let nodeSlideleftbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.left');
        let nodeSliderightbotton = document.getElementById('modals-slide' + this.data.nodeId).querySelector('button.right');
        nodeSlideleftbotton.style.display = 'none';
        nodeSliderightbotton.style.display = 'block';
        document.getElementById('modals-slide' + this.data.nodeId).querySelector('div.modal-dialog').style.right = 'auto';
        document.getElementById('modals-slide' + this.data.nodeId).setAttribute('style', 'display:block');
    }
    hidden() {
        document.getElementById('modals-slide' + this.data.nodeId).setAttribute('style', 'display:none');
        this.lf.setProperties(this.data.nodeId, {
            isActived: false,
        });
    }

}
export { NodeSlide }