From 12be9a9180a4c120c426db418f602ad32919d9d1 Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Thu, 9 Mar 2023 22:28:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=BE=E7=A8=8B=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/Course/Create/Chatpter/index.less    |  12 ++
 .../src/view/Course/Create/Chatpter/index.tsx | 113 ++++++++++--------
 2 files changed, 74 insertions(+), 51 deletions(-)
 create mode 100644 apps/admin/src/view/Course/Create/Chatpter/index.less

diff --git a/apps/admin/src/view/Course/Create/Chatpter/index.less b/apps/admin/src/view/Course/Create/Chatpter/index.less
new file mode 100644
index 0000000..17caf3f
--- /dev/null
+++ b/apps/admin/src/view/Course/Create/Chatpter/index.less
@@ -0,0 +1,12 @@
+.chapter-list {
+  li {
+    display: flex;
+    justify-content: space-between;
+    &.l1 {
+      margin-top: 20px;
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
+  }
+}
diff --git a/apps/admin/src/view/Course/Create/Chatpter/index.tsx b/apps/admin/src/view/Course/Create/Chatpter/index.tsx
index 9fd791e..27f24f8 100644
--- a/apps/admin/src/view/Course/Create/Chatpter/index.tsx
+++ b/apps/admin/src/view/Course/Create/Chatpter/index.tsx
@@ -1,69 +1,80 @@
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import { Button, Col, Form, Input, Row, Space, Typography } from "antd";
+import {
+  Button,
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  Radio,
+  Row,
+  Space,
+  Typography,
+} from "antd";
 const { Text } = Typography;
+import {} from "antd";
+import { useEffect, useState } from "react";
+import "./index.less";
 
 interface IProps {
   onChange?: Function;
   styles?: React.CSSProperties;
 }
 
+interface IChapter {
+  level: string;
+  title: string;
+  fileId?: string;
+}
+
 const Chatpter = (props: IProps) => {
   const [form] = Form.useForm();
+  const [chapterList, setChapterList] = useState<IChapter[]>([]);
 
-  const onBlur = () => {
-    console.log(form.getFieldsValue().chapter);
+  const onTocChange = () => {
+    const { toc } = form.getFieldsValue();
+    const process = toc.split("\n").map((row: string) => {
+      const [level, title, fileId] = row.split("|");
+      return !fileId ? { level, title } : { level, title, fileId };
+    });
+    setChapterList(process);
   };
 
+  useEffect(() => {
+    console.log(chapterList);
+  }, [chapterList]);
+
   return (
     <div style={{ ...props.styles }}>
-      <Form form={form} style={{ maxWidth: 600 }}>
-        <Form.List name="chapter">
-          {(fields, { add, remove }, { errors }) => (
-            <>
-              {fields.map((field, index) => (
-                <Form.Item required={false} key={field.key}>
-                  <Form.Item
-                    {...field}
-                    validateTrigger={["onChange", "onBlur"]}
-                    rules={[{ required: true, message: "请输入章节名称" }]}
-                    noStyle
-                  >
-                    <Input
-                      placeholder="请输入章节名称"
-                      onBlur={onBlur}
-                      style={{ width: "60%" }}
-                    />
-                    <Text>{JSON.stringify(field)}</Text>
-                  </Form.Item>
-                  {fields.length > 1 ? (
-                    <MinusCircleOutlined onClick={() => remove(field.name)} />
-                  ) : null}
-                </Form.Item>
-              ))}
-              <Form.Item>
-                <Space>
-                  <Button
-                    type="dashed"
-                    onClick={() => add("The head item", 0)}
-                    block
-                    icon={<PlusOutlined />}
-                  >
-                    1级章节
-                  </Button>
-                  <Button
-                    type="primary"
-                    onClick={() => add("The head item", 0)}
-                    block
-                    icon={<PlusOutlined />}
-                  >
-                    2级章节
-                  </Button>
-                </Space>
-              </Form.Item>
-            </>
-          )}
-        </Form.List>
-      </Form>
+      <Row gutter={24}>
+        <Col span={12}>
+          <Form form={form} onChange={onTocChange}>
+            <Form.Item name="toc">
+              <Input.TextArea
+                placeholder="级别|标题|FileId"
+                style={{ minHeight: 600, lineHeight: 2, fontSize: 16 }}
+              ></Input.TextArea>
+            </Form.Item>
+          </Form>
+        </Col>
+        <Col span={12}>
+          <ul className="chapter-list">
+            {chapterList.map((chapter, index) => (
+              <li
+                key={index}
+                className={+chapter.level === 1 ? "l1" : ""}
+                style={{ paddingLeft: +chapter.level === 1 ? 0 : 20 }}
+              >
+                <Text style={{ fontSize: +chapter.level === 1 ? 18 : 16 }}>
+                  {chapter.title}
+                </Text>
+                {chapter.fileId && (
+                  <Text type="secondary">{chapter.fileId}</Text>
+                )}
+              </li>
+            ))}
+          </ul>
+        </Col>
+      </Row>
     </div>
   );
 };