import { FC, useRef } from "react";
import { DatePicker, Form, Input, InputNumber } from "antd";
import {
  EditableFormInstance,
  EditableProTable,
} from "@ant-design/pro-components";
import { useNavigate } from "react-router-dom";
import { uniqueId } from "lodash";
import { FileTemplateTable, FormPageFooter, PageContainer } from "@/components";
import { DEFAULT_BONUS_ITEM } from "../../constants";
import { TableBonusType } from "../../types";
import style from "./index.module.scss";

const { TextArea } = Input;
const { RangePicker } = DatePicker;

const CreateOrEditManagementIndex: FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  /** 加分项列表 */
  const bonusRef = useRef<EditableFormInstance<TableBonusType>>();
  // 减分项列表
  const deductionRef = useRef<EditableFormInstance<TableBonusType>>();

  const handleSubmit = async () => {
    if (
      !(await form.validateFields()) ||
      !(await bonusRef.current?.validateFields()) ||
      !(await deductionRef.current?.validateFields())
    )
      return;

    console.log(form.getFieldsValue());
  };

  return (
    <PageContainer title="新增考核">
      <Form labelCol={{ span: 4 }} form={form} onFinish={handleSubmit}>
        <Form.Item label="考核名称" required>
          <Input
            className="mw650"
            placeholder="请输入内容，最多20字"
            showCount
            maxLength={20}
          />
        </Form.Item>
        <Form.Item label="考核周期" required>
          <RangePicker />
        </Form.Item>
        <Form.Item label="说明">
          <TextArea
            className="mw650"
            showCount
            maxLength={500}
            placeholder="请输入内容，最多500字"
            style={{ height: 120, resize: "none" }}
          />
        </Form.Item>

        <Form.Item label="需上传资料" name="file">
          <FileTemplateTable tips="注：该资料用于此次整体考核，与具体指标无关" />
        </Form.Item>

        <Form.Item label="附加项">
          <div className={style.buttonGroup}>
            <p className={style.tips}>
              注：经加减分后，总得分不大于指标指标总分值，不小于0分
            </p>
          </div>

          <Form.Item noStyle name="bonus">
            <EditableProTable<TableBonusType>
              className="custom-pro-table mw650"
              editableFormRef={bonusRef}
              rowKey="id"
              style={{
                margin: "20px 0",
              }}
              recordCreatorProps={{
                newRecordType: "dataSource",
                creatorButtonText: "新增加分项",
                style: {
                  display: "inline-flex",
                },
                record: () => ({
                  id: uniqueId("bonus"),
                  ...DEFAULT_BONUS_ITEM,
                }),
              }}
              columns={[
                {
                  title: "加分项名称",
                  dataIndex: "name",
                  align: "center",
                  formItemProps: () => {
                    return {
                      rules: [{ required: true, message: "此项为必填项" }],
                    };
                  },
                  renderFormItem: () => (
                    <Input
                      maxLength={50}
                      variant="borderless"
                      allowClear
                      size="small"
                      placeholder="请输入内容，最多50字"
                    />
                  ),
                },
                {
                  title: "可加分值",
                  dataIndex: "num",
                  align: "center",
                  width: "150px",
                  formItemProps: () => {
                    return {
                      rules: [{ required: true, message: "此项为必填项" }],
                    };
                  },
                  renderFormItem: () => (
                    <InputNumber
                      variant="borderless"
                      size="small"
                      precision={0}
                      placeholder="请填入正整数"
                      className="w100"
                    />
                  ),
                },
                {
                  title: "操作",
                  align: "center",
                  valueType: "option",
                  render: () => {
                    return null;
                  },
                },
              ]}
              editable={{
                type: "multiple",
                actionRender: (row, config, defaultDoms) => {
                  return [defaultDoms.delete];
                },
                onValuesChange: (record, recordList) => {
                  form.setFieldValue("bonus", recordList);
                },
              }}
            />
          </Form.Item>

          <Form.Item noStyle name="deduction">
            <EditableProTable<TableBonusType>
              className="custom-pro-table mw650"
              editableFormRef={deductionRef}
              rowKey="id"
              recordCreatorProps={{
                newRecordType: "dataSource",
                creatorButtonText: "新增减分项",
                style: {
                  display: "inline-flex",
                },
                record: () => ({
                  id: uniqueId("deduction"),
                  ...DEFAULT_BONUS_ITEM,
                }),
              }}
              columns={[
                {
                  title: "减分项名称",
                  dataIndex: "name",
                  align: "center",
                  formItemProps: () => {
                    return {
                      rules: [{ required: true, message: "此项为必填项" }],
                    };
                  },
                  renderFormItem: () => (
                    <Input
                      variant="borderless"
                      size="small"
                      maxLength={50}
                      allowClear
                      placeholder="请输入内容，最多50字"
                    />
                  ),
                },
                {
                  title: "可扣分值",
                  dataIndex: "num",
                  align: "center",
                  width: "150px",
                  formItemProps: () => {
                    return {
                      rules: [{ required: true, message: "此项为必填项" }],
                    };
                  },
                  renderFormItem: () => (
                    <InputNumber
                      variant="borderless"
                      size="small"
                      precision={0}
                      placeholder="请填入正整数"
                      className="w100"
                    />
                  ),
                },
                {
                  title: "操作",
                  align: "center",
                  valueType: "option",
                  render: () => {
                    return null;
                  },
                },
              ]}
              editable={{
                type: "multiple",
                actionRender: (row, config, defaultDoms) => {
                  return [defaultDoms.delete];
                },
                onValuesChange: (record, recordList) => {
                  form.setFieldValue("deduction", recordList);
                },
              }}
            />
          </Form.Item>
        </Form.Item>

        <FormPageFooter onSubmit={handleSubmit} onCancel={() => navigate(-1)} />
      </Form>
    </PageContainer>
  );
};

export default CreateOrEditManagementIndex;
