import { RootState } from "@/store";
import { Checkbox, Radio } from "antd";
import { useCallback, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { forwardRef, useImperativeHandle } from "react";

const arr1 = [
  { id: 1, name: "本部门-自己创建的项目" },
  { id: 2, name: "本部门-所有用户创建的项目" },
  { id: 3, name: "跨部门数据" },
];

type Props = {
  info: {
    dataScope: 1 | 2 | 3;
    scopeDept: string;
  };
  ref: any;
};

function A4AuRR({ info }: Props, ref: any) {
  useEffect(() => {
    if (info.dataScope) setValue(info.dataScope);
    if (info.scopeDept) setCheckArr(info.scopeDept.split(","));
  }, [info.dataScope, info.scopeDept]);

  // 获取部门信息
  const arrAll = useSelector((state: RootState) => state.A5Section.tableList);

  // 顶部的单选
  const [value, setValue] = useState<1 | 2 | 3>(1);

  // 跨部门的多选
  const [checkArr, setCheckArr] = useState([] as string[]);

  const onChangeFu = useCallback(
    (val: boolean, id: string) => {
      if (val) setCheckArr([...checkArr, id]);
      else setCheckArr(checkArr.filter((v) => v !== id));
    },
    [checkArr]
  );

  // 给父组件调用
  const sonRes = useCallback(() => {
    let flag = true;
    let txt = "";
    if (value === 3) {
      txt = checkArr.join(",");
      if (checkArr.length <= 0) flag = false;
    }

    return { flag, txt, value };
  }, [checkArr, value]);

  // 可以让父组件调用子组件的方法
  useImperativeHandle(ref, () => ({
    sonRes,
  }));

  return (
    <div className="A4AuRR">
      <div className="A4ATit">数据权限</div>
      <div className="A4AR_1">
        {arr1.map((v) => (
          <div
            className="A4AR_1Row"
            key={v.id}
            onClick={() => setValue(v.id as 1 | 2 | 3)}
          >
            <Radio checked={value === v.id}>{v.name}</Radio>
          </div>
        ))}
      </div>

      {/* 跨部门的树渲染 */}
      <div className="A4AR_2" hidden={value !== 3}>
        {arrAll.map((v1) => (
          <div className="A4AR_2_1" key={v1.id}>
            <div className="A4AR_2Row">
              {!v1.children ? (
                <Checkbox
                  checked={checkArr.includes(v1.id)}
                  onChange={(e) => onChangeFu(e.target.checked, v1.id)}
                >
                  {v1.name}
                </Checkbox>
              ) : (
                v1.name
              )}
            </div>

            {v1.children && v1.children.length ? (
              <>
                {v1.children.map((v2) => (
                  <div className="A4AR_2_2" key={v2.id}>
                    <div className="A4AR_2Row">
                      {!v2.children ? (
                        <Checkbox
                          checked={checkArr.includes(v2.id)}
                          onChange={(e) => onChangeFu(e.target.checked, v2.id)}
                        >
                          {v2.name}
                        </Checkbox>
                      ) : (
                        v2.name
                      )}
                    </div>
                    {v2.children && v2.children.length ? (
                      <>
                        {v2.children.map((v3) => (
                          <div className="A4AR_2_3" key={v3.id}>
                            <div className="A4AR_2Row">
                              {!v3.children ? (
                                <Checkbox
                                  checked={checkArr.includes(v3.id)}
                                  onChange={(e) =>
                                    onChangeFu(e.target.checked, v3.id)
                                  }
                                >
                                  {v3.name}
                                </Checkbox>
                              ) : (
                                v3.name
                              )}
                            </div>

                            {v3.children && v3.children.length ? (
                              <>
                                {v3.children.map((v4) => (
                                  <div className="A4AR_2_4" key={v4.id}>
                                    <div className="A4AR_2Row">
                                      {!v4.children ? (
                                        <Checkbox
                                          checked={checkArr.includes(v4.id)}
                                          onChange={(e) =>
                                            onChangeFu(e.target.checked, v4.id)
                                          }
                                        >
                                          {v4.name}
                                        </Checkbox>
                                      ) : (
                                        v4.name
                                      )}
                                    </div>
                                  </div>
                                ))}
                              </>
                            ) : null}
                          </div>
                        ))}
                      </>
                    ) : null}
                  </div>
                ))}
              </>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
}

export default forwardRef(A4AuRR);
