/* eslint-disable no-undef,function-paren-newline */
import React, { Component } from 'react';
import { BarsOutlined, StarFilled } from '@ant-design/icons';
import { Button } from 'antd-v4';
import navdefault from '@/assets/navdefault.svg';
import config from '@/utils/config';
import * as commonFunc from '@/components/Common/commonFunc';
import styles from './index.less';
import commonConfig from '../../utils/config';

class MenuPanelComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expend: false,
      expendSid: null,
    };
    this.timer = null;
  }

  componentWillMount() {
    this.getMenuPanel();
  }

  componentDidMount() {
    document.addEventListener('click', (e) => {
      let count = 0;
      if (e.path && e.path.length > 0) { /* chrome最新版本不支持e.path */
        e.path.forEach((item) => {
          if (item.id === 'allNavMenus' || item.id === 'allBtnNav') {
            count += 1;
          }
        });
      }
      if (e.target) {
        const condition1 = e.target.id === 'allNavMenus' || e.target.id === 'allBtnNav';
        const condition2 = typeof e.target.className === 'string' && e.target.className.includes('submenu');
        if (condition1 || condition2) {
          count += 1;
        } else if (e.target.parentNode) {
          if (
            e.target.parentNode.id === 'allNavMenus' ||
            e.target.parentNode.id === 'allBtnNav' ||
            (typeof e.target.parentNode.className === 'string' && e.target.parentNode.className.includes('menuMain'))
          ) {
            count += 1;
          } else if (e.target.parentNode.parentNode) {
            if (e.target.parentNode.parentNode.id === 'allNavMenus' || e.target.parentNode.parentNode.id === 'allBtnNav') {
              count += 1;
            }
          }
        }
      }
      if (!count) {
        if (this.state.expend) {
          this.setState({
            expend: false,
          });
        }
      }
    });
    document.addEventListener('mouseover', (e) => {
      if (
        typeof e.target.className === 'string' &&
        (e.target.className.indexOf('ant-tabs-nav') !== -1 || e.target.className.indexOf('ant-tabs-tab-btn') !== -1)
      ) {
        this.setState({
          expendSid: null,
        });
      }
    });
  }

  componentWillReceiveProps(nextProps) {
    const { currentPane, logoImageInfo } = nextProps.app;
    const btnDisabled = !!(currentPane !== undefined && currentPane.newRecordFlag !== undefined);/* 全部导航按钮的状态 */
    this.setState({ btnDisabled, logoImageInfo });
  }

  setExpendSid(e, leave) {
    if (leave && this.timer) {
      clearTimeout(this.timer);
      return;
    }
    this.timer = setTimeout(() => {
      this.setState({
        expendSid: e,
      });
    }, 50);
  }
  getMenuPanel = () => {
    const url = `${config.server_host}business/getBuMenu?sModelsId=100`;
    this.props.onGetMenuPanel(url);
  }
  handleCommonMenu = async (e, child) => {
    e.stopPropagation();
    const { sId, sName, sMenuName } = child;
    const value = { sFormId: sId, sFormUrl: sName, sFormName: sMenuName };
    let currentElement = e.target.parentNode.parentNode;
    if (e.target.nodeName === 'svg') {
      currentElement = e.target.parentNode;
    }
    if (currentElement.className.indexOf('selected') === -1) {
      const addUrl = `${config.server_host}parameter/addParameter?sModelsId=${sId}`;
      this.props.onAddParameter(value, addUrl);
    } else {
      const delUrl = `${config.server_host}parameter/deleteParameter?sModelsId=${sId}`;
      this.props.onDelParameter(value, delUrl);
    }
    // todo更新数据，重新渲染
    setTimeout(() => {
      this.getMenuPanel();
    }, 200);
  };

  handleTabClick = (e) => {
    if (!e.bHasRole) return;
    const { sLanguage } = this.props.app.userinfo;
    const paneKey = new Date().getTime().toString();
    const formId = e.sId;
    const route = e.sName;
    const title = e[sLanguage] || e.sMenuName;
    const sModelsType = e.sModelType;
    const { sProcName } = e;
    for (const each of this.props.app.panes) { /* 解决导航栏打开页签，Modal不消失问题 */
      each.notCurrentPane = true;
    }
    const pane = {
      title, route, formId, key: paneKey, sModelsType, sProcName, notCurrentPane: false,
    };
    let routeNew = route;
    if (route && route.includes('http')) {
      console.log('route', route);
      console.log('sModelsType:::', sModelsType);
      const sModelsTypeNew = sModelsType !== undefined ? sModelsType : '';
      const { userinfo } = this.props.app;
      routeNew = routeNew.replace('{sBrandsId}', userinfo.sBrandsId).replace('{sSubsidiaryId}', userinfo.sSubsidiaryId).replace('{sUserName}', userinfo.sUserName)
        .replace('{sUserNo}', userinfo.sUserNo);
      const parameter = sModelsTypeNew.replace('{sBrandsId}', userinfo.sBrandsId).replace('{sSubsidiaryId}', userinfo.sSubsidiaryId).replace('{sUserName}', userinfo.sUserName)
        .replace('{sUserNo}', userinfo.sUserNo);
      window.open(routeNew, parameter);
      return;
    }
    this.props.onAddPane(pane);
    this.setState({
      expend: false,
    });
  };

  handleButtonClick = () => {
    this.setState({
      expend: !this.state.expend,
    });
  };

  render() {
    const { btnDisabled, logoImageInfo = [] } = this.state;
    const { menuPanel, app } = this.props;
    const { userinfo = {} } = app;
    const { sLanguage } = userinfo;
    const genSubmenuList = (data) => {
      const domList = [];
      if (data !== undefined && data !== []) {
        data.forEach((item) => {
          const dom = (
            <div className={styles.submenuBody} key={item.sId}>
              <div className={styles.submenuTitle}>
                {item[sLanguage]}
                {/* {item.sMenuName} */}
              </div>
              {
                item.children !== undefined && item.children.length > 0 && item.children.map((item2) => {
                  return (
                    <div className={styles.submenuName} key={item2.sId}>
                      <span className={item2.bHasRole ? '' : styles.submenuReadonly} onClick={() => this.handleTabClick(item2)}>
                        {/* {item2.sMenuName} */}
                        {item2[sLanguage]}
                      </span>
                      {
                        item2.bHasRole && <StarFilled
                          id={item2.sId}
                          onClick={e => this.handleCommonMenu(e, item2)}
                          className={`${styles.actionSelect} ${item2.iCommonlyUsed === '1' ? 'actionSelect__selected' : ''}`}
                        />
                      }
                    </div>
                  );
                })
              }
            </div>
          );
          domList.push(dom);
        });
      }
      return domList;
    };
    const genMenuList = () => {
      const domList = [];
      if (!menuPanel.panelMenus) {
        return [];
      } else {
        menuPanel.panelMenus.forEach((item) => {
          let dataUrl = '';
          const slogoPath = item.sTitleLogoPath;
          if (slogoPath !== undefined && slogoPath !== '') {
            dataUrl = `${commonConfig.file_host}file/download?savePathStr=${slogoPath}&sModelsId=100`;
          } else {
            dataUrl = navdefault;
          }
          const dom = (
            <div
              className={`${styles.menuMainItem} ${this.state.expendSid === item.sId ? styles.menuMainItem__active : ''}`}
              onMouseEnter={() => this.setExpendSid(item.sId)}
              onMouseLeave={() => this.setExpendSid(item.sId, true)}
              key={item.sId}
            >
              <div className={styles.menuMainTitle}>
                <div className={styles.menuMainLeftIcon}>
                  <img src={dataUrl} alt="" />
                </div>
                <span>{item[sLanguage]}</span>
                {/* <span>{item.sMenuName}</span> */}
              </div>
              {
                (item.children && item.children.length > 0) && (
                  <div className={styles.submenuContiner}>
                    {genSubmenuList(item.children)}
                    <div className={styles.paddingDiv} />
                  </div>)
              }
            </div>
          );
          domList.push(dom);
        });
      }
      return domList;
    };
    // eslint-disable-next-line no-unused-vars
    const AllNav = commonFunc.showMessage(this.props.app.commonConst, 'AllNav');/* 全部导航 */
    // 修改favicon
    const favicon = logoImageInfo[0];
    if (favicon) {
      let $favicon = document.querySelector('link[rel="icon"]');
      if ($favicon) {
        $favicon.href = favicon;
      } else {
        $favicon = document.createElement('link');
        $favicon.rel = 'icon';
        $favicon.href = favicon;
        document.head.appendChild($favicon);
      }
    }
    // 修改headerlogo
    const xlyLoginHeaderLogo = logoImageInfo[2];
    const root = document.querySelector('#root');
    root.style.removeProperty('--xly-login-header-logo');
    if (xlyLoginHeaderLogo) {
      root.style.setProperty('--xly-login-header-logo', `url(${xlyLoginHeaderLogo})`);
    }
    return (
      <div className={sLanguage === 'sEnglish' ? styles.xlyerpEnglish : ''}>
        <div className={styles.allBtnNavStyle} >
          <div className={styles.logo} />
          <Button id="allBtnNav" onClick={this.handleButtonClick} disabled={btnDisabled}>
            <BarsOutlined />{AllNav}
          </Button>
        </div>
        <div id="allNavMenus" style={{ background: '#343848' }}>
          <div className={`${styles.menuList} menuList`} style={{ display: this.state.expend ? 'block' : 'none' }}>
            {genMenuList()}
          </div>
        </div>
      </div>
    );
  }
}

export default MenuPanelComponent;