import React, { useCallback, useEffect, useRef } from "react";
import styles from "./index.module.scss";
import { A1addType, options1 } from "../data";
import { Button, Form, FormInstance, Input, Popconfirm, Select } from "antd";
import { A1_APIadd, A1_APIgetInfo } from "@/store/action/A1Camera";
import { getTokenInfo } from "@/utils/storage";
import TextArea from "antd/es/input/TextArea";
import { MessageFu } from "@/utils/message";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { C1_APIgetlist } from "@/store/action/C1User";

type Props = {
  openInfo: A1addType;
  closeFu: () => void;
  upTableFu: () => void;
  addTableFu: () => void;
};

function AddCamera({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
  const dispatch = useDispatch();

  useEffect(() => {
    // 获取用户列表所有用户信息
    dispatch(
      C1_APIgetlist(
        {
          pageSize: 99999,
          pageNum: 1,
        },
        true
      )
    );
  }, [dispatch]);

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  // 获取用户列表的所有用户，用于表单的  项目经理 的下拉
  const { C1TableListAll } = useSelector((state: RootState) => state.C1User);

  // 通过id获取详情
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A1_APIgetInfo(id);
    if (res.code === 0) {
      FormBoxRef.current?.setFieldsValue(res.data);
    }
  }, []);

  useEffect(() => {
    if (openInfo.txt === "新增") {
      FormBoxRef.current?.setFieldsValue({
        status: "使用中",
        pmUserId: getTokenInfo().user.id,
      });
    } else getInfoFu(openInfo.id);
  }, [getInfoFu, openInfo]);

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

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      const res = await A1_APIadd({
        ...value,
        id: openInfo.txt === "新增" ? null : openInfo.id,
        typeIn: "pc",
      });
      if (res.code === 0) {
        MessageFu.success(openInfo.txt + "成功!");
        openInfo.txt === "新增" ? addTableFu() : upTableFu();
        closeFu();
      }
    },
    [addTableFu, closeFu, openInfo.id, openInfo.txt, upTableFu]
  );

  return (
    <div className={styles.AddCamera}>
      <div className="A1addMain">
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          labelCol={{ span: 3 }}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="SN编码"
            name="cameraSn"
            rules={[{ required: true, message: "请输入SN编码!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input maxLength={20} showCount placeholder="请输入内容" />
          </Form.Item>

          <Form.Item
            label="相机工况"
            name="status"
            rules={[{ required: true, message: "请选择相机工况!" }]}
          >
            <Select
              style={{ width: 300 }}
              placeholder="请选择"
              options={options1.filter((v) => v.label !== "全部")}
            />
          </Form.Item>

          <Form.Item
            label="项目经理"
            name="pmUserId"
            rules={[{ required: true, message: "请选择项目经理!" }]}
          >
            <Select
              style={{ width: 300 }}
              placeholder="请选择"
              options={C1TableListAll}
            />
          </Form.Item>

          <Form.Item label="备注" name="remark">
            <TextArea
              style={{ width: 600 }}
              autoSize
              placeholder="请输入内容"
              showCount
              maxLength={200}
            />
          </Form.Item>

          {/* 确定和取消按钮 */}
          <br />
          <Form.Item className="A1addBtn">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            &emsp;
            <Popconfirm
              title="放弃编辑后，信息将不会保存!"
              okText="放弃"
              cancelText="取消"
              onConfirm={closeFu}
              okButtonProps={{ loading: false }}
            >
              <Button>取消</Button>
            </Popconfirm>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

const MemoAddCamera = React.memo(AddCamera);

export default MemoAddCamera;
