import React from 'react';
import { Layout } from 'antd';
import { inject, observer } from 'mobx-react';
import Md from '../../components/md';
import './index.less';

const stepLength = 3;

@inject('global')
@observer
class HelpDoc extends React.Component {
  constructor(props) {
    super(props);
    const stepList = ['步骤一', '步骤二', '步骤三'];
    this.state = { showImg: '', step: 1, stepList };
  }

  setShowImg(img) {
    this.setState({ showImg: img });
  }

  scrollEvent = e => {
    for (let i = 0; i < stepLength - 1; i++) {
      const blockTop = this[`block${i + 1}`].offsetTop - 146;
      if (e.target.scrollTop >= blockTop - 200) {
        this.setState({ step: i + 1 });
      }
    }
    if (
      e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight
      || e.target.scrollTop >= this.block7.offsetTop - 146 - 200
    ) {
      this.setState({ step: stepLength });
    }
  };

  scrollToAnchor = target => {
    clearInterval(this.timer);
    const intervalTime = 20; // 时间间隔
    const allTime = 300; // 移动总时间
    const startTargetTop = target.offsetTop - 145; // 第一次判断的目标高度
    const startBlockTop = this.rightBlock.scrollTop; // 第一次判断的顶部高度
    const startScrollHeight = Math.abs(startTargetTop - startBlockTop);
    const scrollStr = Math.floor(startScrollHeight * intervalTime / allTime); // 计算单位事件的位移距离
    this.timer = setInterval(() => {
      const targetTop = target.offsetTop - 145;
      const blockTop = this.rightBlock.scrollTop;
      if (blockTop === targetTop) {
        // 距离一样，不用移动
        clearInterval(this.timer);
      } else if (blockTop > targetTop) {
        // 向下移动
        const scrollHeight = Math.abs(targetTop - blockTop);
        const runScrollHeight = scrollHeight > scrollStr ? scrollStr : scrollHeight;
        this.rightBlock.scrollBy(0, -runScrollHeight);
        if (blockTop <= targetTop + 145) {
          clearInterval(this.timer);
        }
      } else {
        // 向上移动
        const scrollHeight = Math.abs(targetTop - blockTop);
        const runScrollHeight = scrollHeight > scrollStr ? scrollStr : scrollHeight;
        this.rightBlock.scrollBy(0, runScrollHeight);
        if (blockTop >= targetTop || blockTop >= this.rightBlock.scrollHeight - this.rightBlock.clientHeight) {
          clearInterval(this.timer);
        }
      }
    }, intervalTime);
  };

  turnStep(step) {
    console.log(step);
  }

  render() {
    return (
      <Layout className="help-content common-layout">
        {/* <Layout.Header>帮助文档</Layout.Header> */}
        <Layout.Content className="content">
          <div className="left-wrap">
            <p className="dir-item active">用户指南</p>
            <p className="dir-item">其他内容</p>
          </div>
          <div className="right-wrap">
            <h2 className="right-header">用户指南</h2>
            <ul className="right-tags">
              {this.state.stepList.map((item, index) => (
                <li
                  key={item}
                  className={`tag-item ${index + 1 === this.state.step ? 'active' : ''}`}
                  onClick={() => this.turnStep(index + 1)}
                >
                  <span className="tab-text">{item}</span>
                </li>
              ))}
            </ul>
            <div className="right-content-wrap">
              <div className="markdown-wrap">
                <Md mdName="guide.md" />
              </div>
            </div>
          </div>
        </Layout.Content>
        {this.state.showImg && (
          <div className="show-wrap" onClick={() => this.setShowImg('')}>
            <div className="show-wrap-content">
              <img src={this.state.showImg} alt="show" onClick={e => e.stopPropagation()} />
            </div>
          </div>
        )}
      </Layout>
    );
  }
}

export default HelpDoc;