import React from "react";
import styles from "./index.css";
import EditTpl from "../edit/index";

class ChildMenu extends React.Component {
    navTitleNav = null
    addRef = e =>{
        this.navTitleNav = e || this.navTitleNav;
    }
    childClick = childIndex =>{
        typeof this.props.onClick == "function" && this.props.onClick(childIndex);
        if(!this.navTitleNav)return;
        const el = this.navTitleNav,
            num = 11;
        const w = el.offsetWidth / num;
        const site = w * (childIndex + 1);
        let n = el.offsetWidth / 2 - site + el.scrollLeft;
        if (typeof childIndex == 'boolean') {
            n = childIndex
                ? 120
                : -120;
                childIndex = -99999;
        }
        el.scrollBy({
            top: 0,
            left: childIndex == 0
                ? -99999
                : n > 0
                    ? -w
                    : w,
            behavior: 'smooth'
        });
    }
    render(){
        const upData = typeof this.props.upData == 'function'?this.props.upData:e=>{
            console.error("未绑定更新函数",e);
        };
        const {data = {
            data:{
                list:[]
            }
        },childIndex} = this.props,
        {data:{list = []}} = data;
        return (
            <nav className={"tag " + styles.rightBoxNav}>
                <EditTpl style={{top:"40%",bottom:"-40%"}} data={data} mName={"LeftMenu"} upData={upData}></EditTpl>
                <div className={styles.navTab} ref={e=>this.addRef(e)}>
                    {
                        !!list.length && list.map((value, index) => {
                            return (
                                <div key={index} className={`${styles.linkSpan} ${childIndex == index?styles.active:''}`} onClick={()=>this.childClick(index)}>
                                    <i className={`iconfont ${value.icon} ${styles.iconfont}`}></i>
                                    <span>{value.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </nav>
        )
    }
}
export {
    ChildMenu
}