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 = [];
    list = [
        {title:'党组织文章测试1',groupName:'全体人员',status:'1'},
        {title:'党组织文章测试2',groupName:'全体人员',status:'1'},
        {title:'党组织文章测试3',groupName:'全体人员',status:'2'},
        {title:'党组织文章测试4',groupName:'全体人员',status:'2'},
        {title:'党组织文章测试5',groupName:'全体人员',status:'3'},
        {title:'党组织文章测试6',groupName:'全体人员',status:'3'},
        {title:'党组织文章测试7',groupName:'全体人员',status:'4'},
        {title:'党组织文章测试8',groupName:'全体人员',status:'4'},
    ];

    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';
        this.getList()
    }

    getList(){
        this.list.forEach(e=>{
            if(e.status === '1') this.noList.push(e);
            if(e.status === '2') this.doList.push(e);
        })
    }

    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';
        }
    }

    goToResult(item){
        if(item.status == 1) this.navCtrl.push("LearningExplainPage")
        if(item.status == 2) this.navCtrl.push("LearningResultPage")
    }


}
