import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal, Popconfirm } from "antd";
import { B1options1 } from "../B1Plan/data";
import TextArea from "antd/es/input/TextArea";
import { B2_APIAudit } from "@/store/action/B2Scene";
import { MessageFu } from "@/utils/message";

type Props = {
  auditInfo: {
    oldState: number;
    id: number;
    sceneCode: string;
    auditDesc: string;
  };
  colseFu: () => void;
  upTableFu: (
    id: number,
    newState: number,
    newDesc: string,
    newTime: string
  ) => void;
};

function AuditMo({ auditInfo, colseFu, upTableFu }: Props) {
  // 审核状态
  const [audit, setAudit] = useState(-1);

  // 备注
  const [description, setDescription] = useState("");

  useEffect(() => {
    setAudit(auditInfo.oldState);

    setDescription(auditInfo.auditDesc);
  }, [auditInfo]);

  // 点击提交
  const btnOkFu = useCallback(async () => {
    const res = await B2_APIAudit({
      audit,
      description,
      sceneCode: auditInfo.sceneCode,
    });

    if (res.code === 0) {
      MessageFu.success("提交成功!");
      upTableFu(auditInfo.id, audit, description, res.timestamp);
      colseFu();
    }
  }, [
    audit,
    auditInfo.id,
    auditInfo.sceneCode,
    colseFu,
    description,
    upTableFu,
  ]);

  return (
    <Modal
      wrapClassName={styles.AuditMo}
      open={true}
      title="审核"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="B2Amain">
        <div className="B2Arow">
          <div className="B2Arow1">
            <span>* </span>审核状态：
          </div>
          <div className="B2Arow2">
            {B1options1.filter((v) => v.label !== "全部").map((v) => (
              <span className="B2Arow2Btn" key={v.label}>
                <Button
                  onClick={() => setAudit(v.value as number)}
                  type={v.value === audit ? "primary" : "default"}
                >
                  {v.label}
                </Button>
                &emsp;
              </span>
            ))}
          </div>
        </div>

        <div className="B2Arow">
          <div className="B2Arow1">备注：</div>
          <div className="B2Arow2">
            <TextArea
              value={description}
              onChange={(e) =>
                setDescription(e.target.value.replace(/\s+/g, ""))
              }
              style={{ width: 400 }}
              placeholder="请输入内容"
              showCount
              maxLength={50}
            />
          </div>
        </div>

        <div className="B2Abtn">
          <Button type="primary" onClick={btnOkFu}>
            提交
          </Button>
          &emsp;
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={colseFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
        </div>
      </div>
    </Modal>
  );
}

const MemoAuditMo = React.memo(AuditMo);

export default MemoAuditMo;
