import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, DatePicker, Modal } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import { C1_APIgetConfig, C1_APIsetConfig } from "@/store/action/C1orderset";
import classNames from "classnames";
import dayjs from "dayjs";
import { MessageFu } from "@/utils/message";
import { DeleteOutlined } from "@ant-design/icons";

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

function C1setTime({ closeFu }: Props) {
  const [list, setList] = useState<{ id: string; time: string | null }[]>([]);

  // 点击提交
  const btnOkFu = useCallback(async () => {
    const arr = list.map((v) => v.time);
    const res = await C1_APIsetConfig({ id: 10, rtf: JSON.stringify(arr) });
    if (res.code === 0) {
      closeFu();
      MessageFu.success("设置成功!");
    }
  }, [closeFu, list]);

  const getInfoFu = useCallback(async () => {
    const res = await C1_APIgetConfig(10);
    if (res.code === 0) {
      const resArr: string[] = JSON.parse(res.data.rtf || "[]");
      setList(
        resArr.map((v, i) => ({
          id: i + "",
          time: v,
        }))
      );
    }
  }, []);

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

  const onChange = useCallback(
    (id: string, time: any) => {
      const timeRes = time || null;

      // 不让选择相同日期
      if (timeRes) {
        if (list.some((v) => v.time === timeRes))
          return MessageFu.warning(`${timeRes}日期重复!`);
      }

      setList(
        list.map((v) => ({
          id: v.id,
          time: v.id === id ? timeRes : v.time,
        }))
      );
    },
    [list]
  );

  return (
    <Modal
      wrapClassName={styles.C1setTime}
      open={true}
      title="不可预约日期"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="C1tAdd">
        <Button
          type="primary"
          disabled={list.length >= 20 || list.some((v) => !v.time)}
          onClick={() =>
            setList([...list, { id: Date.now() + "", time: null }])
          }
        >
          新增
        </Button>
        <span
          className={classNames(
            "C1tAddTit",
            list.length >= 20 ? "C1tAddTitShow" : ""
          )}
        >
          &emsp;最多20个日期
        </span>
        <span
          className={classNames(
            "C1tAddTit",
            list.some((v) => !v.time) ? "C1tAddTitShow" : ""
          )}
        >
          &emsp;请完整选择日期
        </span>
      </div>

      <div className="C1tMain">
        {list.length ? (
          list.map((v) => (
            <div className="C1tMrow" key={v.id}>
              <DatePicker
                value={v.time ? dayjs(v.time) : null}
                onChange={(_, time) => onChange(v.id, time)}
              />
              <DeleteOutlined
                onClick={() => setList(list.filter((c) => c.id !== v.id))}
              />
            </div>
          ))
        ) : (
          <div className="C1tMnull">暂无数据</div>
        )}
        {}
      </div>

      <div className="C1tBtn">
        <Button
          type="primary"
          onClick={btnOkFu}
          disabled={list.some((v) => !v.time)}
        >
          提交
        </Button>
        &emsp;
        <MyPopconfirm txtK="取消" onConfirm={closeFu} />
      </div>
    </Modal>
  );
}

const MemoC1setTime = React.memo(C1setTime);

export default MemoC1setTime;
