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

const stateBtnArr = [
  { id: 1, name: "审批通过" },
  { id: 2, name: "审批驳回" },
];

type Props = {
  info: { id: number; sta: 0 | 1 | 2; txt: string };
  closeFu: () => void;
  editSuFu: () => void;
};

function A1IAudit({ info, closeFu, editSuFu }: Props) {
  // 备注
  const [value, setValue] = useState("");

  // 审批状态
  const [state, setState] = useState<0 | 1 | 2>(0);

  useEffect(() => {
    setState(info.sta);
    setValue(info.txt)
  }, [info.sta, info.txt]);

  // 点击确定
  const btnOk = useCallback(async () => {
    const obj = {
      audit: state,
      description: value,
      id: info.id,
    };

    const res = await A1_APIIaudit(obj);

    if (res.code === 0) {
      MessageFu.success("审核成功!");
      editSuFu();
      closeFu();
    }
  }, [closeFu, editSuFu, info.id, state, value]);

  return (
    <Modal
      wrapClassName={styles.A1IAudit}
      destroyOnClose
      open={true}
      title="审批"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1IAmain">
        <div className="A1IAmainRow">
          <div className="A1IAmainRow1">
            <span> </span> 当前状态：
          </div>
          <div className="A1IAmainRow2">
            {info.sta === 0
              ? "待审批"
              : info.sta === 1
              ? "审批通过"
              : "审批驳回"}
          </div>
        </div>

        <div className="A1IAmainRow">
          <div className="A1IAmainRow1 A1IAmainRow1_2">
            <span>*</span> 审批状态：
          </div>
          <div className="A1IAmainRow2">
            {stateBtnArr.map((v) => (
              <div key={v.id}>
                <Button
                  onClick={() => setState(v.id as 1 | 2)}
                  type={v.id === state ? "primary" : "default"}
                >
                  {v.name}
                </Button>
              </div>
            ))}
          </div>
        </div>

        <div className="A1IAmainRow">
          <div className="A1IAmainRow1">
            <span> </span> 备注：
          </div>
          <div className="A1IAmainRow2">
            <TextArea
              rows={4}
              placeholder="请输入内容"
              maxLength={100}
              showCount
              value={value}
              onChange={(e) => setValue(e.target.value.replace(/\s+/g, ""))}
            />
          </div>
        </div>

        <div className="A1IABtn">
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
          &emsp;
          <Button
            type="primary"
            onClick={btnOk}
            disabled={state !== 1 && state !== 2}
          >
            确定
          </Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoA1IAudit = React.memo(A1IAudit);

export default MemoA1IAudit;
