import React, { useState, useEffect, useCallback } from 'react';
import {
  message,
  notification,
  Form,
  Spin,
  Tree,
  Tooltip,
  Modal,
  Input,
  Button,
} from 'antd';
import {
  FileAddTwoTone,
  FolderAddTwoTone,
  EditTwoTone,
  DeleteTwoTone,
  FolderOpenOutlined,
  FileOutlined,
} from '@ant-design/icons';
import {
  getTree,
  addMenuApi,
  addMenuGroupApi,
  submitMenuInfo,
  getRoleList,
  getMenuInfo,
  deleteMenuApi,
} from '../../services/appConfig/api';
import ListCardItem from '../orgnazation/listCardItem';
import styles from './AppMenu.less';
import PicturesWall from '@/components/Upload/index';

const AppMenu = () => {
  const [treeLoading, setTreeLoading] = useState(true);

  const [treeData, setTreeData] = useState([]); // 菜单树
  const [treeState, setTreeState] = useState(true);
  const [nodeType, setNodeType] = useState(1); // 根据节点类型渲染不同的编辑表单item,0-0一级菜单,0-0-0二级,0-0-0-0三级
  const [rolelist, setRolelist] = useState([]);
  const [roleValueList, setRoleValueList] = useState({});

  const [menuID, setMenuID] = useState('');
  const [menuTitle, setMenuTitle] = useState('菜单管理');
  const [menuLabel, setMenuLabel] = useState('在线图标');

  const [addMenuVisible, setAddMenuVisible] = useState(false);
  const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
  const [tipVisible, setTipVisible] = useState(false);

  const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);

  const [addMenuForm] = Form.useForm();
  const [editMenuForm] = Form.useForm();
  const [addMenuGroupForm] = Form.useForm();

  const getRoleValueCallback = useCallback((value, index) => {
    roleValueList[index] = value;
    setRoleValueList({ ...roleValueList });
  }, []);

  // 获取菜单树
  useEffect(() => {
    updateTrees();
  }, []);

  const updateTrees = () => {
    setTreeLoading(true);
    getTree()
      .then(res => {
        if (res.length > 0) {
          setTreeLoading(false);
          const result = res[0].children[0].children[2].children;
          setTreeData(result);
          console.log(result);
          // 第一次加载,默认选择第一个组织
          if (treeState) {
            onSelect([result[0].menuID], false);
            setTreeState(false);
          }
        }
      })
      .catch(err => {
        setTreeLoading(false);
        message.error(err);
      });
  };

  // 获取角色列表
  useEffect(() => {
    getRoleList()
      .then(res => {
        if (res && res.list) {
          setRolelist(res.list);
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  }, []);

  // 渲染菜单树
  const mapTree = menu => {
    const haveChildren =
      Array.isArray(menu.children) && menu.children.length > 0;
    return {
      title: (
        <>
          <span>{menu.text}</span>
          <div className={styles.iconWraper1}>
            {menu.menuType === 'MiniAppMenuGroup' && (
              <>
                <Tooltip title="添加菜单组">
                  <FolderAddTwoTone
                    onClick={() => addMenuGroup(menu, '分组图标')}
                  />
                </Tooltip>
                {/* <Tooltip title="添加菜单组">
                  <EditTwoTone
                    onClick={() => editMenuGroup(menu, '在线图标')}
                  />
                </Tooltip> */}
              </>
            )}
            {menu.menuType === 'MiniAppMenuGroupTwo' && (
              <>
                <Tooltip title="添加菜单">
                  <FileAddTwoTone onClick={() => addMenu(menu)} />
                </Tooltip>
                {/* <Tooltip title="编辑菜单组">
                  <EditTwoTone
                    onClick={() => editMenuGroup(menu, '分组图标')}
                  />
                </Tooltip> */}
              </>
            )}
            {/* {menu.menuType === 'MiniAppMenuThree' && (
              <>
                <Tooltip title="编辑菜单">
                  <EditTwoTone onClick={() => editMenu(menu)} />
                </Tooltip>
              </>
            )} */}
            <Tooltip title="删除菜单">
              <DeleteTwoTone onClick={() => deleteMenu(menu)} />
            </Tooltip>
          </div>
        </>
      ),
      key: menu.menuID,
      // icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
      // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作
      children: haveChildren ? menu.children.map(i => mapTree(i)) : [],
    };
  };

  // 获取当前菜单详细
  const onSelect = (props, e) => {
    // e.node.pos节点类型,根据这个渲染不同的编辑表单item,0-x一级菜单,0-0-x二级,0-0-0-x三级
    console.log(e);
    if (e) {
      if (e.node.pos.lastIndexOf('-') === 1) {
        setNodeType(1);
      } else if (e.node.pos.lastIndexOf('-') === 3) {
        setNodeType(2);
      } else {
        setNodeType(3);
      }
    }
    setMenuID(props[0]);
    getMenuInfo(props[0])
      .then(res => {
        if (res.success) {
          editMenuForm.setFieldsValue({
            menuName: res.menuName,
            shortName: res.menuShortName,
            imageUrl: res.imageUrl,
            pageUrl: res.pageUrl,
            offlineImgUrl: res.offlineImgUrl,
            funParam: res.funParam,
            relatedRoleList: res.relatedRoleList || '',
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  // 左侧目录树相关操作
  const addMenu = menu => {
    setAddMenuVisible(true);
    setMenuTitle(`在${menu.text}下添加菜单`);
    setMenuID(menu.menuID);
    addMenuForm.setFieldsValue({
      menuName: '',
      shortName: '',
      imageUrl: '',
      pageUrl: '',
      funParam: '',
    });
  };
  const addMenuGroup = (menu, label) => {
    setAddMenuGroupVisible(true);
    setMenuTitle(`在${menu.text}下添加菜单组`);
    setMenuLabel(label);
    addMenuGroupForm.setFieldsValue({
      menuName: '',
      shortName: '',
      imageUrl: '',
      offlineImgUrl: '',
      funParam: '',
    });
  };
  const editMenu = menu => {
    setAddMenuVisible(true);
    setMenuTitle(`编辑${menu.text}`);
    setMenuID(menu.menuID);
    getMenuInfo(menu.menuID)
      .then(res => {
        if (res.success) {
          addMenuForm.setFieldsValue({
            menuName: res.menuName,
            shortName: res.menuShortName,
            imageUrl: res.imageUrl,
            pageUrl: res.pageUrl,
            funParam: res.funParam,
            relatedRoleList: res.relatedRoleList || [],
          });
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  // const editMenuGroup = (menu, label) => {
  //   setAddMenuGroupVisible(true);
  //   setMenuTitle(`编辑${menu.text}`);
  //   setMenuID(menu.menuID);
  //   setMenuLabel(label);
  //   getMenuInfo(menu.menuID)
  //     .then(res => {
  //       if (res.success) {
  //         addMenuGroupForm.setFieldsValue({
  //           menuName: res.menuName,
  //           shortName: res.menuShortName,
  //           imageUrl: res.imageUrl,
  //           pageUrl: res.pageUrl,
  //           offlineImgUrl: res.offlineImgUrl,
  //           funParam: res.funParam,
  //           relatedRoleList: res.relatedRoleList || [],
  //         });
  //       } else {
  //         notification.error({
  //           message: '获取失败',
  //           description: res.message,
  //         });
  //       }
  //     })
  //     .catch(err => {
  //       message.error(err);
  //     });
  // };
  const deleteMenu = menu => {
    setDeleteMenuVisible(true);
    setMenuTitle(`删除菜单${menu.text}`);
    setMenuID(menu.menuID);
  };
  // 提交添加菜单
  const submitAddMenu = () => {
    console.log(menuID);
    let menuName = addMenuForm.getFieldValue('menuName');
    let shortName = addMenuForm.getFieldValue('shortName');
    let imageUrl = addMenuForm.getFieldValue('imageUrl');
    let pageUrl = addMenuForm.getFieldValue('pageUrl');
    let funParam = addMenuForm.getFieldValue('funParam');
    if (menuName && shortName && imageUrl && pageUrl) {
      addMenuApi(menuID, menuName, shortName, imageUrl, pageUrl, funParam)
        .then(res => {
          if (res.success) {
            setAddMenuVisible(false);
            notification.success({
              message: '提交成功',
            });
            updateTrees();
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
        })
        .catch(err => {
          message.error(err);
        });
    } else {
      setTipVisible(true);
    }
  };
  // 提交添加菜单组
  const submitAddMenuGroup = () => {
    let menuName = addMenuGroupForm.getFieldValue('menuName');
    let shortName = addMenuGroupForm.getFieldValue('shortName');
    let imageUrl = addMenuGroupForm.getFieldValue('imageUrl');
    let offlineImgUrl = addMenuGroupForm.getFieldValue('offlineImgUrl');
    let funParam = addMenuGroupForm.getFieldValue('funParam');
    if (menuName && shortName && imageUrl && offlineImgUrl) {
      addMenuGroupApi(
        menuID,
        menuName,
        shortName,
        imageUrl,
        offlineImgUrl,
        funParam,
      )
        .then(res => {
          if (res.success) {
            setAddMenuGroupVisible(false);
            notification.success({
              message: '提交成功',
            });
            updateTrees();
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
        })
        .catch(err => {
          message.error(err);
        });
    } else {
      setTipVisible(true);
    }
  };
  // 提交-编辑菜单
  const submitEditMenu = () => {
    let menuName = editMenuForm.getFieldValue('menuName');
    let shortName = editMenuForm.getFieldValue('shortName');
    let imageUrl = editMenuForm.getFieldValue('imageUrl');
    let offlineImgUrl = editMenuForm.getFieldValue('offlineImgUrl') || '';
    let pageUrl = editMenuForm.getFieldValue('pageUrl') || '';
    let funParam = editMenuForm.getFieldValue('funParam') || '';
    let relatedRoleList = editMenuForm.getFieldValue('funParam') || '';
    const params = {
      menuID,
      menuName,
      shortName,
      imageUrl,
      offlineImgUrl,
      pageUrl,
      funParam,
      relatedRoleList,
    };
    // 根据节点类型,加一层判断,必填项全部不为空时才能提交
    if (nodeType === 1) {
      if (menuName && shortName && imageUrl && offlineImgUrl) {
        submitMenu(params);
      } else {
        setTipVisible(true);
      }
    } else if (nodeType === 2) {
      if (menuName && shortName && imageUrl) {
        submitMenu(params);
      } else {
        setTipVisible(true);
      }
    } else if (nodeType === 3) {
      if (menuName && shortName && imageUrl && pageUrl) {
        submitMenu(params);
      } else {
        setTipVisible(true);
      }
    }
  };
  const submitMenu = params => {
    submitMenuInfo(params)
      .then(res => {
        if (res.success) {
          notification.success({
            message: '提交成功',
          });
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  // 提交删除菜单
  const submitDeleteMenu = () => {
    deleteMenuApi(menuID)
      .then(res => {
        if (res.success) {
          setDeleteMenuVisible(false);
          notification.success({
            message: '删除成功',
          });
          updateTrees();
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        setTreeLoading(false);
        message.error(err);
      });
  };

  return (
    <div className={styles.contentContainer}>
      <div className={styles.menuContainer}>
        <div style={{ padding: '10px 10px 0 16px' }}>
          菜单列表
          <Tooltip title="添加菜单">
            <FileAddTwoTone
              style={{
                fontSize: '18px',
                float: 'right',
                margin: '4px 4px 0px 12px',
                color: '#1890FF',
              }}
              onClick={() => addMenu({ text: '根目录', menuID: -1 })}
            />
          </Tooltip>
          <Tooltip title="添加菜单组">
            <FolderAddTwoTone
              style={{
                fontSize: '18px',
                float: 'right',
                marginTop: '4px',
              }}
              onClick={() =>
                addMenuGroup({ text: '根目录', menuID: -1 }, '在线图标')
              }
            />
          </Tooltip>
        </div>
        {treeData.length > 0 && (
          <Spin spinning={treeLoading} tip="loading...">
            <Tree
              showIcon="true"
              showLine={{ showLeafIcon: false }}
              defaultExpandAll="true"
              // selectedKeys={[currentSelectMenu]}
              onSelect={onSelect}
              treeData={treeData.map(t => mapTree(t))}
            />
          </Spin>
        )}
      </div>
      <div className={styles.editContainer}>
        <Form
          form={editMenuForm}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 19 }}
        >
          <Form.Item
            name="menuName"
            label="菜单名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单名称" />
          </Form.Item>
          <Form.Item
            name="shortName"
            label="菜单别名"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单别名" />
          </Form.Item>
          <Form.Item
            name="imageUrl"
            label="菜单图标"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单图标" />
          </Form.Item>
          <Form.Item label="图标预览">
            <PicturesWall maxLen={3} />
          </Form.Item>
          {nodeType === 1 && (
            <>
              <Form.Item
                name="offlineImgUrl"
                label="离线图标"
                rules={[{ required: true, message: '不能为空' }]}
              >
                <Input placeholder="请输入离线图标" />
              </Form.Item>
              <Form.Item label="图标预览">
                <PicturesWall maxLen={3} />
              </Form.Item>
            </>
          )}
          {nodeType === 3 && (
            <>
              <Form.Item
                name="pageUrl"
                label="功能路径"
                rules={[{ required: true, message: '不能为空' }]}
              >
                <Input placeholder="请输入功能路径" />
              </Form.Item>
            </>
          )}
          <Form.Item name="funParam" label="功能参数">
            <Input placeholder="请输入功能参数" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 12 }}>
            <Button key="back" type="primary" onClick={() => submitEditMenu()}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className={styles.previewContainer}>界面预览</div>
      {/* 必填项提示 */}
      <Modal
        title="提示"
        visible={tipVisible}
        onCancel={() => setTipVisible(false)}
        width="300px"
        styles={{ zIndex: 999999 }}
        centered
        footer={[
          <Button
            key="back"
            type="primary"
            onClick={() => setTipVisible(false)}
          >
            关闭
          </Button>,
        ]}
      >
        <p>
          标记<span className={styles.redText}>*</span>的为必填项
        </p>
      </Modal>
      {/* 添加菜单 */}
      <Modal
        title={menuTitle}
        visible={addMenuVisible}
        onOk={submitAddMenu}
        onCancel={() => setAddMenuVisible(false)}
        okText="确认"
        cancelText="取消"
        centered
      >
        <Form form={addMenuForm} labelCol={{ span: 4 }}>
          <Form.Item
            name="menuName"
            label="菜单名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单名称" />
          </Form.Item>
          <Form.Item
            name="shortName"
            label="菜单别名"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单别名" />
          </Form.Item>
          <Form.Item
            name="imageUrl"
            label="菜单图标"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单图标" />
          </Form.Item>
          <Form.Item
            name="pageUrl"
            label="功能路径"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单图标" />
          </Form.Item>
          <Form.Item label="图标预览">
            <PicturesWall maxLen={3} />
          </Form.Item>
          <Form.Item name="funParam" label="功能参数">
            <Input placeholder="请输入功能参数" />
          </Form.Item>
        </Form>
        <ListCardItem
          itemid="1"
          key="1"
          userList={rolelist}
          OUName="关联角色"
          getValueCallback={getRoleValueCallback}
        />
      </Modal>
      {/* 添加菜单组 */}
      <Modal
        title={menuTitle}
        visible={addMenuGroupVisible}
        onOk={submitAddMenuGroup}
        onCancel={() => setAddMenuGroupVisible(false)}
        okText="确认"
        cancelText="取消"
        centered
      >
        <Form form={addMenuGroupForm} labelCol={{ span: 4 }}>
          <Form.Item
            name="menuName"
            label="分组名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入分组名称" />
          </Form.Item>
          <Form.Item
            name="shortName"
            label="分组别名"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入分组别名" />
          </Form.Item>
          <Form.Item
            name="imageUrl"
            label={menuLabel}
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入菜单图标" />
          </Form.Item>
          <Form.Item label="图标预览">
            <PicturesWall maxLen={3} />
          </Form.Item>
          {/* 添加菜单组,label名称为在线图标才有离线图标 */}
          {menuLabel === '在线图标' && (
            <Form.Item
              name="offlineImgUrl"
              label="离线图标"
              rules={[{ required: true, message: '不能为空' }]}
            >
              <Input placeholder="请输入离线图标" />
            </Form.Item>
          )}
          <Form.Item label="图标预览">
            <PicturesWall maxLen={3} />
          </Form.Item>
          <Form.Item name="funParam" label="功能参数">
            <Input placeholder="请输入功能参数" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 删除菜单 */}
      <Modal
        title={menuTitle}
        visible={deleteMenuVisible}
        onOk={submitDeleteMenu}
        onCancel={() => setDeleteMenuVisible(false)}
        okText="确认"
        cancelText="取消"
        centered
      >
        <span>确定删除?</span>
      </Modal>
    </div>
  );
};

export default AppMenu;