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,
    };

    state = {
        dataSource: [],
        selectedrecordKeys: [],
        selectedrecords: [],
        isSelectAll: false,
        rowKey: this.props.rowKey || "id",
    };

    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) => {
                        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);
    }
}