import { FC } from "react";
import { Form, Input, Tree } from "antd";
import { useNavigate } from "react-router-dom";
import { FormPageFooter, PageContainer } from "@/components";

const { TextArea } = Input;

const CreateOrEditTemplate: FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    if (!(await form.validateFields())) return;

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

  return (
    <PageContainer title="新增模板">
      <Form labelCol={{ span: 4 }} form={form} onFinish={handleSubmit}>
        <Form.Item
          label="模板名称"
          required
          name="name"
          rules={[{ required: true, message: "请输入模板名称" }]}
        >
          <Input
            className="mw650"
            placeholder="请输入内容，最多20字"
            showCount
            maxLength={20}
          />
        </Form.Item>
        <Form.Item label="模板说明">
          <TextArea
            className="mw650"
            showCount
            maxLength={500}
            placeholder="请输入内容，最多500字"
            style={{ height: 120, resize: "none" }}
          />
        </Form.Item>
        <Form.Item label="采用指标">
          <Tree checkable />
        </Form.Item>

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

export default CreateOrEditTemplate;
