import template from "./Table.html";
import style from "antd/lib/table/style/index.css";
angular.module("esNgAntd").directive("esTable", function (esNgAntd) {
    return {
        controllerAs: "esTable",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            columns: "=",
            dSource: "=",
            rowSelection: "=",
            rowKey: "@",
            loading: "@",
            onChange: "&",
        },
        template: template,
        controller: function ($scope, $element) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                dataSource: [],
                selectedrecordKeys: [],
                selectedrecords: [],
                isSelectAll: false,
                rowKey: $scope.rowKey || "id",
                sortDirections: ["ascend", "descend"],
                sorter: {
                    field: null,
                    order: null,
                },
            };
            $scope.watch = {
                dSource: (newValue) => {
                    if (newValue !== undefined) {
                        let dataSource = [];
                        newValue.forEach((record, index) => {
                            let row = {};

                            if ($scope.rowSelection) {
                                row.checked = false;
                                row.disabled = false;
                            }

                            if (
                                $scope.rowSelection &&
                                typeof $scope.rowSelection.getCheckboxProps ===
                                    "function"
                            ) {
                                let extraAttr =
                                    $scope.rowSelection.getCheckboxProps(
                                        record
                                    );
                                row = Object.assign(row, extraAttr);
                            }

                            $scope.columns.forEach((column) => {
                                row[column.key] = column.render
                                    ? column.render(
                                          record[column.key],
                                          record,
                                          index
                                      )
                                    : record[column.key];
                            }); // 主键

                            if ($scope.rowKey !== undefined) {
                                row[$scope.state.rowKey] =
                                    record[$scope.state.rowKey];
                            } else {
                                row[$scope.state.rowKey] = index + 1;
                            }

                            dataSource[index] = row;
                        });
                        $scope.state.dataSource = dataSource;
                    }
                },
            };

            for (const key in $scope.watch) {
                $scope.$watch(key, $scope.watch[key], true);
            }

            $scope.handleSelectAll = function (event) {
                $scope.state.isSelectAll = event.target.checked;
                $scope.state.selectedrecordKeys = [];
                $scope.state.selectedrecords = [];
                $scope.state.dataSource.map((record, key) => {
                    if (record.disabled === false) {
                        record.checked = event.target.checked;
                    }

                    if (record.checked) {
                        $scope.state.selectedrecordKeys.push(key);
                        $scope.state.selectedrecords.push($scope.dSource[key]);
                    }

                    return record;
                });
                $scope.rowSelection.onChange(
                    $scope.state.selectedrecordKeys,
                    $scope.state.selectedrecords
                );
            };

            $scope.handleSelect = function (event, index) {
                let pos = $scope.state.selectedrecordKeys.findIndex(
                    (value) => value === index
                );

                if (event.target.checked && pos === -1) {
                    $scope.state.selectedrecordKeys.push(index);
                    $scope.state.selectedrecords.push($scope.dSource[index]);
                } else {
                    $scope.state.selectedrecordKeys.splice(pos, 1);
                    $scope.state.selectedrecords.splice(pos, 1);
                }

                if ($scope.state.selectedrecordKeys.length === 0) {
                    $scope.state.isSelectAll = false;
                }

                $scope.rowSelection.onChange(
                    $scope.state.selectedrecordKeys,
                    $scope.state.selectedrecords
                );
            };

            $scope.handleSorter = function (key) {
                $scope.state.sorter.field = key;

                if ($scope.state.sorter.order === null) {
                    $scope.state.sorter.order = "ascend";
                } else if ($scope.state.sorter.order === "ascend") {
                    $scope.state.sorter.order = "descend";
                } else if ($scope.state.sorter.order === "descend") {
                    $scope.state.sorter.order = null;
                    $scope.state.sorter.field = null;
                }

                $scope.onChange({
                    sorter: $scope.state.sorter,
                });
            };
        },
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            esNgAntd.createStyle("ant-table", style);
        },
    };
});