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

//对对象进行深度合并
const assign = (v = {}, n = {}) => {
    let K = v;
    for (let key in n) {
        if(n.hasOwnProperty(key)){
            const type = Object
            .prototype
            .toString
            .call(K[key]);
            if (K[key] && type === "[object Object]" || type === "[object Array]") {
                K[key] = assign(v[key], n[key]);
            }else {
                K[key] = n[key]
            }
        }
    }
    return K;
}
class TableScroll extends React.Component {
    state = {
        config: {
            data: {
                title: ""
            }
        }
    }
    componentWillReceiveProps(props) {
        const {data = {}} = props, {config} = this.state;
        config != data && this.upData(data);
        this.scroll(this.refs.tabList);
    }
    upData = data => {
        this.setState({config: data});
    }
    componentWillUnmount(){
        //组件销毁
        cancelAnimationFrame(this.timer);
    }
    timer = null //滚动定时器
    scroll = el => {
        cancelAnimationFrame(this.timer);
        if (!el) return;
        let par = el.parentNode;
        let li = el.querySelectorAll("li");
        if (li.length < 1) 
            return;
        let p = li[0].querySelectorAll("p");
        if (!(p.length > 4)) 
            return;
        let pH = p[0].offsetHeight * 4,
            allh = par.scrollHeight,
            h = pH,
            s = 0,
            scorllTime = 5000,
            _this = this;
        _this.timer = requestAnimationFrame(function fn() {
            s = s - 0 + 1;
            if (s < h) {
                for (let q = 0, w = 0; w = li[q++];) {
                    w.style.transform = `translateY(${ - s}px)`;
                }
                _this.timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(_this.timer);
                h += pH;
                if (h > allh) {
                    s = 0;
                    h = pH;
                    setTimeout(() => {
                        for (let q = 0, w = 0; w = li[q++];) {
                            w.style.transform = `translateY(${ 0}px)`;
                        }
                        setTimeout(() => {
                            _this.timer = requestAnimationFrame(fn);
                        }, scorllTime);
                    }, scorllTime);
                } else {
                    setTimeout(() => {
                        _this.timer = requestAnimationFrame(fn);
                    }, scorllTime);
                }
            }
        });
    }
    render() {
        const {
            config,
            config: {
                data: {
                    title = "",
                    tabHeader = [],
                    list = [[]]
                }
            }
        } = this.state;
        return (
            <div style={this.props.style} className={`${styles.box} ${this.props.className}`}>
                <EditTpl data={config} upData={config => this.upData(config)}></EditTpl>
                <div className={styles.boxSpace}>
                    <Title>{title}</Title>
                    <div className={styles.Box2}>
                        <div className={styles.TextHead}>
                            <div className={styles.TabList}>
                                <ul className={styles.copyUl}>
                                    {!!tabHeader.length && tabHeader.map((x, i) => {
                                        return (
                                            <li key={i}>
                                                <h5>{x.name}</h5>
                                                {!!list.length && list.map(z => {
                                                    return !!z.length
                                                        ? z.map((v, k) => {
                                                            if (i == k) {
                                                                return (
                                                                    <p key={k}>{v.value}</p>
                                                                )
                                                            } else {
                                                                return '';
                                                            }
                                                        })
                                                        : '';
                                                })
        }
                                            </li>
                                        )
                                    })
        }
                                </ul>
                                <ul ref="tabList">
                                    {!!tabHeader.length && tabHeader.map((x, i) => {
                                        return (
                                            <li key={i}>
                                                <h5>{x.name}</h5>
                                                {!!list.length && list.map(z => {
                                                    return !!z.length
                                                        ? z.map((v, k) => {
                                                            if (i == k) {
                                                                return (
                                                                    <p key={k}>{v.value}</p>
                                                                )
                                                            } else {
                                                                return '';
                                                            }
                                                        })
                                                        : '';
                                                })
        }
                                            </li>
                                        )
                                    })
        }
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export {TableScroll}
export default TableScroll;