import template from "./Table.html";
import style from "antd/lib/table/style/index.css";

class Table {
    useModules = ["esNgAntd"];

    props = {
        columns: Array,
        dSource: Array,
        rowSelection: Object,
        rowKey: String,
        loading: Number,
        onChange: Function,
        size: String,
    };

    state = {
        size: this.props.size || "default",
        dataSource: [],
        selectedrecordKeys: [],
        selectedrecords: [],
        isSelectAll: false,
        rowKey: this.props.rowKey || "id",
        sortDirections: ["ascend", "descend"],
        sorter: {
            field: null,
            order: null,
        }
    };

    template = template;

    watch = {
        dSource: (newValue) => {
            if (newValue !== undefined) {
                let dataSource = [];
                newValue.forEach((record, index) => {
                    let row = {};
                    if (this.props.rowSelection) {
                        row.checked = false;
                        row.disabled = false;
                    }
                    if (
                        this.props.rowSelection &&
                        typeof this.props.rowSelection.getCheckboxProps ===
                            "function"
                    ) {
                        let extraAttr =
                            this.props.rowSelection.getCheckboxProps(record);
                        row = Object.assign(row, extraAttr);
                    }
                    this.props.columns.forEach((column) => {
                        // 排序
                        if (column.sortOrder) {
                            this.state.sorter.field = column.key;
                            this.state.sorter.order = column.sortOrder;
                        }
                        row[column.key] = column.render
                            ? column.render(record[column.key], record, index)
                            : record[column.key];
                    });
                    // 主键
                    if (this.props.rowKey !== undefined) {
                        row[this.state.rowKey] = record[this.state.rowKey];
                    } else {
                        row[this.state.rowKey] = index + 1;
                    }
                    dataSource[index] = row;
                });
                this.state.dataSource = dataSource;
            }
        },
    };

    constructor() {
        esNgAntd.createStyle("ant-table", style);
    }

    handleSelectAll(event) {
        this.state.isSelectAll = event.target.checked;
        this.state.selectedrecordKeys = [];
        this.state.selectedrecords = [];
        this.state.dataSource.map((record, key) => {
            if (record.disabled === false) {
                record.checked = event.target.checked;
            }
            if (record.checked) {
                this.state.selectedrecordKeys.push(key);
                this.state.selectedrecords.push(this.props.dSource[key]);
            }
            return record;
        });
        this.props.rowSelection.onChange(
            this.state.selectedrecordKeys,
            this.state.selectedrecords
        );
    }

    handleSelect(event, index) {
        let pos = this.state.selectedrecordKeys.findIndex(
            (value) => value === index
        );
        if (event.target.checked && pos === -1) {
            this.state.selectedrecordKeys.push(index);
            this.state.selectedrecords.push(this.props.dSource[index]);
        } else {
            this.state.selectedrecordKeys.splice(pos, 1);
            this.state.selectedrecords.splice(pos, 1);
        }
        if (this.state.selectedrecordKeys.length === 0) {
            this.state.isSelectAll = false;
        }
        this.props.rowSelection.onChange(
            this.state.selectedrecordKeys,
            this.state.selectedrecords
        );
    }

    handleSorter(key) {
        this.state.sorter.field = key;
        if (this.state.sorter.order === null) {
            this.state.sorter.order = "ascend";
        } else if (this.state.sorter.order === "ascend") {
            this.state.sorter.order = "descend"
        } else if (this.state.sorter.order === "descend") {
            this.state.sorter.order = null
            this.state.sorter.field = null;
        }
        this.props.onChange({
            sorter: this.state.sorter,
        });
    }
}