import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { VxeUI, getConfig, getIcon, globalEvents, getI18n, createEvent, renderEmptyElement, globalMixins } from '../../ui';
import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom';
import { getOnName } from '../../ui/src/vn';
import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
import { createComponentLog } from '../../ui/src/log';
import VxeInputComponent from '../../input/src/input';
const { errLog } = createComponentLog('table-select');
export function getRowUniqueId() {
    return XEUtils.uniqueId('row_');
}
function createReactData() {
    return {
        initialized: false,
        tableColumns: [],
        fullOptionList: [],
        panelIndex: 0,
        panelStyle: {},
        panelPlacement: null,
        triggerFocusPanel: false,
        visiblePanel: false,
        isAniVisible: false,
        isActivated: false
    };
}
function createInternalData() {
    return {
        // hpTimeout: undefined,
        // vpTimeout: undefined,
        fullRowMaps: {}
    };
}
export default {
    name: 'VxeTableSelect',
    mixins: [
        globalMixins.sizeMixin
    ],
    model: {
        prop: 'value',
        event: 'modelValue'
    },
    props: {
        value: [String, Number, Array],
        clearable: {
            type: Boolean,
            default: () => getConfig().tableSelect.clearable
        },
        placeholder: {
            type: String,
            default: () => XEUtils.eqNull(getConfig().tableSelect.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().tableSelect.placeholder
        },
        readonly: {
            type: Boolean,
            default: null
        },
        loading: Boolean,
        disabled: {
            type: Boolean,
            default: null
        },
        multiple: Boolean,
        className: [String, Function],
        prefixIcon: String,
        placement: String,
        columns: Array,
        options: Array,
        optionProps: Object,
        lazyOptions: Array,
        zIndex: Number,
        size: {
            type: String,
            default: () => getConfig().tableSelect.size || getConfig().size
        },
        popupConfig: Object,
        gridConfig: Object,
        transfer: {
            type: Boolean,
            default: null
        }
    },
    inject: {
        $xeModal: {
            default: null
        },
        $xeDrawer: {
            default: null
        },
        $xeTable: {
            default: null
        },
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        }
    },
    provide() {
        const $xeTableSelect = this;
        return {
            $xeTableSelect
        };
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = createReactData();
        const gridEvents = {};
        return Object.assign(Object.assign({}, {}), { xID,
            reactData,
            gridEvents });
    },
    computed: Object.assign(Object.assign({}, {}), { computeFormReadonly() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const $xeForm = $xeTableSelect.$xeForm;
            const { readonly } = props;
            if (readonly === null) {
                if ($xeForm) {
                    return $xeForm.readonly;
                }
                return false;
            }
            return readonly;
        },
        computeIsDisabled() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const $xeForm = $xeTableSelect.$xeForm;
            const { disabled } = props;
            if (disabled === null) {
                if ($xeForm) {
                    return $xeForm.disabled;
                }
                return false;
            }
            return disabled;
        },
        computeBtnTransfer() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const $xeForm = $xeTableSelect.$xeForm;
            const $xeTable = $xeTableSelect.$xeTable;
            const $xeModal = $xeTableSelect.$xeModal;
            const $xeDrawer = $xeTableSelect.$xeDrawer;
            const { transfer } = props;
            const popupOpts = $xeTableSelect.computePopupOpts;
            if (XEUtils.isBoolean(popupOpts.transfer)) {
                return popupOpts.transfer;
            }
            if (transfer === null) {
                const globalTransfer = getConfig().tableSelect.transfer;
                if (XEUtils.isBoolean(globalTransfer)) {
                    return globalTransfer;
                }
                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                    return true;
                }
            }
            return transfer;
        },
        computePropsOpts() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            return props.optionProps || {};
        },
        computeRowOpts() {
            const $xeTableSelect = this;
            const gridOpts = $xeTableSelect.computeGridOpts;
            return Object.assign({}, gridOpts.rowConfig, {
                isCurrent: true
            });
        },
        computeRowKeyField() {
            const $xeTableSelect = this;
            const rowOpts = $xeTableSelect.computeRowOpts;
            return rowOpts.keyField || '_X_ROW_KEY';
        },
        computeLabelField() {
            const $xeTableSelect = this;
            const propsOpts = $xeTableSelect.computePropsOpts;
            return propsOpts.label || 'label';
        },
        computeValueField() {
            const $xeTableSelect = this;
            const propsOpts = $xeTableSelect.computePropsOpts;
            return propsOpts.value || 'value';
        },
        computePopupOpts() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            return Object.assign({}, getConfig().tableSelect.popupConfig, props.popupConfig);
        },
        computeGridOpts() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            return Object.assign({}, getConfig().tableSelect.gridConfig, props.gridConfig, {
                data: undefined
            });
        },
        computeSelectGridOpts() {
            const $xeTableSelect = this;
            const gridOpts = $xeTableSelect.computeGridOpts;
            const { pagerConfig, proxyConfig } = gridOpts;
            if (proxyConfig) {
                const proxyAjax = proxyConfig.ajax;
                if (proxyAjax && proxyAjax.query) {
                    const newProxyConfig = XEUtils.clone(proxyConfig, true);
                    const ajaxMethods = proxyAjax.query;
                    if (ajaxMethods) {
                        const resConfigs = proxyConfig.response || proxyConfig.props || {};
                        Object.assign(newProxyConfig.ajax, {
                            query(params, ...args) {
                                return Promise.resolve(ajaxMethods(params, ...args)).then(rest => {
                                    let tableData = [];
                                    if (pagerConfig) {
                                        const resultProp = resConfigs.result;
                                        tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || [];
                                    }
                                    else {
                                        const listProp = resConfigs.list;
                                        tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || [];
                                    }
                                    $xeTableSelect.cacheDataMap(tableData || []);
                                    return rest;
                                });
                            }
                        });
                    }
                    return Object.assign({}, gridOpts, { proxyConfig: newProxyConfig });
                }
            }
            return gridOpts;
        },
        computeSelectLabel() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            const internalData = $xeTableSelect.internalData;
            const { value, lazyOptions } = props;
            const { fullOptionList } = reactData;
            const { fullRowMaps } = internalData;
            const valueField = $xeTableSelect.computeValueField;
            const labelField = $xeTableSelect.computeLabelField;
            if (!fullOptionList) {
                return '';
            }
            return (XEUtils.isArray(value) ? value : [value]).map(val => {
                const cacheItem = fullRowMaps[val];
                if (cacheItem) {
                    return cacheItem.item[labelField];
                }
                if (lazyOptions) {
                    const lazyItem = lazyOptions.find(item => item[valueField] === val);
                    if (lazyItem) {
                        return lazyItem[labelField];
                    }
                }
                return val;
            }).join(', ');
        },
        computePopupWrapperStyle() {
            const $xeTableSelect = this;
            const popupOpts = $xeTableSelect.computePopupOpts;
            const { height, width } = popupOpts;
            const stys = {};
            if (width) {
                stys.width = toCssUnit(width);
            }
            if (height) {
                stys.height = toCssUnit(height);
            }
            return stys;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeTableSelect = this;
            $xeTableSelect.$emit(type, createEvent(evnt, { $tableSelect: $xeTableSelect }, params));
        },
        emitModel(value) {
            const $xeTableSelect = this;
            const { _events } = $xeTableSelect;
            if (_events && _events.modelValue) {
                $xeTableSelect.$emit('modelValue', value);
            }
            else {
                $xeTableSelect.$emit('model-value', value);
            }
        },
        getRowid(option) {
            const $xeTableSelect = this;
            const nodeKeyField = $xeTableSelect.computeRowKeyField;
            const rowid = option[nodeKeyField];
            return rowid ? encodeURIComponent(rowid) : '';
        },
        getRowsByValue(modelValue) {
            const $xeTableSelect = this;
            const internalData = $xeTableSelect.internalData;
            const { fullRowMaps } = internalData;
            const rows = [];
            const vals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
            vals.forEach(val => {
                const cacheItem = fullRowMaps[val];
                if (cacheItem) {
                    rows.push(cacheItem.item);
                }
            });
            return rows;
        },
        updateModel(modelValue) {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const { multiple } = props;
            $xeTableSelect.$nextTick(() => {
                const $grid = $xeTableSelect.$refs.refGrid;
                if ($grid) {
                    const selectList = $xeTableSelect.getRowsByValue(modelValue);
                    if (selectList.length) {
                        if (multiple) {
                            $grid.setCheckboxRow(selectList, true);
                        }
                        else {
                            $grid.setRadioRow(selectList[0]);
                        }
                    }
                }
            });
        },
        loadTableColumn(columns) {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            if (!columns || !columns.length) {
                return;
            }
            const { multiple } = props;
            const tableCols = [];
            let hasRadioCol = false;
            let hasCheckboxCol = false;
            columns.forEach(column => {
                if (!hasRadioCol && column.type === 'radio') {
                    hasRadioCol = true;
                }
                else if (!hasCheckboxCol && column.type === 'checkbox') {
                    hasCheckboxCol = true;
                }
                tableCols.push(column);
            });
            if (multiple) {
                if (!hasCheckboxCol) {
                    tableCols.unshift({
                        type: 'checkbox',
                        width: 70
                    });
                }
            }
            else {
                if (!hasRadioCol) {
                    tableCols.unshift({
                        type: 'radio',
                        width: 70
                    });
                }
            }
            reactData.tableColumns = tableCols;
        },
        cacheDataMap(dataList) {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            const internalData = $xeTableSelect.internalData;
            const { options } = props;
            const rowKeyField = $xeTableSelect.computeRowKeyField;
            const valueField = $xeTableSelect.computeValueField;
            const gridOpts = $xeTableSelect.computeGridOpts;
            const { treeConfig, pagerConfig } = gridOpts;
            const rowMaps = {};
            const keyMaps = {};
            if (treeConfig) {
                // x
            }
            else {
                XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
                    let rowid = $xeTableSelect.getRowid(item);
                    if (!rowid) {
                        rowid = getRowUniqueId();
                    }
                    if (keyMaps[rowid]) {
                        errLog('vxe.error.repeatKey', [rowKeyField, rowid]);
                    }
                    keyMaps[rowid] = true;
                    const value = item[valueField];
                    if (rowMaps[value]) {
                        errLog('vxe.error.repeatKey', [valueField, value]);
                    }
                    rowMaps[value] = { item, index, items, parent: null, nodes: [] };
                });
            }
            reactData.fullOptionList = dataList || options || [];
            internalData.fullRowMaps = pagerConfig ? Object.assign({}, internalData.fullRowMaps, rowMaps) : rowMaps;
            $xeTableSelect.updateModel(props.value);
        },
        updateZindex() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            const popupOpts = $xeTableSelect.computePopupOpts;
            const customZIndex = popupOpts.zIndex || props.zIndex;
            if (customZIndex) {
                reactData.panelIndex = XEUtils.toNumber(customZIndex);
            }
            else if (reactData.panelIndex < getLastZIndex()) {
                reactData.panelIndex = nextZIndex();
            }
        },
        updatePlacement() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            const { placement } = props;
            const { panelIndex } = reactData;
            const targetElem = $xeTableSelect.$refs.refElem;
            const panelElem = $xeTableSelect.$refs.refOptionPanel;
            const btnTransfer = $xeTableSelect.computeBtnTransfer;
            const popupOpts = $xeTableSelect.computePopupOpts;
            const handleStyle = () => {
                const ppObj = updatePanelPlacement(targetElem, panelElem, {
                    placement: popupOpts.placement || placement,
                    defaultPlacement: popupOpts.defaultPlacement,
                    teleportTo: btnTransfer
                });
                const panelStyle = Object.assign(ppObj.style, {
                    zIndex: panelIndex
                });
                reactData.panelStyle = panelStyle;
                reactData.panelPlacement = ppObj.placement;
            };
            handleStyle();
            return $xeTableSelect.$nextTick().then(handleStyle);
        },
        showOptionPanel() {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const reactData = $xeTableSelect.reactData;
            const internalData = $xeTableSelect.internalData;
            const { loading } = props;
            const isDisabled = $xeTableSelect.computeIsDisabled;
            if (!loading && !isDisabled) {
                if (internalData.vpTimeout) {
                    clearTimeout(internalData.vpTimeout);
                }
                if (internalData.hpTimeout) {
                    clearTimeout(internalData.hpTimeout);
                }
                if (!reactData.initialized) {
                    reactData.initialized = true;
                    const btnTransfer = $xeTableSelect.computeBtnTransfer;
                    const panelElem = $xeTableSelect.$refs.refOptionPanel;
                    if (btnTransfer) {
                        if (panelElem) {
                            document.body.appendChild(panelElem);
                        }
                    }
                }
                reactData.isActivated = true;
                reactData.isAniVisible = true;
                internalData.vpTimeout = setTimeout(() => {
                    reactData.visiblePanel = true;
                    $xeTableSelect.updateModel(props.value);
                    internalData.vpTimeout = undefined;
                    $xeTableSelect.updatePlacement();
                }, 10);
                $xeTableSelect.updateZindex();
                $xeTableSelect.updatePlacement();
            }
        },
        hideOptionPanel() {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const internalData = $xeTableSelect.internalData;
            reactData.visiblePanel = false;
            internalData.hpTimeout = setTimeout(() => {
                reactData.isAniVisible = false;
            }, 350);
        },
        changeEvent(evnt, selectValue, row) {
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const $xeForm = $xeTableSelect.$xeForm;
            const formItemInfo = $xeTableSelect.formItemInfo;
            $xeTableSelect.emitModel(selectValue);
            if (selectValue !== props.value) {
                $xeTableSelect.dispatchEvent('change', { value: selectValue, row, option: row }, evnt);
                // 自动更新校验状态
                if ($xeForm && formItemInfo) {
                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
                }
            }
        },
        clearValueEvent(evnt, selectValue) {
            const $xeTableSelect = this;
            $xeTableSelect.changeEvent(evnt, selectValue, null);
            $xeTableSelect.dispatchEvent('clear', { value: selectValue }, evnt);
        },
        clearEvent(params, evnt) {
            const $xeTableSelect = this;
            const $grid = $xeTableSelect.$refs.refGrid;
            if ($grid) {
                $grid.clearRadioRow();
                $grid.clearCheckboxRow();
            }
            $xeTableSelect.clearValueEvent(evnt, null);
            $xeTableSelect.hideOptionPanel();
        },
        handleGlobalMousewheelEvent(evnt) {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const { visiblePanel } = reactData;
            const isDisabled = $xeTableSelect.computeIsDisabled;
            if (!isDisabled) {
                if (visiblePanel) {
                    const panelElem = $xeTableSelect.$refs.refOptionPanel;
                    if (getEventTargetNode(evnt, panelElem).flag) {
                        $xeTableSelect.updatePlacement();
                    }
                    else {
                        $xeTableSelect.hideOptionPanel();
                    }
                }
            }
        },
        handleGlobalMousedownEvent(evnt) {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const { visiblePanel } = reactData;
            const isDisabled = $xeTableSelect.computeIsDisabled;
            if (!isDisabled) {
                const el = $xeTableSelect.$refs.refElem;
                const panelElem = $xeTableSelect.$refs.refOptionPanel;
                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                if (visiblePanel && !reactData.isActivated) {
                    $xeTableSelect.hideOptionPanel();
                }
            }
        },
        handleGlobalBlurEvent() {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const { visiblePanel, isActivated } = reactData;
            if (visiblePanel) {
                $xeTableSelect.hideOptionPanel();
            }
            if (isActivated) {
                reactData.isActivated = false;
            }
            if (visiblePanel || isActivated) {
                const $input = $xeTableSelect.$refs.refInput;
                if ($input) {
                    $input.blur();
                }
            }
        },
        handleGlobalResizeEvent() {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const { visiblePanel } = reactData;
            if (visiblePanel) {
                $xeTableSelect.updatePlacement();
            }
        },
        focusEvent(evnt) {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const isDisabled = $xeTableSelect.computeIsDisabled;
            if (!isDisabled) {
                if (!reactData.visiblePanel) {
                    reactData.triggerFocusPanel = true;
                    $xeTableSelect.showOptionPanel();
                    setTimeout(() => {
                        reactData.triggerFocusPanel = false;
                    }, 150);
                }
            }
            $xeTableSelect.dispatchEvent('focus', {}, evnt);
        },
        clickEvent(evnt) {
            const $xeTableSelect = this;
            $xeTableSelect.togglePanelEvent(evnt);
            $xeTableSelect.dispatchEvent('click', {}, evnt);
        },
        blurEvent(evnt) {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            reactData.isActivated = false;
            $xeTableSelect.dispatchEvent('blur', {}, evnt);
        },
        togglePanelEvent(params) {
            const $xeTableSelect = this;
            const reactData = $xeTableSelect.reactData;
            const { $event } = params;
            $event.preventDefault();
            if (reactData.triggerFocusPanel) {
                reactData.triggerFocusPanel = false;
            }
            else {
                if (reactData.visiblePanel) {
                    $xeTableSelect.hideOptionPanel();
                }
                else {
                    $xeTableSelect.showOptionPanel();
                }
            }
        },
        radioChangeEvent(params) {
            const $xeTableSelect = this;
            const { $event, row } = params;
            const valueField = $xeTableSelect.computeValueField;
            const value = row[valueField];
            $xeTableSelect.changeEvent($event, value, row);
            $xeTableSelect.hideOptionPanel();
        },
        checkboxChangeEvent(params) {
            const $xeTableSelect = this;
            const { $grid, $event, row } = params;
            const valueField = $xeTableSelect.computeValueField;
            if ($grid) {
                const checkboxRecords = $grid.getCheckboxRecords();
                const value = checkboxRecords.map(row => {
                    return row[valueField];
                });
                $xeTableSelect.changeEvent($event, value, row);
            }
        },
        checkboxAllEvent(params) {
            const $xeTableSelect = this;
            $xeTableSelect.checkboxChangeEvent(params);
        },
        //
        // Render
        //
        renderVN(h) {
            const VxeTableGridComponent = VxeUI.getComponent('vxe-grid');
            const $xeTableSelect = this;
            const props = $xeTableSelect;
            const slots = $xeTableSelect.$scopedSlots;
            const reactData = $xeTableSelect.reactData;
            const { className, options, loading } = props;
            const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns } = reactData;
            const vSize = $xeTableSelect.computeSize;
            const isDisabled = $xeTableSelect.computeIsDisabled;
            const selectLabel = $xeTableSelect.computeSelectLabel;
            const btnTransfer = $xeTableSelect.computeBtnTransfer;
            const formReadonly = $xeTableSelect.computeFormReadonly;
            const popupOpts = $xeTableSelect.computePopupOpts;
            const selectGridOpts = $xeTableSelect.computeSelectGridOpts;
            const rowOpts = $xeTableSelect.computeRowOpts;
            const popupWrapperStyle = $xeTableSelect.computePopupWrapperStyle;
            const headerSlot = slots.header;
            const footerSlot = slots.footer;
            const prefixSlot = slots.prefix;
            const ppClassName = popupOpts.className;
            if (formReadonly) {
                return h('div', {
                    ref: 'refElem',
                    class: ['vxe-table-select--readonly', className]
                }, [
                    h('span', {
                        class: 'vxe-table-select-label'
                    }, selectLabel)
                ]);
            }
            return h('div', {
                ref: 'refElem',
                class: ['vxe-table-select', className ? (XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className) : '', {
                        [`size--${vSize}`]: vSize,
                        'is--visible': visiblePanel,
                        'is--disabled': isDisabled,
                        'is--loading': loading,
                        'is--active': isActivated
                    }]
            }, [
                h(VxeInputComponent, {
                    ref: 'refInput',
                    props: {
                        clearable: props.clearable,
                        placeholder: props.placeholder,
                        editable: false,
                        disabled: isDisabled,
                        type: 'text',
                        prefixIcon: props.prefixIcon,
                        suffixIcon: loading ? getIcon().TABLE_SELECT_LOADED : (visiblePanel ? getIcon().TABLE_SELECT_OPEN : getIcon().TABLE_SELECT_CLOSE),
                        value: loading ? getI18n('vxe.select.loadingText') : selectLabel
                    },
                    on: {
                        clear: $xeTableSelect.clearEvent,
                        click: $xeTableSelect.clickEvent,
                        focus: $xeTableSelect.focusEvent,
                        blur: $xeTableSelect.blurEvent,
                        'suffix-click': $xeTableSelect.togglePanelEvent
                    },
                    scopedSlots: prefixSlot
                        ? {
                            prefix: () => prefixSlot({})
                        }
                        : {}
                }),
                h('div', {
                    ref: 'refOptionPanel',
                    class: ['vxe-table--ignore-clear vxe-table-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $tableSelect: $xeTableSelect }) : ppClassName) : '', {
                            [`size--${vSize}`]: vSize,
                            'is--transfer': btnTransfer,
                            'ani--leave': !loading && isAniVisible,
                            'ani--enter': !loading && visiblePanel
                        }],
                    attrs: {
                        placement: reactData.panelPlacement
                    },
                    style: reactData.panelStyle
                }, initialized
                    ? [
                        h('div', {
                            class: 'vxe-table-select--panel-wrapper'
                        }, [
                            headerSlot
                                ? h('div', {
                                    class: 'vxe-table-select--panel-header'
                                }, headerSlot({}))
                                : renderEmptyElement($xeTableSelect),
                            h('div', {
                                class: 'vxe-table-select--panel-body'
                            }, [
                                h('div', {
                                    ref: 'refGridWrapper',
                                    class: 'vxe-table-select-grid--wrapper',
                                    style: popupWrapperStyle
                                }, [
                                    VxeTableGridComponent
                                        ? h(VxeTableGridComponent, {
                                            ref: 'refGrid',
                                            class: 'vxe-table-select--grid',
                                            props: Object.assign(Object.assign({}, selectGridOpts), { rowConfig: rowOpts, data: options, columns: tableColumns.length ? tableColumns : selectGridOpts.columns, height: '100%', autoResize: true }),
                                            on: Object.assign(Object.assign({}, $xeTableSelect.gridEvents), { 'radio-change': $xeTableSelect.radioChangeEvent, 'checkbox-change': $xeTableSelect.checkboxChangeEvent, 'checkbox-all': $xeTableSelect.checkboxAllEvent }),
                                            scopedSlots: Object.assign({}, slots, {
                                                header: undefined,
                                                footer: undefined,
                                                prefixSlot: undefined
                                            })
                                        })
                                        : renderEmptyElement($xeTableSelect)
                                ])
                            ]),
                            footerSlot
                                ? h('div', {
                                    class: 'vxe-table-select--panel-footer'
                                }, footerSlot({}))
                                : renderEmptyElement($xeTableSelect)
                        ])
                    ]
                    : [])
            ]);
        }
    },
    watch: {
        options() {
            const $xeTableSelect = this;
            $xeTableSelect.cacheDataMap();
        },
        columns(val) {
            const $xeTableSelect = this;
            $xeTableSelect.loadTableColumn(val);
        },
        value(val) {
            const $xeTableSelect = this;
            $xeTableSelect.updateModel(val);
        }
    },
    created() {
        const $xeTableSelect = this;
        const props = $xeTableSelect;
        $xeTableSelect.internalData = createInternalData();
        const gridEventKeys = [
            'form-submit',
            'form-reset',
            'form-collapse',
            'page-change'
        ];
        const { gridEvents } = $xeTableSelect;
        gridEventKeys.forEach(name => {
            gridEvents[getOnName(name)] = (params) => {
                $xeTableSelect.dispatchEvent(name, params, params.$event);
            };
        });
        $xeTableSelect.loadTableColumn(props.columns);
        $xeTableSelect.cacheDataMap();
    },
    mounted() {
        const $xeTableSelect = this;
        const props = $xeTableSelect;
        const reactData = $xeTableSelect.reactData;
        const VxeTableGridComponent = VxeUI.getComponent('vxe-grid');
        $xeTableSelect.$nextTick(() => {
            if (!VxeTableGridComponent) {
                errLog('vxe.error.reqComp', ['vxe-grid']);
            }
        });
        const { gridConfig } = props;
        if (gridConfig && gridConfig.proxyConfig) {
            if (gridConfig.proxyConfig.autoLoad !== false) {
                reactData.initialized = true;
            }
        }
        globalEvents.on($xeTableSelect, 'mousewheel', $xeTableSelect.handleGlobalMousewheelEvent);
        globalEvents.on($xeTableSelect, 'mousedown', $xeTableSelect.handleGlobalMousedownEvent);
        globalEvents.on($xeTableSelect, 'blur', $xeTableSelect.handleGlobalBlurEvent);
        globalEvents.on($xeTableSelect, 'resize', $xeTableSelect.handleGlobalResizeEvent);
    },
    beforeDestroy() {
        const $xeTableSelect = this;
        const reactData = $xeTableSelect.reactData;
        const internalData = $xeTableSelect.internalData;
        const panelElem = $xeTableSelect.$refs.refOptionPanel;
        if (panelElem && panelElem.parentNode) {
            panelElem.parentNode.removeChild(panelElem);
        }
        globalEvents.off($xeTableSelect, 'mousewheel');
        globalEvents.off($xeTableSelect, 'mousedown');
        globalEvents.off($xeTableSelect, 'blur');
        globalEvents.off($xeTableSelect, 'resize');
        XEUtils.assign(reactData, createReactData());
        XEUtils.assign(internalData, createInternalData());
    },
    render(h) {
        return this.renderVN(h);
    }
};
