let layerIdCount = 0;   // 弹窗ID
const zIndex = 10000;   // 层级数
let layerWindow: any;
// ------------------------------------load--------------------------
let loadDom: any = {
    body: "",
    bg: "",
    layer: "",
    timer: null,
    layerCurr: false,
}
let loadParams: any = {}

/**
 * 加载弹窗
 * @param time 毫秒数
 */
function load(object?: any) {
    loadInit();
    // params init
    loadParams = object || {};
    loadParams.time = loadParams.time ? Number(loadParams.time) : 0;
    loadParams.icon = loadParams.icon || '';
    loadParams.message = loadParams.message || '';
    loadInitContainer();
    loadInitContent(loadParams.message);
    loadClose();
    return layerIdCount;
}

/**load初始化 */
function loadInit() {
    // init 防止出现多次弹窗
    if (loadDom.body && loadDom.bg) {
        clearTimeout(loadDom.timer);
        loadDom.body.removeChild(loadDom.bg);
        loadDom.bg = null;
        loadDom.timer = null;
    }
    loadDom.layerCurr = true;
    layerIdCount++;
}

/**load初始化背景弹窗 */
function loadInitContainer() {
    loadDom.body = document.getElementsByTagName('body')[0];
    loadDom.bg = document.createElement('div');
    loadDom.bg.setAttribute("id", "layer-load" + layerIdCount);
    loadDom.bg.setAttribute("class", "layer-load-container");
    loadDom.bg.style.zIndex = zIndex + layerIdCount;
    loadDom.body.appendChild(loadDom.bg);
}

/**load初始化内容 */
function loadInitContent(message: string) {
    // message
    if (message !== '') {
        var containerDom = document.createElement('div');
        containerDom.setAttribute("class", "layer-content-container");

        loadDom.layer = document.createElement('div');
        loadDom.layer.setAttribute("class", "layer-content");
        loadInitIcon();
        let msgDiv = document.createElement('div');
        msgDiv.setAttribute("class", "load-msg-content")
        let msg = document.createTextNode(message);
        msgDiv.appendChild(msg);

        loadDom.layer.appendChild(msgDiv);
        containerDom.appendChild(loadDom.layer);
        loadDom.bg.appendChild(containerDom);

    } else {
        loadDom.layer = document.createElement('div');
        loadDom.layer.setAttribute("class", "layer-content");
        loadInitIcon();
        loadDom.bg.appendChild(loadDom.layer);
    }

}

/**load初始化icon */
function loadInitIcon() {
    let iconDiv = document.createElement('div');
    let icon = document.createElement('icon');
    iconDiv.setAttribute("class", "load-icon-content animation-rotate")
    icon.setAttribute("class", "icon " + msgIconType(loadParams.icon || 'loading'));
    iconDiv.appendChild(icon);
    loadDom.layer.appendChild(iconDiv);
}

/**msg关闭弹窗 */
function loadClose() {
    if (loadParams.time) {
        loadDom.timer = setTimeout(() => {
            if (loadDom.bg !== null) {
                loadDom.body.removeChild(loadDom.bg);
                loadDom.bg = null;
                loadDom.layerCurr = false;
            }
        }, loadParams.time)
    }
}

// ------------------------------------msg---------------------------
let msgDom: any = {
    body: "",
    bg: "",
    layer: "",
    timer: null,
}
let msgParams: any = {}

/**
 * 提示弹窗
 * @message 提示信息
 * @object {type: 'success', time: 2000}
 */
function msg(message: string, object: any = {}) {
    msgInit();
    // params init
    msgParams = object;
    msgParams.time = Number(msgParams.time) || 2000;
    msgParams.type = msgParams.type || '';
    msgInitContainer();
    msgInitContent(message);
    msgClose();
}

/**msg初始化 */
function msgInit() {
    // init 防止出现多次弹窗
    if (msgDom.body && msgDom.bg) {
        clearTimeout(msgDom.timer);
        msgDom.body.removeChild(msgDom.bg);
        msgDom.bg = null;
        msgDom.timer = null;
    }
    layerIdCount++;
}

/**msg初始化背景弹窗 */
function msgInitContainer() {
    msgDom.body = document.getElementsByTagName('body')[0];
    msgDom.bg = document.createElement('div');
    msgDom.bg.setAttribute("id", "layer-msg" + layerIdCount);
    msgDom.bg.setAttribute("class", "layer-message-container");
    msgDom.bg.style.zIndex = zIndex + layerIdCount;
    msgDom.body.appendChild(msgDom.bg);
}

/**msg初始化内容 */
function msgInitContent(message: string) {
    msgDom.layer = document.createElement('div');
    msgDom.layer.setAttribute("class", "layer-content");
    // 添加icon
    if (msgParams.type) {
        let icon = document.createElement('icon');
        icon.setAttribute("class", "icon " + msgIconType(msgParams.type) + " mar-r-mini");
        msgDom.layer.appendChild(icon);
    }
    // message
    let msg = document.createTextNode(message);
    msgDom.layer.appendChild(msg);
    msgDom.bg.appendChild(msgDom.layer)
}

/**
 * msg图标类型
 */
function msgIconType(type: string): string {
    switch (type) {
        case 'success':
            return 'icon-Success color-success';
        case 'warning':
            return 'icon-cycel-exclamation color-warning';
        case 'error':
            return 'icon-deep-error color-danger';
        case 'info':
            return 'icon-tips color-info';
        case 'loading':
            return 'icon-loading color-info';
        default:
            return '';
    }
}

/**msg关闭弹窗 */
function msgClose() {
    msgDom.timer = setTimeout(() => {
        if (msgDom.bg !== null) {
            msgDom.body.removeChild(msgDom.bg);
            msgDom.bg = null;
        }
    }, msgParams.time)
}

// ------------------------------------layer---------------------------
let layerArr: Array<any> = [];     // 保存着所打开的弹窗数据，{layerIndex, params, dom, location }

let domInit: any = {                // 节点信息
    body: "",                   // 全局
    bg: "",                     // 背景
    layer: "",                  // 弹窗
    title: "",                  // 标题
    info: "",                   // 信息
    element: "",                // 映射节点
    parent: "",                 // 映射节点的父节点
    btn: "",                    // 按钮
    shadow: "",                 // 阴影
}

let locationInit: any = {
    left: 0,
    top: 0,
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    layerWidth: 0,
    layerHeight: 0,
}

/**
 * 打开弹窗
 * @param {Object} object {
 *     icon：头部图标
 * }
 */
function open(object: any = {}) {
    layerIdCount++;
    layerArr.push({
        layerIndex: layerIdCount,
        params: object,
        dom: JSON.parse(JSON.stringify(domInit)),
        location: JSON.parse(JSON.stringify(locationInit)),
    });
    let layerItem = layerArr[layerArr.length - 1];
    setTimeout(() => {
        initParams(layerItem.params);
        layerItem.dom.body = document.getElementsByTagName('body')[0];
        layerItem.dom.body.setAttribute('style', 'overflow: hidden;');
        initBackground(layerItem.dom, layerItem.layerIndex);
        initLayer(layerItem.dom);
        initLayerTitle(layerItem.params, layerItem.dom, layerItem.layerIndex);
        initLayerDetail(layerItem.params, layerItem.dom);
        initLayerBtn(layerItem.params, layerItem.dom, layerItem.layerIndex);
        initLocation(layerItem.params, layerItem.dom, layerItem.location);
        initMoveEvent(layerItem.params, layerItem.dom, layerItem.location);
    }, 100)
    return layerItem.layerIndex;
}

/**
 * 关闭弹窗
 * @layerIndex  弹窗Index
 * @isCancel    用来区分是否触发外部传入的cancel方法
 */
function close(layerIndex: number, isCancel: boolean = true) {
    let layerArrIndex = layerArr.findIndex(item => layerIndex === item.layerIndex);
    if (layerArr[layerArrIndex]) {
        // 关闭普通弹窗
        let dom = layerArr[layerArrIndex].dom;
        dom.title.onmousedown = '';
        dom.element.style.display = '';
        dom.parent.appendChild(dom.element)
        dom.body.setAttribute('style', '');
        let elem = document.getElementById('layer-open' + (layerIndex))
        // @ts-ignore
        elem && dom.body.removeChild(elem);
        // 触发传入的cancel方法
        elem && isCancel && layerArr[layerArrIndex].params.cancel && layerArr[layerArrIndex].params.cancel();
        elem && layerArr.splice(layerArrIndex, 1);
    } else if (loadDom.layerCurr) {
        // 关闭加载弹窗
        loadDom.body.removeChild(loadDom.bg);
        loadDom.bg = null;
        loadDom.layerCurr = false;
    }
}

/**
 * 关闭弹窗All
 */
function closeAll() {
    for(let i in layerArr){
        let elem: any = document.getElementById('layer-open' + layerArr[i].layerIndex);
        if(elem){
            // 返还并隐藏原有弹窗元素
            layerArr[i].dom.parent.appendChild(layerArr[i].dom.element)
            layerArr[i].dom.element.setAttribute('style', '');
            document.body.removeChild(elem);
        }
    }
    document.body.setAttribute('style', '');
    layerArr = [];
}

/**
 * 初始化参数
 */
function initParams(params: any) {
    params.icon = params.icon ? params.icon : '';
    params.btn = params.btn ? params.btn : {};
}

/**
 * 初始化弹窗背景
 */
function initBackground(dom: any, id: number) {
    dom.bg = document.createElement('div');
    dom.bg.setAttribute("id", "layer-open" + id);
    dom.bg.setAttribute("class", "layer-container");
    dom.bg.style.zIndex = zIndex + id;
    dom.body.appendChild(dom.bg);
}

/**
 * 初始话弹窗
 */
function initLayer(dom: any) {
    dom.layer = document.createElement('div');
    dom.layer.setAttribute("class", "layer-content");
    dom.layer.setAttribute("style", "opacity: 0");
    dom.bg.appendChild(dom.layer);
}

/**
 * 初始化弹窗标题
 */
function initLayerTitle(params: any, dom: any, layerIndex: number) {
    dom.title = document.createElement('div');
    dom.title.setAttribute("class", "layer-title");
    dom.layer.appendChild(dom.title);
    dom.layer.addEventListener('click', (e: any) => {
        // e.preventDefault();
        e.stopPropagation();
    })

    // 左侧
    let left = document.createElement('div');
    left.setAttribute("class", "layer-title-left");
    dom.title.appendChild(left);
    // 添加icon
    if (params.icon) {
        let icon = document.createElement('icon');
        icon.setAttribute("class", "icon " + params.icon + " mar-r-mini");
        left.appendChild(icon);
    }
    // 添加标题
    let title = document.createTextNode(params.title ? params.title : '标题');
    left.appendChild(title);
    // 右侧
    let right = document.createElement('div');
    right.setAttribute("class", "layer-title-right");
    dom.title.appendChild(right);
    // 添加icon
    let closeIcon = document.createElement('icon');
    closeIcon.setAttribute("class", "icon icon-cancel");
    closeIcon.onclick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        // 回调参数
        let $event: any = {
            type: 'icon',
        }
        let isClose = params.cancel && params.cancel($event);
        isClose !== false && close(layerIndex, false);
    }
    right.appendChild(closeIcon);
}

/**
 * 初始化弹窗内容
 */
function initLayerDetail(params: any, dom: any) {
    dom.info = document.createElement('div');
    dom.info.setAttribute("class", "layer-detail");
    dom.layer.appendChild(dom.info);
    dom.element = document.getElementById(params.id);
    dom.element.setAttribute("class", dom.element.className + " flex");
    setTimeout(() => {
        dom.element.style.display = 'block';
    }, 10)
    // @ts-ignore
    dom.parent = dom.element.parentElement;
    // @ts-ignore
    dom.info.append(dom.element);
}

/**
 * 初始化弹窗按钮
 */
function initLayerBtn(params: any, dom: any, layerIndex: number) {
    if (params.btn.confirm || params.btn.cancel) {
        dom.btn = document.createElement('div');
        dom.btn.setAttribute("class", "layer-btn");
        dom.info.appendChild(dom.btn);
    }

    if (params.btn.confirm) {
        let btnConfirm = document.createElement('button');
        btnConfirm.setAttribute("class", "efly-button btn-primary");
        dom.btn.appendChild(btnConfirm)
        let confirm = document.createTextNode(params.btn.confirm);
        btnConfirm.appendChild(confirm);
        btnConfirm.onclick = () => {
            params.confirm && params.confirm();
        }
    }

    if (params.btn.cancel) {
        let btnCancel = document.createElement('button');
        btnCancel.setAttribute("class", "efly-button btn-outline-primary");
        dom.btn.appendChild(btnCancel)
        let cancel = document.createTextNode(params.btn.cancel);
        btnCancel.appendChild(cancel);
        btnCancel.onclick = () => {
            // 回调参数
            let $event: any = {
                type: 'button',
            }
            let isClose = params.cancel && params.cancel($event);
            isClose !== false && close(layerIndex, false);
        };
    }
}

/**
 * 初始化定位信息
 */
function initLocation(params: any, dom: any, location: any) {
    setTimeout(() => {
        location.width = dom.body.offsetWidth;
        location.height = dom.body.offsetHeight;
        location.layerWidth = params.area.width ? +params.area.width.split('px')[0] : dom.layer.offsetWidth;
        location.layerHeight = params.area.height ? +params.area.height.split('px')[0] : dom.layer.offsetHeight;
        location.left = (location.width - location.layerWidth) / 2;
        location.top = (location.height - location.layerHeight) / 2;
        dom.layer.setAttribute("style", "left: " + location.left + "px;top:" + location.top + 'px;' + (params.area.width ? 'width:' + params.area.width + ';' : '') + (params.area.height ? 'height:' + params.area.height + ';' : ''));
        // @ts-ignore
        layerWindow.onresize = (e) => {
            location.left = (dom.body.offsetWidth - location.layerWidth) / 2;
            location.top = (dom.body.offsetHeight - location.layerHeight) / 2;
            location.width = dom.body.offsetWidth;
            location.height = dom.body.offsetHeight;
            dom.layer.setAttribute("style", "left: " + location.left + "px;top:" + location.top + 'px;' + (params.area.width ? 'width:' + params.area.width + ';' : '') + (params.area.height ? 'height:' + params.area.height + ';' : ''));
        }
    }, 10)

}

/**
 * 初始化弹窗标题移动事件
 */
function initMoveEvent(params: any, dom: any, location: any) {
    dom.title.onmousedown = ((e: any) => {
        location.x = e.pageX;
        location.y = e.pageY;
        dom.title.onmousemove = ((e2: any) => {
            // x轴移动
            location.left -= (location.x - e2.pageX);
            location.x = e2.pageX;
            if (location.left >= location.width - location.layerWidth) {
                location.left = location.width - location.layerWidth;
            } else if (location.left <= 0) {
                location.left = 0;
            }
            // y轴移动
            location.top -= (location.y - e2.pageY);
            location.y = e2.pageY;
            if (location.top >= location.height - location.layerHeight) {
                location.top = location.height - location.layerHeight;
            } else if (location.top <= 0) {
                location.top = 0;
            }
            dom.layer.setAttribute("style", "left: " + location.left + "px;top:" + location.top + 'px;' + (params.area.width ? 'width:' + params.area.width + ';' : '') + (params.area.height ? 'height:' + params.area.height + ';' : ''));
        })
        dom.title.onmouseup = ((e: any) => {
            dom.title.onmouseup = '';
            dom.title.onmousemove = '';
        })
    })
    dom.layer.onmouseup = ((e: any) => {
        dom.title.onmouseup = '';
        dom.title.onmousemove = '';
    })
    dom.body.onmouseup = ((e: any) => {
        dom.title.onmouseup = '';
        dom.title.onmousemove = '';
    })
}

function init(window: any) {
    layerWindow = window;
}


export default {
    init,
    open,
    close,
    closeAll,
    msg,
    load,
}