import React from 'react';
import {Layout, Menu, Tabs, Dropdown, Tooltip} from 'antd';
import styles from './Menu.less';
import UserInformation from "@/components/userInfo/UserInformation";
import UserAuthorization from "@/components/userInfo/UserAuthorization";

const { Sider, Content } = Layout;
const { SubMenu } = Menu;
const MenuItem = Menu.Item;
const TabPane = Tabs.TabPane;

/**
 * 左侧菜单及中间内容显示
 */
class SideTabMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      refreshView: null
    }
  }

  componentWillReceiveProps(nextProps) {
    const {tokenModel, themeColor, systemStatus} = nextProps;
    this.onLoadIFrame(tokenModel, themeColor, systemStatus);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const {refreshView} = this.state;
    if (!!refreshView) {
      this.setState({refreshView: null});
    }
  }

  onLoadIFrame(tokenModel, themeColor, systemStatus) {
    if (systemStatus == "logout") {
      console.log("onLoadIFrame systemStatus ===>>> " + systemStatus);
      return;
    }

    // 传递参数到子IFrame页面进行交互
    const iFrameParams = { token: tokenModel && tokenModel.token, userInfo: tokenModel && tokenModel.userInfo, themeColor, isAuth: true };
    const index = window.frames ? window.frames.length - 1 : 0;
    console.log("onLoadIFrame window.frames ===>>> " + (window.frames ? true : false) + " index ===>>> " + index);
    const postMessageObject = window.frames[index] ? window.frames[index] : window.frames;
    postMessageObject.postMessage(iFrameParams, '*');
  }

  render() {

    const { collapsed, activeHeadMenuKey, onSelectSideMenu, activeSideMenuKey, menuData, paneTabs, onTabChange,
      updatePathMap, menuMap, onOpenSubMenu, openedSubMenuKey, removeTab, closeCurrentTab, closeOtherTab,
      onCloseTab, tokenModel, themeStyle, themeColor, siderColor, roleInfoData, onSaveUserInfo, onCloseUserInfo,
      userInfoVisible, systemStatus, userInfoData, cacheUserData
    } = this.props;

    debugger

    const {refreshView} = this.state;

    // 更新路由Map
    if (!menuMap.get(activeSideMenuKey)) {
      menuMap.set(activeSideMenuKey, activeHeadMenuKey);
      updatePathMap(menuMap);
    }

    const iconStyle = (iconType) => {
      return {
        paddingRight: iconType == "dropdown" ? "5px" : collapsed ? "32px" : "5px",
        fontSize: "16px",
        verticalAlign: "sub",
      }
    };

    // 左侧菜单
    const siderFlag = menuData.sider[activeHeadMenuKey] ? true : false;
    const siderMenu = siderFlag ? menuData.sider[activeHeadMenuKey].filter(item => item.show).map(item => (item.children ?
      <SubMenu key={item.key} title={<span><i class={item.icon} style={iconStyle("submenu")}/><span>{item.name}</span></span>} style={{ background: siderColor }}>
        {
          item.children ? item.children.filter(item => item.isShow).map(subItem => (
            <MenuItem key={subItem.key} path={subItem.url}>
              <i className={subItem.icon} style={iconStyle("submenu")}/><span>{subItem.name}</span>
            </MenuItem>)) : ""
        }
      </SubMenu> :
      <MenuItem key={item.key} path={item.url}>
        <i className={item.icon} style={iconStyle("submenu")}/><span>{item.name}</span>
      </MenuItem>)) : "";

    // Tabs页签编辑，即删除
    const onEdit = (targetKey, type) => {
      if (type != "add") {
        removeTab(targetKey, activeSideMenuKey);
      }
    };

    const dropdownOptions = (
      <Menu style={{ marginTop: "10px", marginRight: "-9px", right: "5px", padding: "5px 5px 5px 0px" }}>
        <MenuItem style={{ marginTop: "3px", marginLeft: "5px" }}>
          <div onClick={() => onRefreshTab()}><i className="ri-refresh-line" style={iconStyle("dropdown")}></i>&nbsp;刷新当前页签</div>
        </MenuItem>
        <MenuItem style={{ marginTop: "3px", marginBottom: "5px", marginLeft: "5px" }}>
          <div onClick={closeCurrentTab}><i className="ri-close-line" style={iconStyle("dropdown")}></i>&nbsp;关闭当前页签</div>
        </MenuItem>
        <MenuItem style={{ marginTop: "3px", marginBottom: "5px", marginLeft: "5px" }}>
          <div onClick={closeOtherTab}><i className="ri-checkbox-indeterminate-line" style={iconStyle("dropdown")}></i>&nbsp;关闭其他页签</div>
        </MenuItem>
        <MenuItem style={{ marginTop: "3px", marginBottom: "5px", marginLeft: "5px" }}>
          <div onClick={onCloseTab}><i className="ri-close-circle-line" style={iconStyle("dropdown")}></i>&nbsp;关闭所有页签</div>
        </MenuItem>
      </Menu>
    );

    const tabOperateOptions = <div style={{marginTop: "5px", marginRight: "10px", marginLeft: "10px"}}>
      <Dropdown overlay={dropdownOptions} overlayClassName={styles.cursorDiv}>
        <Tooltip title={"页签操作"} placement={"left"}>
          <i className="ri-menu-line" style={{ fontSize: "20px" }}></i>
        </Tooltip>
      </Dropdown>
    </div>;

    // 刷新当前页签
    const onRefreshTab = () => {
      this.setState({ refreshView: new Date().getTime() });
    };

    const userInformationProps = {
      tokenModel,
      userInfoData
    }

    const userAuthorizationProps = {
      tokenModel,
      menuData,
      roleInfoData,
      onSaveUserInfo,
      onCloseUserInfo,
      userInfoData,
      cacheUserData
    }

    const isShowSide = activeHeadMenuKey != "home" && activeHeadMenuKey != "userInfo" && themeStyle == "sideMenu" ? true : false;
    const pageUrl = siderFlag ? menuData.sider[activeHeadMenuKey].filter(item => item.key == activeSideMenuKey)[0].url : menuData.main[0].url;
    const userNameUrl = "userName=" + (window._USERINFO_ ? JSON.parse(window._USERINFO_).userName : null);

    debugger

    return (
      <Layout style={{height: "100%"}}>
        <Sider trigger={null} collapsible collapsed={collapsed} width={"220px"}
               style={{ display: isShowSide ? "block" : "none" }} className={styles.siderDiv}>
          <Menu
            mode="inline"
            selectedKeys={activeSideMenuKey ? activeSideMenuKey : ""}
            openKeys={openedSubMenuKey ? openedSubMenuKey : ""}
            style={{height: '100%', background: siderColor}}
            onOpenChange={onOpenSubMenu}
            onClick={onSelectSideMenu}
          >
            {/* 引入左侧菜单 */}
            {siderMenu}
          </Menu>
        </Sider>
        <Layout style={{background: "#fff"}}>
          <Content style={{height: "100%"}}>
            {/* 引入页面显示组件 */}
            {
              activeHeadMenuKey == menuData.main[0].key || (activeHeadMenuKey != "home" && themeStyle == "subMenu") ?
                <iframe id={"homeIFrame_" + activeHeadMenuKey} name={"homeIFrame_" + activeHeadMenuKey}
                        style={{width: "100%", height: "100%", padding: activeHeadMenuKey != "home" ? "20px" : "0", display: "block"}}
                        frameBorder={"no"} src={pageUrl} onLoad={() => this.onLoadIFrame(tokenModel, themeColor, systemStatus)}
                /> :
                userInfoVisible ?
                  <div id={"userInfoPage"} style={{height: "100%", display: "flex", flexDirection: "row", padding: "20px", background: "#f5f5f5"}}>
                    <UserInformation {...userInformationProps} />
                    <UserAuthorization {...userAuthorizationProps} />
                  </div> :
                  <Tabs
                    className={[styles.gapTab, styles.distanceDiv, styles.inlineDiv]}
                    type="editable-card"
                    hideAdd
                    onChange={onTabChange}
                    activeKey={activeSideMenuKey ? activeSideMenuKey : ""}
                    onEdit={onEdit}
                    tabBarExtraContent={tabOperateOptions}
                    tabBarStyle={{display: activeHeadMenuKey == "home" || activeHeadMenuKey == "userInfo" ? "none" : "flex"}}
                  >
                  {
                    paneTabs.map((pane, index) =>
                      <TabPane key={pane.key} tab={pane.name}>
                        <div className={styles.tabDiv} ref={"iframe" + index}>
                          <iframe id={"tabIFrame_" + activeHeadMenuKey + "_" + activeSideMenuKey + index}
                                  name={"tabIFrame_" + activeHeadMenuKey + "_" + activeSideMenuKey + index}
                                  frameBorder={"no"} style={{width: "100%", height: "100%"}} onLoad={() => this.onLoadIFrame(tokenModel, themeColor, systemStatus)}
                                  src={pane.url + (refreshView && activeSideMenuKey == pane.key ? ("?refreshView=" + refreshView + "&") : "?") + userNameUrl}
                          />
                        </div>
                      </TabPane>)
                  }
                </Tabs>
            }
          </Content>
        </Layout>
      </Layout>
    );
  };
}

export default SideTabMenu;
