"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultWxTableOptions = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const material_table_1 = tslib_1.__importDefault(require("material-table"));
const tableIcons_1 = tslib_1.__importDefault(require("./tableIcons"));
const core_1 = require("@material-ui/core");
const ahooks_1 = require("ahooks");
const columns_1 = tslib_1.__importDefault(require("./columns"));
const actions_1 = tslib_1.__importDefault(require("./actions"));
const editable_1 = tslib_1.__importDefault(require("./editable"));
const localization_1 = tslib_1.__importDefault(require("./localization"));
const title_1 = tslib_1.__importDefault(require("./title"));
const components_1 = tslib_1.__importDefault(require("./components"));
const defaultMinHeight = 300;
const toolbarHeight = 64;
const footerHeight = 52;
const groupingHeight = 53;
exports.defaultWxTableOptions = {
    toolbar: true,
    paging: true,
    draggable: false,
    grouping: false,
    filtering: false,
    pageSize: 10,
    pageSizeOptions: [5, 10, 20, 30],
    thirdSortClick: false,
    showEmptyDataSourceMessage: false,
    actionsCellStyle: { margin: '0 auto', textAlign: 'center' },
};
const useStyles = core_1.makeStyles({
    wxTableContainer: {
        overflow: 'hidden',
        height: '100%',
        width: '100%',
        marginBottom: -1,
    },
});
const WxTable = ({ options, title, minHeight = defaultMinHeight, fetchData, data, insertable, deletable, actions, readonly, sortable, columns, additionalFilter, dateFilter, dateRangeFilter, externalRef, ...restProps }) => {
    const styles = useStyles();
    const ref = react_1.useRef(null);
    const tableRef = react_1.useRef(null);
    react_1.useImperativeHandle(externalRef, () => ({
        refresh: () => {
            var _a;
            (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a['onQueryChange']();
        },
    }));
    const [myData, setMyData] = react_1.useState(data || []);
    const [loading, setLoading] = react_1.useState(false);
    // 如果data发生变化，重新赋值myData
    react_1.useEffect(() => setMyData(data), [data]);
    // myData发生变化
    react_1.useEffect(() => {
        // 新增或者插入一条的情况
        if (myData === null || myData === void 0 ? void 0 : myData.some((i) => i['tableData'].isNew)) {
            // 新增后立即进入编辑状态
            onEditRow(null, myData.find((i) => i['tableData'].isNew));
        }
    }, [myData]);
    // 自适应高度
    const [tableBodyHeight, setTableBodyHeight] = react_1.useState(0);
    const myOptions = Object.assign({}, exports.defaultWxTableOptions, options, {
        maxBodyHeight: tableBodyHeight,
        minBodyHeight: tableBodyHeight,
    });
    ahooks_1.useMount(() => {
        setTimeout(() => {
            var _a;
            const totalHeight = ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || window.innerHeight;
            setTableBodyHeight(Math.max(minHeight, totalHeight -
                (myOptions.toolbar ? toolbarHeight : 0) -
                (myOptions.paging ? footerHeight : 0) -
                (myOptions.grouping ? groupingHeight : 0)));
        }, 1);
    });
    // 编辑行
    const onEditRow = (event, rowData) => {
        var _a, _b;
        (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a['dataManager'].changeRowEditing(rowData, 'update');
        (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.setState({
            ...tableRef === null || tableRef === void 0 ? void 0 : tableRef.current['dataManager'].getRenderState(),
            showAddRow: false,
        });
    };
    return (react_1.default.createElement(core_1.Paper, { ref: ref, className: styles.wxTableContainer },
        react_1.default.createElement(material_table_1.default, Object.assign({}, restProps, { isLoading: loading || restProps.isLoading, tableRef: tableRef, data: fetchData || myData, options: myOptions, columns: columns_1.default(columns), actions: actions_1.default({
                myData,
                setMyData,
                onEditRow,
                insertable,
                deletable,
                sortable,
                readonly,
                actions,
                setLoading,
            }), editable: editable_1.default({ insertable, readonly, myData, columns }), localization: localization_1.default, 
            // @ts-ignore
            icons: tableIcons_1.default, title: react_1.default.createElement(title_1.default, { title: title, dateFilter: dateFilter, dateRangeFilter: dateRangeFilter, additionalFilter: additionalFilter }), components: components_1.default }))));
};
exports.default = WxTable;
