/**
 * js动画库
 */
import React from "react";
const style = (el,style) =>{
    Object.keys(style).map(x=>{
        el.style[x] = style[x];
    });
    return el;
}
const getStyle = (obj,attr)=>{
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return document.defaultView.getComputedStyle(obj,null)[attr];
    }
}
/**
 * this.props  
 * index  下标跟随
 * active  点击回调函数 => 当前index
 * time 滚动停顿时间
 * variable 是否跟随滚轮动态调整方向  默认不跟随 false true
 * reverse 滚动方向 默认下往上 右向左 false  true
 * row 列数  控制一次滚动多少个
 * scroll 强制滚动
 */
class Scroll extends React.Component {
    //是否跟随滚轮动态调整方向  默认不跟随 false true
    variable = null
    //滚动方向 默认下往上 右向左 false  true
    reverse = null
    //列表容器DOM
    el = null
    //防止多次执行滚动
    timeOut = null
    /**
     * 执行滚动
     * el 列表容器
     * active当前滚动激项回调函数
     * time 滚动间隔
     * 
     */
    start = ({
        el,
        active = () => {},
        index = 0,
        time = 10000,
        ...othprops
    }) => {
        clearTimeout(this.timeOut);
        time && (this.timeOut = setTimeout(() => {
            this.run({
                el,
                active,
                index,
                ...othprops
            }, index => {
                this.start({el, active, index, time,...othprops});
            });
        }, time));
    }
    run = ({
        el,
        active = () => {},
        index = 0,
        reverse = false,
        row = 1,
        scroll = false
    }, end)=>{
        const {
            children = []
        } = el,
        oneEl = children[0];
        let direction = false,noScroll = true;
        if(el.scrollHeight>el.clientHeight){
            //console.log("垂直滚动条",el.scrollHeight,el.clientHeight,el.scrollTop);
            direction = true;
            noScroll = false;
        }
        if(el.scrollWidth>el.clientWidth){
            //console.log("水平滚动条",el.scrollWidth,el.clientWidth);
            direction = false;
            noScroll = false;
        }
        if(noScroll)return;
                
        // //左-右
        style(el,{
            transform: `rotateZ(${reverse?180:0}deg)`
        });
        for (let o = 0,t = false;t = children[o]; o++) {
            style(t,{
                transition:`all ${'800ms'}`,
                transform:`translate${direction?'Y':'X'}(-100%) ${reverse?'rotateZ(180deg)':''}`
            });
            o || style(t,{
                opacity:0
            })        
        }
        function oneElAni(e) {
            this.removeEventListener("transitionend", oneElAni, false);
            //循环追加
            for(let i = 0;i < row;i++){
                el.appendChild(children[0]);
            }
            for (let o = 0,t = false;t = children[o]; o++) {
                style(t,{
                    transition:"none",
                    transform:`translate${direction?'Y':'X'}(0) ${reverse?'rotateZ(180deg)':''}`,
                    opacity:1
                });
            }
            index = index++ < (children.length - 1)
                ? index
                : 0;
            typeof active == "function" && active(index);
            typeof end == "function" && end(index);
        }
        oneEl.removeEventListener("transitionend", oneElAni, false);
        oneEl.addEventListener("transitionend", oneElAni, false);
    }
    componentDidMount(){
        this.variable = this.props.variable;
    }
    componentDidUpdate() {
        //执行滚动
        const start = ()=>{
            this.start({
                el: this.el,
                ...(this.props),
                reverse:this.variable?this.reverse:this.props.reverse
            });
        }
        if (this.el) {
            this.el.style.overflow = "hidden";
            start();
            //鼠标移入暂停滚动
            this.el.onmouseover = e => clearTimeout(this.timeOut);
            //鼠标移除
            this.el.onmouseout = e => start();
            //滚轮time
            let wheelTime = true;
            //滚轮快速滚动
            this.el.onmousewheel = e => {
                this.reverse = e.wheelDelta>0
                if(wheelTime){
                    //执行转向
                    const {
                        children = []
                    } = this.el;
                    // //左-右
                    // style(this.el,{
                    //     transform: `rotateZ(${this.reverse?180:0}deg)`
                    // });
                    // for (let o = 0,t = false;t = children[o]; o++) {
                    //     style(t,{
                    //         //transform:`${this.reverse?'rotateZ(180deg)':'rotateZ(0deg)'}`
                    //     });      
                    // }
                    // return;
                    this.run({
                        el: this.el,
                        ...(this.props),
                        reverse:this.reverse
                    },e=>{
                        wheelTime = true;
                    });
                }
                wheelTime = false;
                //js阻止链接默认行为，没有停止冒泡
                //e.preventDefault();
                //js阻止事件冒泡
                e.cancelBubble = true;
                e.stopPropagation();
                return false;
            };
        }
    }
    componentWillUnmount(){
        clearTimeout(this.timeOut);
    }
    render() {
        return (
            <div
                style={this.props.style}
                className={this.props.className}
                ref={el => this.el = el}>
                {this.props.children}
            </div>
        )
    }
}
export {Scroll}