import React, { Component } from "react"
import "./transitionCom.css"
const countDefault = 3; //存入多少个
const leftSpanceDefault = 2; //间隔
const timeSlideDefault = 1;  //滑动时间
export default class TransitionCom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ...props,
        }
    }
    static getDerivedStateFromProps(props) {
        let { children, count = countDefault, leftSpance = leftSpanceDefault, timeSlide = timeSlideDefault } = props
        if (children.length >= count + 1) {
            var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
            var left = (parseFloat(Width) + leftSpance) * (children.length - count)
            var objectTransition = document.getElementById("objectTransition")
            objectTransition.style.transition = timeSlide + "s all 0s"
            objectTransition.style.left = -left + "%";
        }
        return {
            children: children
        }
    }
    componentDidUpdate() {
        let { children, count = countDefault, leftSpance = leftSpanceDefault, timeSlide = timeSlideDefault } = this.props
        if (children.length < count + 1) {
            var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
            var objectTransition = document.getElementById("objectTransition")
            var childrenNodes = objectTransition.childNodes;//他的子节点
            var nowNodes = childrenNodes[childrenNodes.length - 1];//子节点的最后一个
            nowNodes.style.left = "100%";
            nowNodes.style.transition = timeSlide + "s all 0s"
            setTimeout(() => {
                nowNodes.style.left = (parseFloat(Width) + leftSpance) * (childrenNodes.length - 1) + "%";
            }, timeSlide * 1000)
        }
    }
    render() {
        let { children } = this.state;
        let { count = countDefault, leftSpance = leftSpanceDefault } = this.props;
        return (<div className="objectTransitionOther">
            <div id="objectTransition" className="objectTransition">
                {
                    children.map((item, index) => {
                        var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
                        if (index >= 1 && index < 3) {
                            return <div style={{ width: Width + "%" }} key={index}>{item}</div>
                        } else {
                            return <div style={{ width: Width + "%", left: (parseFloat(Width) + leftSpance) * index + "%" }} key={index}>{item}</div>
                        }

                    })
                }
            </div>
        </div>)
    }
}