Vue.component("many-chart", {
    template: `
        <div class="many-chart-max" ref="process"  @mouseover="MouseEnter" @mouseout="MouseLeave"> 
            <div class="many-chart-min" :style="{'width': (data.length * 270) +'px'}">
                <div style="width: 270px;" v-for="(item,i) in forData">
                    <material-many-bar-chart :yaxis="i==0?true:false" :height="200"  :data="item"></material-many-bar-chart>
                    <div class="many-chart-text" style="text-align: center ">{{item.text}}</div>
                </div>
            </div>
            
        </div>
    `,
    props: {
        data:{
            type:Array
        }
    },
    data() {
        return {
            forData:[],
            index:0,
            interval:''
        }
    },
    created(){
        this.init()
    },
    mounted() {

    },
    methods: {
        init(){
            this.index = 0
            var data = this.data
            data.map(x=>{
                x.merge = x.yData_1.concat(x.yData_2)
                return
            })
            let max = 0
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].merge.length ; j++) {
                    if(max < Number(data[i].merge[j])){
                        max = Number(data[i].merge[j])
                    }
                }
            }
            data.map(x=>{
                x.max = max
                return
            })
            this.forData = data
            this.interval = setInterval(this.scroll, 5000);
        },
        scroll() {
            let offsetHeight = 270;
            if(this.index == this.forData.length - 5){
                this.index = 0
            }else{
                this.index += 1
            }
            $(this.$refs.process).animate({scrollLeft:(offsetHeight * this.index)+'px'})

        },
        MouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        },
        MouseLeave() {//鼠标离开继续滚动
            this.interval = setInterval(this.scroll, 5000);
        },
    },
    watch:{
        data:function(){
            clearInterval(this.interval);
            this.init()
        }
    }
})