import { Menu } from 'antd';

const SubMenu = Menu.SubMenu;
const ItemMenu = Menu.Item;
import cloneDeep from 'lodash/cloneDeep';
import { addContentPath } from '../util/pathUtil';
class WeaMenuInline extends React.Component {
  constructor(props) {
    super(props);
    const openKeys = this.getOpenKeys(props.defaultSelectedKey, props.datas);
    // console.log("openKeys1:",openKeys);
    this.state = {
      mode: props.mode || 'Inline',
      datas: props.datas || [],
      inlineWidth: props.inlineWidth || 197,
      verticalWidth: props.verticalWidth || 61,
      fontSize: props.fontSize,
      openKeys: openKeys || [],
      selectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      defaultSelectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      canClick: true,
      selectedType: 0,
    };
  }
  componentWillReceiveProps(nextProps) {
    // console.log('datas:',this.props.datas,nextProps.datas,this.props.datas.toString() !== nextProps.datas.toString());
    // console.log('defaultSelectedKey',this.props.defaultSelectedKey,nextProps.defaultSelectedKey,this.props.defaultSelectedKey !== nextProps.defaultSelectedKey);
    // console.log('defaultSelectedKey',this.state.defaultSelectedKey,nextProps.defaultSelectedKey,this.state.defaultSelectedKey !== nextProps.defaultSelectedKey);

    const openKeys = this.getOpenKeys(nextProps.defaultSelectedKey, nextProps.datas);
    if (
      JSON.stringify(this.props.datas) !== JSON.stringify(nextProps.datas) ||
      (this.props.defaultSelectedKey !== nextProps.defaultSelectedKey && this.state.defaultSelectedKey !== nextProps.defaultSelectedKey) ||
      this.props.fontSize !== nextProps.fontSize
    ) {
      // 计算出openKeys
      let newProps = {
        datas: nextProps.datas || [],
        fontSize: nextProps.fontSize,
        openKeys: openKeys || [],
        defaultSelectedKey: nextProps.defaultSelectedKey || '',
        selectedKey: nextProps.defaultSelectedKey || '',
      };
      // if(this.props.defaultSelectedKey !== nextProps.defaultSelectedKey&&this.state.defaultSelectedKey !== nextProps.defaultSelectedKey)
      //    newProps.openKeys = this.getOpenKeys(nextProps.defaultSelectedKey,nextProps.datas);
      this.setState(newProps);
    }
  }
  render() {
    const { mode, datas, verticalWidth } = this.state;
    const { openKeys, selectedType } = this.state;
    let that = this;
    return (
      <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@fc6gtr`}
        inlineIndent={verticalWidth / 2 - 9}
        mode={mode}
        openKeys={selectedType == 1 ? [] : openKeys}
        selectedKeys={[]}
        onOpen={(e) => {
          that.changeOpen(e.openKeys);
        }}
        onClose={(e) => {
          that.changeClose(e.openKeys);
        }}
        onClick={(e) => {
          that.changeSelectedKey(e.key, that.getDataByKey(e.key, datas), 0);
        }}
      >
        {this.renderMenuItem(datas, 1)}
      </Menu>
    );
  }

  getOpenKeys(key, datas) {
    const data = this.getDataByKey(key, datas);
    const treeKey = data.treeKey;
    let treeKeyArr = treeKey ? treeKey.split('{$}') : [];
    // console.log("treeKey:",treeKey," treeKeyArr:",treeKeyArr);
    return treeKeyArr;
  }
  onModeChange() {
    const { mode } = this.state;
    if (typeof this.props.onModeChange == 'function') {
      this.props.onModeChange(mode);
    }
  }
  getDataByKey(key, datas) {
    let that = this;
    let obj = '';
    for (let i = 0; i < datas.length && obj == ''; i++) {
      if (datas[i].id == key) {
        obj = cloneDeep(datas[i]);
      }
      if (obj == '' && datas[i].child && datas[i].child.length > 0) {
        obj = that.getDataByKey(key, datas[i].child);
      }
    }
    return obj;
  }
  changeSelectedKey(key, data, type) {
    if (window.event && window.event.shiftKey) {
      window.open(addContentPath(data.fullrouteurl || data.url), '_blank');
      return;
    }

    if (data && data.target != 'mainFrame') {
      window.open(addContentPath(data.fullrouteurl || data.url), data.target);
      return;
    }
    const { canClick } = this.state;
    const { clickBlock } = this.props;
    const that = this;
    // let d = new Date();
    // console.log(canClick,d.getTime());
    if (canClick) {
      this.setState({
        canClick: false,
        selectedKey: key,
        selectedType: type,
      });
      if (typeof this.props.onSelect == 'function') {
        this.props.onSelect(key, data, type);
      }
      setTimeout(() => {
        that.setState({ canClick: true });
      }, clickBlock || 300);
    }
  }
  changeOpen(openKeys) {
    this.setState({
      openKeys,
    });
    if (typeof this.props.onOpenCallback == 'function') {
      this.props.onOpenCallback();
    }
  }
  changeClose(openKeys) {
    this.setState({
      openKeys,
    });
  }
  renderMenuItem(datas, level) {
    const selectedClassName = 'wea-menu-selected';
    let that = this;
    const { selectedKey, canClick } = this.state;
    let datasArr = new Array();
    for (let i = 0; i < datas.length; i++) {
      const data = datas[i];
      const isSubMenu = data.child && data.child.length > 0;
      const isSelected = selectedKey == data.id || `verTop_${selectedKey}` == data.id;
      if (data.isInlineHide !== 'true') {
        if (isSubMenu) {
          datasArr.push(
            <SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@0x72ew@${data.id}`}
              disabled={!canClick}
              selectedClassName={isSelected ? selectedClassName : ''}
              key={data.id}
              onTitleClick={(e) => {
                that.changeSelectedKey(e.key, data, 0);
              }}
              title={that.renderTitle(data, level)}
            >
              {that.renderMenuItem(data.child, level + 1)}
            </SubMenu>,
          );
        } else {
          datasArr.push(
            <ItemMenu ecId={`${this && this.props && this.props.ecId || ''}_ItemMenu@8u33tz@${data.id}`} className={isSelected ? selectedClassName : ''} key={data.id}>
              {that.renderTitle(data, level)}
            </ItemMenu>,
          );
        }
      }
    }
    return datasArr;
  }

  renderTitle(data, level) {
    const { verticalWidth, fontSize } = this.state;
    const that = this;
    const needIcon = level == 1;
    const underLineStyle = data.hasUnderLine == 'true' ? { borderBottom: '1px solid #bbb' } : {};
    const topLineStyle = data.hasTopLine == 'true' ? { borderTop: '1px solid #bbb' } : {};
    const borderStyle = Object.assign({ position: 'relative', height: '42px' }, underLineStyle, topLineStyle);
    const outStyle = { position: 'absolute', display: 'inline-block', width: needIcon ? '65%' : '90%', height: '42px' };    
    const innerStyle = { display: 'inline-block', maxWidth: data.countId ? 'calc(100% - 40px)' : '92%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' };
    const tagStyle = data.tagColor ? { display: 'inline-block', width: '10px', height: '10px', border: '1px solid #bbb', backgroundColor: data.tagColor, verticalAlign: '16px' } : {};
    const countStyle = data.countId ? { display: 'inline-block', width: '40px', overflow: 'hidden' } : {};
    const iconMarginR = verticalWidth / 2 - 9;

    const iconCom =
      data.iconType == '2' && data.iconImgSrc ? (
        <img
          src={addContentPath(data.iconImgSrc)}
          alt=""
          className="wea-menu-title-icon"
          style={{ display: 'inline-block', width: '18px', height: '18px', verticalAlign: '-4px', marginRight: iconMarginR }}
          title={data.titleUrlName || ''}
          onClick={(e) => {
            data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
            data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
          }}
        />
      ) : data.icon ? (
        <i
          className={`wea-menu-title-icon wevicon ${data.icon}`}
          style={{ display: 'inline-block', fontSize: '18px', verticalAlign: 'middle', marginRight: iconMarginR }}
          title={data.titleUrlName || ''}
          onClick={(e) => {
            data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
            data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
          }}
        />
      ) : (
        <i
          className={`wea-menu-title-icon wevicon wevicon-menu-default wevicon-menu-${data.levelid}`}
          style={{ display: 'inline-block', fontSize: '18px', verticalAlign: 'middle', marginRight: iconMarginR }}
          title={data.titleUrlName || ''}
          onClick={(e) => {
            data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
            data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
          }}
        />
      );

    const urlIconCom =
      data.titleUrlIcon && !data.titleUrlName ? (
        <img
          src={addContentPath(data.titleUrlIcon)}
          alt=""
          className="wea-menu-url-icon"
          style={{ width: 16, height: 16, position: 'absolute', right: 20, top: 13 }}
          onClick={(e) => {
            that.changeSelectedKey(data.id, data, 1);
            e.stopPropagation();
          }}
        />
      ) : null;
    
    return (
      <div data-id={data.numId} style={borderStyle}>
        {needIcon ? iconCom : ''}
        <div title={data.name} className="wea-menu-tip-out" style={outStyle}>
          {data.tagColor && <span style={tagStyle} />}
          <span className={`wea-menu-tip-inner wea-menu-title wea-f${fontSize}`} style={innerStyle}>
            {data.name}
          </span>
          {data.countId && <span id={data.countId} style={countStyle} />}
        </div>
        <span id={`num_${data.numId}`} style={{ position: 'absolute', top: 0, right: 0 }} />
        {urlIconCom}
      </div>
    );
  }
}

export default WeaMenuInline;