import React, { useCallback, useEffect, useRef } from "react";
import styles from "./index.module.scss";
import { A6QInfoType } from "../data";
import { Button, DatePicker, Form, FormInstance, Input, Select } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import ZRichText from "@/components/ZRichText";
import dayjs from "dayjs";
import { A6Q_APIgetInfo, A6Q_APIsave } from "@/store/action/A6_1ques";
import { MessageFu } from "@/utils/message";

type Props = {
  sInfo: A6QInfoType;
  closeFu: () => void;
  addTableFu: () => void;
  editTableFu: () => void;
};

function A6Qadd({ sInfo, closeFu, addTableFu, editTableFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  const getInfoFu = useCallback(async (id: number) => {
    const res = await A6Q_APIgetInfo(id);
    if (res.code === 0) {
      const data = res.data;

      ZRichTextRef.current?.ritxtShowFu(data.description);

      FormBoxRef.current?.setFieldsValue({
        myTime: dayjs(data.publishDate),
        name: data.name,
        display: data.display,
      });
    }
  }, []);

  useEffect(() => {
    if (sInfo.txt === "编辑") getInfoFu(sInfo.id);
    else if (sInfo.txt === "新增") {
      // 新增
      FormBoxRef.current?.setFieldsValue({
        myTime: dayjs(Date.now()),
        display: 1,
      });
    }
  }, [getInfoFu, sInfo]);

  // 富文本的ref
  const ZRichTextRef = useRef<any>(null);

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, []);

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      // 发布日期
      const publishDate = dayjs(values.myTime).format("YYYY-MM-DD");

      // 富文本
      const description = ZRichTextRef.current?.fatherBtnOkFu();
      const obj = {
        name: values.name,
        display: values.display,
        id: sInfo.txt === "新增" ? null : sInfo.id,
        publishDate,
        description: description.val,
      };

      const res = await A6Q_APIsave(obj);
      if (res.code === 0) {
        MessageFu.success(`${sInfo.txt}成功!`);
        sInfo.txt === "新增" ? addTableFu() : editTableFu();
        closeFu();
      }
    },
    [addTableFu, closeFu, editTableFu, sInfo.id, sInfo.txt]
  );

  return (
    <div className={styles.A6Qadd}>
      <div className="A6QAmain">
        <Form
          ref={FormBoxRef}
          name="basic"
          labelCol={{ span: 2 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          scrollToFirstError
        >
          <Form.Item
            label="标题"
            name="name"
            rules={[{ required: true, message: "请输入标题!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input maxLength={50} showCount placeholder="请输入内容" />
          </Form.Item>

          {/* 富文本 */}
          <div className="formRow">
            <div className="formLeft">
              <span> </span>
              摘要：
            </div>
            <div className="formRight">
              <ZRichText
                check={false}
                dirCode="A6QText"
                isLook={false}
                ref={ZRichTextRef}
                myUrl="cms/questionnaire/upload"
              />
            </div>
          </div>

          <Form.Item
            label="发布日期"
            name="myTime"
            rules={[{ required: true, message: "请选择发布日期!" }]}
          >
            <DatePicker style={{ width: 200 }} />
          </Form.Item>

          <Form.Item
            label="问卷状态"
            name="display"
            rules={[{ required: true, message: "请选择问卷状态!" }]}
          >
            <Select
              placeholder="请选择"
              style={{ width: 200 }}
              options={[
                { value: 1, label: "开启" },
                { value: 0, label: "关闭" },
              ]}
            />
          </Form.Item>

          {/* 确定和取消按钮 */}
          <Form.Item className="A6QAbtn">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <br />
            <br />
            <MyPopconfirm txtK="取消" onConfirm={closeFu} />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

const MemoA6Qadd = React.memo(A6Qadd);

export default MemoA6Qadd;
