import {
  EditableProTable,
  EditableProTableProps,
} from "@ant-design/pro-components";
import { Input, InputNumber } from "antd";
import { uniqueId } from "lodash";
import { forwardRef, Key, useImperativeHandle, useState } from "react";

export interface InspectionEditableProps
  extends EditableProTableProps<any, any> {}

export interface InspectionEditableMethods {
  setEditableRowKeys(v: Key[]): void;
}

const DEFAULT_INSPECTION_ITEM = {
  name: "",
  one: "",
  two: "",
  three: "",
};

export const InspectionEditable = forwardRef<
  InspectionEditableMethods,
  InspectionEditableProps
>((props, ref) => {
  const [editableKeys, setEditableRowKeys] = useState<Key[]>();

  useImperativeHandle(ref, () => ({
    setEditableRowKeys,
  }));

  return (
    <EditableProTable
      {...props}
      rowKey="_id"
      controlled
      className="mw650"
      columns={[
        {
          title: "要点名称",
          align: "center",
          dataIndex: "name",
          width: 300,
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          renderFormItem: () => {
            return <Input placeholder="请输入内容，最多50字" maxLength={50} />;
          },
        },
        {
          title: "一级博物馆",
          align: "center",
          dataIndex: "one",
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          renderFormItem: () => {
            return (
              <InputNumber
                placeholder="请填入正整数"
                min={0}
                precision={0}
                controls={false}
              />
            );
          },
        },
        {
          title: "二级博物馆",
          align: "center",
          dataIndex: "two",
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          renderFormItem: () => {
            return (
              <InputNumber
                placeholder="请填入正整数"
                min={0}
                precision={0}
                controls={false}
              />
            );
          },
        },
        {
          title: "三级博物馆",
          align: "center",
          dataIndex: "three",
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          renderFormItem: () => {
            return (
              <InputNumber
                placeholder="请填入正整数"
                min={0}
                precision={0}
                controls={false}
              />
            );
          },
        },
        {
          title: "操作",
          width: 100,
          align: "center",
          valueType: "option",
          render: (text, record, _, action) => {
            return (
              <a
                key="editable"
                onClick={() => {
                  action?.startEditable?.(record.id);
                }}
              >
                编辑
              </a>
            );
          },
        },
      ]}
      editable={{
        type: "multiple",
        // editableKeys,
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.save, defaultDoms.delete];
        },
      }}
      recordCreatorProps={{
        type: "primary",
        newRecordType: "dataSource",
        creatorButtonText: "新增考察要点",
        record: () => ({
          _id: uniqueId("insepction"),
          ...DEFAULT_INSPECTION_ITEM,
        }),
      }}
    />
  );
});
