/*
  *  核算编辑
  *  数据查看锚点
  * @Author:    黎永顺
  * @Date:      2025/2/10
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import classnames from "classnames";

const getLabel = WeaLocaleProvider.getLabel;

class CalcAnchorList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false, currentIndex: 0
    };
    this.isClickRef = null;
    this.timerRef = null;
  }

  componentDidMount() {
    document.getElementById("salary_anchor_area").addEventListener("scroll", this.handlerScroll);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({
      collapsed: false,
      currentIndex: 0
    });
  }

  componentWillUnmount() {
    document.getElementById("salary_anchor_area").removeEventListener("scroll", this.handlerScroll);
  }

  handlerScroll = () => {
    // 点击锚点时，不执行滚动函数
    if (this.isClickRef) return;
    // 获取滚动容器的滚动高度（这里相对于#salary_anchor_area滚动的）
    const scrollTop = document.getElementById("salary_anchor_area").scrollTop;
    // 获取所有wea-search-group anchor_开头的元素集合
    const contentList = document.querySelectorAll("[class^='wea-search-group anchor_']");
    const offsetTopArr = [];
    contentList.forEach((item) => {
      // 获取每个wea-search-group anchor_开头的元素的offsetTop
      offsetTopArr.push(item.offsetTop);
    });
    for (let i = 0; i < offsetTopArr.length; i++) {
      // 当滚动条高度达到对应wea-search-group anchor_开头的元素的滚动高度、则将锚点设置为高亮状态
      if (scrollTop + 190 >= offsetTopArr[i]) this.setState({ currentIndex: i });
    }
  };
  onClickAnchor = (item, index) => {
    const anchorElement = document.getElementById("salary_anchor_area");
    const el = document.querySelector(`.anchor_${item.salarySobItemGroupId}`);
    if (el) {
      anchorElement.scroll({ top: el.offsetTop, behavior: "smooth" });
    }
    this.setState({ currentIndex: index });
    // 点击时设置为true,为了防止同时执行滚动事件
    this.isClickRef = true;
    // 清除定时器，防止滚动事件触发、出现走马灯闪烁问题
    if (this.timerRef) clearTimeout(this.timerRef);
    this.timerRef = setTimeout(() => {
      this.isClickRef = false;
    }, 1000);
  };

  render() {
    const { collapsed, currentIndex } = this.state, { datas } = this.props;
    return (
      <div id="anchorList-contianer" style={{ position: "sticky", top: 8, zIndex: 10086 }}>
        <div className={classnames("anchor-list-wrapper", { "anchor-list-collapsed": collapsed })}>
          {
            collapsed ?
              <div className="anchor-list-collapsed-btn">
                <i className="icon-coms02-Initialize-template"
                   onClick={() => this.setState({ collapsed: !collapsed })}/>
              </div> :
              <React.Fragment>
                <div className="anchor-list-header">
                  <i className="icon-coms-right" onClick={() => this.setState({ collapsed: !collapsed })}/>
                </div>
                <div className="anchor-list">
                  <div className="anchor-list-ink">
                    <span className="anchor-list-ink-ball visible"
                          style={{ top: `${2.5 + currentIndex * 27.7}px`, height: 23 }}/>
                  </div>
                  {_.map(datas, (o, i) => (
                    <div className={classnames("anchor-list-link", { "anchor-list-link-active": currentIndex === i })}
                         onClick={() => this.onClickAnchor(o, i)}>
                      <span
                        className={classnames("anchor-list-link-title", { "anchor-list-link-title-active": currentIndex === i })}>{o.salarySobItemGroupName}</span>
                    </div>)
                  )}
                </div>
              </React.Fragment>
          }
        </div>
      </div>
    );
  }
}

export default CalcAnchorList;
