import baseTool from '../../util/baseTool';
import {tpl} from './hoverLayerTpl';
const HoverLayer = (($) => {
    const DefaultConfig = {
        node: null,
        className: 'cd-hover-layer',
        content: ''
    };
    class hoverLayer {
        constructor(config) {
            this._config = this._getConfig(config);
            this._addEvent();
        }
        
        _getConfig(config) {
            return $.extend(true,{}, DefaultConfig, config);
        }
        _addEvent() {
            let $el = $(this._config.node);
            $el.on('mouseover', ev=>{
                this._hoverLayer = $(template.render(tpl, this._config));
                this._hoverLayer.appendTo($('body'));
                this._position();
            }).on('mouseout', ev=>{
                this._hoverLayer.remove();
                this._hoverLayer = null;
            })
        }
        _position() {
            let $el = $(this._config.node);
            let offset = $el.offset();
            let elWidth = $el.width();
            let elHeight = $el.height();
            const layerHeight = this._hoverLayer.height();
            let winHeight = $(window).height();
            let top = elHeight + offset.top;
            let left = offset.left;
            if(top + layerHeight > winHeight) {
                top = offset.top - layerHeight;
            }
            this._hoverLayer.css({
                zIndex: baseTool.getToolTipIndex(),
                top: top,
                left: left + elWidth
            });
        }
        
        dispose() {
            $(this._config.node).off('mouseover').off('mouseout');
            this._hoverLayer = null;
        }
    }
    return hoverLayer;
})($);
export default HoverLayer;