import { Component, OnInit, Input, OnDestroy, EventEmitter, Output, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-horizontal-scroll',
    templateUrl: './app-horizontal-scroll.component.html',
    styleUrls: ['./app-horizontal-scroll.component.scss'],
})
export class AppHorizontalScroll implements AfterViewInit, OnDestroy {

    /**
     * 定时器ID
     */
    intervalId: any;
    /**
     * 距离顶部距离
     */
    marginTop: String;

    /**
     * 传入数组
     */
    itemsArray: Array<any>;

    /**
     * 传入数组的长度
     */
    itemsLength: number;


    /**
     * 传入列表数组
     */
    @Input() set items(val: Array<any>) {
        if (val && val.length >0) {
            this.itemsArray = val;
            this.itemsLength = val.length;
            let i = 0;
            let orginArray = JSON.parse(JSON.stringify(this.itemsArray));
            this.intervalId = setInterval(() => {
                this.marginTop = -this.height * i + 'rem';
                i++;
                this.itemsArray.push(orginArray[(i - 1) % this.itemsLength]);
            }, 3000);
        }
    }

     /**
     *  滚动条内容区高度(以rem为单位，默认值：2)
     *
     * @type {*}
     * @memberof IbizHorizontalScrollComponent
     */
    @Input() height: any =2;
    
    /**
     *  点击事件
     *
     * @type {EventEmitter<any>}
     * @memberof IBizHorizontalScroll
     */
    @Output() itemClick:EventEmitter<any> =new EventEmitter<any>();



    constructor() { }

    ngAfterViewInit(): void {
      
    }


    /**
     * 点击回调
     *
     * @param {*} data
     * @memberof IBizHorizontalScroll
     */
    public clickSingleItem(data:any){
        this.itemClick.emit(data);
    }

    public ngOnDestroy() {
        clearInterval(this.intervalId);
    }
}
