import {Component, ElementRef, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams, Slides} from 'ionic-angular';
import {LearningDoPage} from "../learning-do/learning-do";
import {LearningResultPage} from "../learning-result/learning-result";
import {LearningExplainPage} from "../learning-explain/learning-explain";


@IonicPage()
@Component({
    selector: 'page-learning-list',
    templateUrl: 'learning-list.html',
})
export class LearningListPage {
    @ViewChild(Slides) slides: Slides;
    @ViewChild('tips') tips:ElementRef;

    index;
    tabsList = [
        {name:"全部",},
        {name:"未完成",},
        {name:"已完成",}
    ];
    allList = [];
    noList = [];
    doList = [];

    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        let itemWidth = window.screen.width /3;
        this.tips.nativeElement.style.left = itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
    }

    change(index) {

        let itemWidth = window.screen.width /3;
        // 自身div的一半 - 滑块的一半
        this.tips.nativeElement.style.left = itemWidth * index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
        this.slides.slideTo(index)
        this.index = index;
    }

    //
    slideChanged(){
        this.index = this.slides.getActiveIndex();
        if(this.index < 3){
            let itemWidth = window.screen.width /3;
            // 自身div的一半 - 滑块的一半
            this.tips.nativeElement.style.left = itemWidth * this.index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
        }
    }

    //测试
    goDo(){
        this.navCtrl.push("LearningExplainPage")
    }

    //测试结果
    goResult(){
        this.navCtrl.push("LearningResultPage")
    }


}
