import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal, Select } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import TextArea from "antd/es/input/TextArea";
import { A4_APIgetInfoSet, A4_APIsetInfoSet } from "@/store/action/A4store";
import { MessageFu } from "@/utils/message";

type Props = {
  closeFu: () => void;
};

function A3set({ closeFu }: Props) {
  const [isEnabled, setIsEnabled] = useState(1);
  const [rtf, setRtf] = useState("");

  const getInfoSetFu = useCallback(async () => {
    const res = await A4_APIgetInfoSet();
    if (res.code === 0) {
      setIsEnabled(res.data.display);
      setRtf(res.data.rtf);
      // console.log(123, res);
    }
  }, []);

  useEffect(() => {
    getInfoSetFu();
  }, [getInfoSetFu]);

  // 点击确定
  const btnOkFu = useCallback(async () => {
    const obj = { isEnabled, rtf };
    const res = await A4_APIsetInfoSet(obj);
    if (res.code === 0) {
      MessageFu.success("编辑成功!");
      closeFu();
    }
  }, [closeFu, isEnabled, rtf]);

  return (
    <Modal
      wrapClassName={styles.A3set}
      open={true}
      title="商城设置"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A3Smain">
        <div className="A3Srow">
          <div className="A3Srow1">客服联系方式：</div>
          <div className="A3Srow2">
            <TextArea
              value={rtf}
              onChange={(e) => setRtf(e.target.value)}
              placeholder="请输入内容，用户在有疑问时，将进行咨询"
              showCount
              maxLength={50}
            />
          </div>
        </div>

        <div className="A3Srow">
          <div className="A3Srow1">商城状态：</div>
          <div className="A3Srow2">
            <Select
              style={{ width: 120 }}
              value={isEnabled}
              onChange={(e) => setIsEnabled(e)}
              options={[
                { value: 1, label: "关闭" },
                { value: 0, label: "开启" },
              ]}
            />
          </div>
        </div>

        <div className="A3Sbtn">
          <Button type="primary" onClick={btnOkFu}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  );
}

const MemoA3set = React.memo(A3set);

export default MemoA3set;
