import XEUtils from 'xe-utils';
import { getColumnList } from '../../src/util';
import { toCssUnit } from '../../../ui/src/dom';
function updatePopupStyle($xeTable) {
    const $xeGrid = $xeTable.$xeGrid;
    const $xeGantt = $xeTable.$xeGantt;
    const $xeGGWrapper = $xeGrid || $xeGantt;
    const reactData = $xeTable;
    const { customStore } = reactData;
    const customOpts = $xeTable.computeCustomOpts;
    const { mode, placement, popupOptions } = customOpts;
    const showSimple = !(mode === 'modal' || mode === 'drawer');
    const { transfer, maxHeight } = popupOptions || {};
    const customSimpleMode = $xeTable.computeCustomSimpleMode;
    const showCustomSimpleOutside = customSimpleMode === 'outside';
    const bodyEl = document.documentElement;
    let wrapperEl = $xeTable.$refs.refElem;
    let popupTop = 0;
    let popupMaxHeight = 0;
    const popupStys = {};
    if ($xeGantt) {
        const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
        if (ganttContainerElem) {
            wrapperEl = ganttContainerElem;
        }
    }
    const tableRect = wrapperEl.getBoundingClientRect();
    // 多种模式，指定元素插入
    if (showSimple && transfer) {
        popupTop = tableRect.top + bodyEl.scrollTop;
        popupMaxHeight = XEUtils.eqNull(maxHeight) ? 360 : maxHeight;
    }
    else if (showCustomSimpleOutside) {
        if ($xeGGWrapper && wrapperEl) {
            popupTop = wrapperEl.offsetTop;
        }
        popupMaxHeight = XEUtils.eqNull(maxHeight) ? 360 : maxHeight;
    }
    else {
        // 判断面板不能大于表格高度
        if (wrapperEl) {
            popupMaxHeight = wrapperEl.clientHeight - 22;
        }
        popupMaxHeight = Math.max(88, popupMaxHeight);
    }
    let popupMxHeight = 0;
    if (!(placement === 'left' || placement === 'right')) {
        popupMxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight;
    }
    if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
        if (popupTop) {
            popupStys.top = toCssUnit(popupTop);
        }
    }
    if (showSimple && transfer) {
        if (placement === 'bottom-left' || placement === 'bottom-right') {
            popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
        }
        if (placement === 'top-left' || placement === 'bottom-left') {
            popupStys.left = toCssUnit(tableRect.left);
        }
        else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
            popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
        }
    }
    if (popupMxHeight) {
        popupStys.maxHeight = toCssUnit(popupMxHeight);
    }
    customStore.popupStyle = popupStys;
    customStore.maxHeight = popupMxHeight;
    return $xeTable.$nextTick();
}
function emitCustomEvent($xeTable, type, evnt) {
    const $xeGrid = $xeTable.$xeGrid;
    const $xeGantt = $xeTable.$xeGantt;
    const comp = $xeGrid || $xeGantt || $xeTable;
    comp.dispatchEvent('custom', { type }, evnt);
}
export default {
    methods: {
        _getCustomVisible() {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            return customStore.visible;
        },
        _openCustom() {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const $xeGrid = $xeTable.$xeGrid;
            const $xeGantt = $xeTable.$xeGantt;
            const $xeGGWrapper = $xeGrid || $xeGantt;
            const { initStore, customStore } = reactData;
            const customOpts = $xeTable.computeCustomOpts;
            const { mode, popupOptions } = customOpts;
            const showSimple = !(mode === 'modal' || mode === 'drawer');
            const { transfer } = popupOptions || {};
            const customSimpleMode = $xeTable.computeCustomSimpleMode;
            const showCustomSimpleOutside = customSimpleMode === 'outside';
            let cpToElem = $xeTable.$refs.refCustomContainerElem;
            // 多种模式，指定元素插入
            if (showSimple && transfer) {
                cpToElem = document.body;
            }
            else {
                if (showCustomSimpleOutside && $xeGGWrapper) {
                    const popupContainerElem = $xeGGWrapper.$refs.refPopupContainerElem;
                    if (popupContainerElem) {
                        cpToElem = popupContainerElem;
                    }
                }
            }
            if (cpToElem) {
                const customPopupToElem = $xeTable.$refs.refCustomPopupToElem;
                if (customPopupToElem && customPopupToElem.parentElement !== cpToElem) {
                    cpToElem.appendChild(customPopupToElem);
                }
            }
            if (internalData.customPopupToElem !== cpToElem) {
                reactData.ctPopupFlag++;
            }
            internalData.customPopupToElem = cpToElem;
            customStore.visible = true;
            initStore.custom = true;
            $xeTable.handleUpdateCustomColumn();
            $xeTable.checkCustomStatus();
            updatePopupStyle($xeTable);
            return $xeTable.$nextTick().then(() => updatePopupStyle($xeTable));
        },
        _closeCustom() {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            const customOpts = $xeTable.computeCustomOpts;
            if (customStore.visible) {
                customStore.visible = false;
                if (!customOpts.immediate) {
                    $xeTable.handleCustom();
                }
            }
            return $xeTable.$nextTick();
        },
        _toggleCustom() {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            if (customStore.visible) {
                return $xeTable.closeCustom();
            }
            return $xeTable.openCustom();
        },
        _saveCustom() {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { customColumnList, aggHandleFields, rowGroupList } = reactData;
            const customOpts = $xeTable.computeCustomOpts;
            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
            XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
                if (parentColumn) {
                    // 更新子列信息
                    column.fixed = parentColumn.fixed;
                }
                else {
                    if (allowSort) {
                        const sortIndex = index + 1;
                        column.renderSortNumber = sortIndex;
                    }
                    if (allowFixed) {
                        column.fixed = column.renderFixed;
                    }
                }
                if (allowResizable) {
                    if (column.renderVisible && (!column.children || !column.children.length)) {
                        if (column.renderResizeWidth !== column.renderWidth) {
                            column.resizeWidth = column.renderResizeWidth;
                            column.renderWidth = column.renderResizeWidth;
                        }
                    }
                }
                if (allowVisible) {
                    column.visible = column.renderVisible;
                }
                if (allowGroup && allowValues) {
                    column.aggFunc = column.renderAggFn;
                }
            });
            reactData.isCustomStatus = true;
            if (allowGroup && allowValues && !!$xeTable.handlePivotTableAggregateData) {
                if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
                    // 更新数据分组
                    if (aggHandleFields.length) {
                        $xeTable.setRowGroups(aggHandleFields);
                    }
                    else {
                        $xeTable.clearRowGroups();
                    }
                }
                else if (allowValues) {
                    // 更新聚合函数
                    $xeTable.handleUpdateAggData();
                }
            }
            if (allowSort) {
                internalData.collectColumn = customColumnList;
            }
            return $xeTable.saveCustomStore('confirm');
        },
        _cancelCustom() {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customColumnList, customStore } = reactData;
            const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
            const customOpts = $xeTable.computeCustomOpts;
            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
            XEUtils.eachTree(customColumnList, column => {
                const colid = column.getKey();
                const visible = !!oldVisibleMaps[colid];
                const fixed = oldFixedMaps[colid] || '';
                if (allowVisible) {
                    column.renderVisible = visible;
                    column.visible = visible;
                }
                if (allowFixed) {
                    column.renderFixed = fixed;
                    column.fixed = fixed;
                }
                if (allowSort) {
                    column.renderSortNumber = oldSortMaps[colid] || 0;
                }
                if (allowResizable) {
                    column.renderResizeWidth = column.renderWidth;
                }
            }, { children: 'children' });
            return $xeTable.$nextTick();
        },
        _resetCustom(options) {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { rowGroupList } = reactData;
            const { collectColumn } = internalData;
            const customOpts = $xeTable.computeCustomOpts;
            const { checkMethod } = customOpts;
            const opts = Object.assign({
                visible: true,
                resizable: options === true,
                fixed: options === true,
                sort: options === true,
                aggFunc: options === true
            }, options);
            const allCols = [];
            XEUtils.eachTree(collectColumn, (column) => {
                if (opts.resizable) {
                    column.resizeWidth = 0;
                }
                if (opts.fixed) {
                    column.fixed = column.defaultFixed;
                }
                if (opts.sort) {
                    column.renderSortNumber = column.sortNumber;
                    column.parentId = column.defaultParentId;
                }
                if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                    column.visible = column.defaultVisible;
                }
                if (opts.aggFunc) {
                    column.aggFunc = column.defaultAggFunc;
                    column.renderAggFn = column.defaultAggFunc;
                }
                column.renderResizeWidth = column.renderWidth;
                allCols.push(column);
            });
            if (opts.sort) {
                const newCollectCols = XEUtils.toArrayTree(XEUtils.orderBy(allCols, 'renderSortNumber'), { key: 'id', parentKey: 'parentId', children: 'children' });
                internalData.collectColumn = newCollectCols;
                internalData.tableFullColumn = getColumnList(newCollectCols);
            }
            reactData.isCustomStatus = false;
            return $xeTable.handleCustom().then(() => {
                if (opts.aggFunc && $xeTable.handlePivotTableAggregateData) {
                    const rowGroupFields = $xeTable.computeRowGroupFields;
                    if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
                        if (rowGroupFields && rowGroupFields.length) {
                            $xeTable.setRowGroups(rowGroupFields);
                        }
                        else {
                            $xeTable.clearRowGroups();
                        }
                    }
                    else {
                        $xeTable.handleUpdateAggData();
                    }
                }
                $xeTable.saveCustomStore('reset');
            });
        },
        _toggleCustomAllCheckbox() {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            const isAll = !customStore.isAll;
            return $xeTable.setCustomAllCheckbox(isAll);
        },
        _setCustomAllCheckbox(checked) {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            const { customColumnList } = reactData;
            const customOpts = $xeTable.computeCustomOpts;
            const { checkMethod, visibleMethod } = customOpts;
            const isAll = !!checked;
            if (customOpts.immediate) {
                XEUtils.eachTree(customColumnList, (column) => {
                    if (visibleMethod && !visibleMethod({ $table: $xeTable, column })) {
                        return;
                    }
                    if (checkMethod && !checkMethod({ $table: $xeTable, column })) {
                        return;
                    }
                    column.visible = isAll;
                    column.renderVisible = isAll;
                    column.halfVisible = false;
                });
                customStore.isAll = isAll;
                reactData.isCustomStatus = true;
                $xeTable.handleCustom();
                $xeTable.saveCustomStore('update:visible');
            }
            else {
                XEUtils.eachTree(customColumnList, (column) => {
                    if (visibleMethod && !visibleMethod({ $table: $xeTable, column })) {
                        return;
                    }
                    if (checkMethod && !checkMethod({ $table: $xeTable, column })) {
                        return;
                    }
                    column.renderVisible = isAll;
                    column.halfVisible = false;
                });
                customStore.isAll = isAll;
            }
            $xeTable.checkCustomStatus();
        },
        checkCustomStatus() {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { customStore } = reactData;
            const { collectColumn } = internalData;
            const customOpts = $xeTable.computeCustomOpts;
            const { checkMethod } = customOpts;
            customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ $table: $xeTable, column }) : false) || column.renderVisible);
            customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ $table: $xeTable, column })) && (column.renderVisible || column.halfVisible));
        },
        emitCustomEvent(type, evnt) {
            const $xeTable = this;
            $xeTable.dispatchEvent('custom', { type }, evnt);
        },
        triggerCustomEvent(evnt) {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            if (customStore.visible) {
                $xeTable.closeCustom();
                emitCustomEvent($xeTable, 'close', evnt);
            }
            else {
                customStore.btnEl = evnt.target;
                $xeTable.openCustom();
                emitCustomEvent($xeTable, 'open', evnt);
            }
        },
        customOpenEvent(evnt) {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            if (customStore.visible) {
                customStore.activeBtn = true;
                customStore.btnEl = evnt.target;
                $xeTable.openCustom();
                emitCustomEvent($xeTable, 'open', evnt);
            }
        },
        customCloseEvent(evnt) {
            const $xeTable = this;
            const reactData = $xeTable;
            const { customStore } = reactData;
            if (customStore.visible) {
                customStore.activeBtn = false;
                $xeTable.closeCustom();
                emitCustomEvent($xeTable, 'close', evnt);
            }
        },
        handleUpdateCustomColumn() {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { customStore } = reactData;
            const { collectColumn } = internalData;
            if (customStore.visible) {
                const sortMaps = {};
                const fixedMaps = {};
                const visibleMaps = {};
                XEUtils.eachTree(collectColumn, column => {
                    const colid = column.getKey();
                    column.renderFixed = column.fixed;
                    column.renderVisible = column.visible;
                    column.renderResizeWidth = column.renderWidth;
                    sortMaps[colid] = column.renderSortNumber;
                    fixedMaps[colid] = column.fixed;
                    visibleMaps[colid] = column.visible;
                });
                customStore.oldSortMaps = sortMaps;
                customStore.oldFixedMaps = fixedMaps;
                customStore.oldVisibleMaps = visibleMaps;
                reactData.customColumnList = collectColumn.slice(0);
            }
        },
        handleCustomStyle() {
            const $xeTable = this;
            return updatePopupStyle($xeTable);
        }
    }
};
