home.ts

import {Component, ElementRef, ViewChild, NgZone, Renderer2, Input, ViewChildren, QueryList} from '@angular/core';
import {NavController, IonicPage, Slides, Content, InfiniteScrollContent, FabList, FabContainer} from 'ionic-angular';
import {Http, Response} from '@angular/http';
import {AppService, AppGlobal} from '../../../service/http.service';
import {Storage} from '@ionic/storage';
import {NoticePage} from "../notice/notice";
import {Badge} from '@ionic-native/badge';
import {TabsService} from "../tabs.service";
import {TextToSpeech} from "@ionic-native/text-to-speech";
import {CommonService} from "../../../provide/common.service";
import {SearchNewPage} from "../../home-pages/search-new/search-new";
import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
import {EmitService} from "../../../provide/emit.service";
import {DatePipe} from "@angular/common";
import {SlideListComponent} from "../../../components/slide-list/slide-list";
import {SlideComponent} from "../../../components/slide/slide";
import {interval} from "rxjs/observable/interval";
import {SwiperComponent} from "../../../components/swiper/swiper";

declare let Swiper: any;

@IonicPage()
@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    @ViewChild(Content) content: Content;
    @ViewChild('tips') tips: ElementRef;
    @ViewChild('tips1') tips1: ElementRef;
    @ViewChild('verticaLamp') verticaLamp: ElementRef;
    @ViewChild('tabsParent') tabsParent: ElementRef;
    @ViewChild('topHeight') topHeight: ElementRef;
    @ViewChild('headerTag') headerTag: ElementRef;
    @ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
    @ViewChild('infiniteScrollContentEle') infiniteScrollContentEle: ElementRef;
    @ViewChild(InfiniteScrollContent) InfiniteScrollContent: InfiniteScrollContent;

    swiperImg;
    swiperArticle;

    picture: string = AppGlobal.domain + '/wisdomgroup';
    slideTitle;
    slideIndex;
    slidersItems = [];
    //所属板块类型:
    //1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
    //9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶
    // tabsList = [
    //     {name: "党章党规", type: 1, index: 0},
    //     {name: "系列讲话", type: 2, index: 1},
    //     {name: "中央精神", type: 3, index: 2},
    //     {name: "本市部署", type: 4, index: 3}
    // ];
    tabsList = [
        {name: "最新", type: 0, index: 0},
        {name: "系列讲话", type: 2, index: 1},
        {name: "党章党规", type: 1, index: 2},
        {name: "中央精神", type: 3, index: 3},
        {name: "本市部署", type: 4, index: 4}
    ];
    isSign = false;   //签到弹窗
    isBir = false;  //政治生日弹窗
    isScroll = false;   //tabs置顶

    noReadNum;
    initSlide = 0;

    signObj = {
        'text': '',
        'isSign': ''
    };   //签到参数
    disabledClick = true;
    signText;   //签到倒计时
    partyObj;  //政治生日

    plateType;
    isRecent = 1;   //0 否  1是
    index = 0;
    slideList = [];

    itemWidth;
    spanWidth;   //文字宽度


    pageNum = 1;
    pageCount = AppGlobal.pageCount;
    //分页
    totalNum;
    loadMore = true;

    mineInfo;
    username;

    constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
                public commonSer: CommonService, public emitSer: EmitService,
                public zone: NgZone, public tabSer: TabsService,
                public renderer: Renderer2, public slideCom: SlideComponent,
                private swiper: SwiperComponent,
                public appService: AppService, public http: Http, public storage: Storage,
                public badge: Badge, public tabsSer: TabsService) {
        // 接收发射过来的数据
        this.emitSer.eventEmit.subscribe((value: any) => {
            if (!isNaN(value)) {
                this.noReadNum = value;
            }
        });
        this.slideList.length = 4;
    }

    ionViewDidEnter() {
        this.tabsSer.signNow().subscribe(
            (res) => {
                this.signObj = res.data;
            }
        );
        this.tabSer.getUserIntegral().subscribe(
            (res) => {
                this.mineInfo = res.data;
                this.username = this.mineInfo.username.slice(-2);
            }
        )
    }


    ionViewDidLoad() {
        this.initSwiper();
        this.itemWidth = window.screen.width / 4;
        console.log(this.tabsParent.nativeElement.children[0].children[0].offsetWidth);
        this.spanWidth = this.tabsParent.nativeElement.children[0].children[0].offsetWidth;   //文字宽度
        this.tips.nativeElement.style.width = this.spanWidth + 'px';
        this.tips1.nativeElement.style.width = this.spanWidth + 'px';
        this.getBanner();
        this.getInfo();
        this.scrollHeight();
        this.change(this.tabsList[0]);
    }

    //初始化swiper
    initSwiper() {
        console.log('initSwiper')
        let that = this;
        that.swiperImg = new Swiper('#swiper-container', {
            speed: 1000,
            autoplay:{
                delay: 3000,
                disableOnInteraction: false,
            },//可选选项，自动滑动
            observer: true,
            observeParents: true,
            observeSlideChildren:true,
            loop: true,
            on: {
                slideChangeTransitionEnd: function () {
                    console.log(this.activeIndex);
                    that.slideIndex = this.activeIndex +1;
                    that.slideTitle = that.slidersItems[this.activeIndex].title;
                    that.swiperImg.update();
                },
            }
        });
        this.swiperArticle = new Swiper('#swiper-article', {
            slidesPerView: 1,
            speed: 1000,
            autoplay: false,//可选选项，自动滑动
            observer: true,
            observeParents: true,
            observeSlideChildren:true,
            loop: false,
            on: {
                slideChangeTransitionEnd: function () {
                    that.swiperArticle.update();
                    that.change(that.tabsList[this.activeIndex]);
                },
            }
        })
    }


    scrollHeight() {
        const height = this.topHeight.nativeElement.offsetHeight + 48;
        this.content.ionScroll.subscribe(($event) => {
            this.zone.run(() => {
                if (this.content.scrollTop > height) {
                    this.isScroll = true;
                } else {
                    this.isScroll = false;
                }
            })
        })
    }

    change(item) {
        this.pageNum = 1;
        this.loadMore = true;
        this.index = item.index;
        // 自身div的一半 - 滑块的一半
        this.tips.nativeElement.style.left = this.itemWidth * (this.index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
        this.tips1.nativeElement.style.left = this.itemWidth * (this.index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
        this.InfiniteScrollContent.inf.enable(true);
        if (item.type == 0) {
            this.isRecent = 1;
        } else {
            this.isRecent = 0;
        }

        this.plateType = item.type;
        const data = {
            pageNum: this.pageNum,
            pageCount: this.pageCount,
            isRecent: this.isRecent,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        };
        this.tabsSer.stuffPage(data).subscribe(
            (res) => {
                let arr = res.data.list;
                this.totalNum = res.data.total;
                if (arr.length > 0) {
                    arr.forEach(e => {
                        if (e.attachments.length > 0) {
                            e.imgUrl = e.attachments[0].path;
                        }
                    });
                    this.slideList[this.index] = arr;
                }
                if (this.swiperArticle) this.swiperArticle.slideTo(this.index, 500);
            }
        )
    }

    //列表
    slideChange() {
        if (this.initSlide == 0) {   //防止初始化加载
            this.initSlide = 1;
            return false;
        }
        // let index = this.slides.toArray()[1].getActiveIndex();
        // if (index == this.tabsList.length) index = 0;
        // if (index == this.tabsList.length + 1) index = 1;
        // this.change(this.tabsList[index])
    }


    //获取党员生日
    getInfo() {
        this.storage.get("userLoginInfo").then((value) => {
            let userid = value.userid;
            this.tabsSer.getInfo(userid).subscribe(
                (res) => {
                    this.partyObj = res.apiResult.data;
                    //获取是否展示过政治生日
                    const nowDay = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
                    const partyBir = localStorage.getItem('partyBir');
                    if (nowDay == partyBir) {
                        setTimeout(() => {
                            this.start();
                            this.isBir = false;
                        }, 500)
                    } else {
                        this.isBir = true;
                    }
                }
            );
        })
    }

    //获取轮播图
    getBanner() {
        const data = {
            isRecent: 0,
            obj: {
                resourceType: 2,
                isRecommend: 1,
            }
        };
        this.tabsSer.stuffPage(data).subscribe(
            (res) => {
                if (res.data.list.length > 0) {
                    res.data.list.forEach(e => {
                        if (e.attachments.length > 0) {
                            e.imgUrl = e.attachments[0].path;
                        }
                    })
                }
                this.slidersItems = res.data.list;
            }
        )
    }

    //关闭弹窗 开启跑马灯
    start() {
        const nowDay = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
        localStorage.setItem('partyBir', nowDay);

        this.isBir = false;
        this.homeMiddleTips.nativeElement.style.height = "50px";
        this.homeMiddleTips.nativeElement.style.padding = ".5rem";
        let child_div = this.verticaLamp.nativeElement.children;
        const scrollWidth = this.verticaLamp.nativeElement.offsetWidth;
        const textWidth = child_div[0].offsetWidth;
        console.log(textWidth);

        let i = scrollWidth;
        setInterval(() => {
            i--;
            if (i < -textWidth) {
                i = scrollWidth;
            }
            child_div[0].style.left = i + 'px';
        }, 20)
    }

    //签到接口
    signUp() {
        this.tabsSer.sign().subscribe(
            (res) => {
                this.isSign = false;
                if (res.errcode == '1000') {
                    this.commonSer.toast('签到成功');
                    this.signObj.isSign = 'yes';
                } else {
                    this.commonSer.toast(res.errmsg);
                }
            }
        )
    }

    //签到倒计时
    signNow() {
        if (this.signObj.isSign == 'no') this.disabledClick = true;
        this.isSign = true;
        let totalTime = 5;
        this.signText = '(倒计时' + totalTime + 's)';
        let clock = window.setInterval(() => {
            totalTime--;
            this.signText = '(倒计时' + totalTime + 's)';
            if (totalTime < 0) {
                this.signText = '';
                window.clearInterval(clock);
                this.disabledClick = false;
            }
        }, 1000)
    }

    //查看文章详情
    goToDetail(item) {
        this.navCtrl.push(StuffDetailPage, {
            id: item.id
        })
    }

    //查看文章详情  轮播图
    goToDetailBySlide() {
        // const index = this.slides.toArray()[0].realIndex;
        // if (this.slidersItems[index].plateType == 20) return false;
        // this.navCtrl.push(StuffDetailPage, {
        //     id: this.slidersItems[index].id
        // })
    }

    //前往搜索页面
    goToSearch() {
        this.navCtrl.push(SearchNewPage);
    }

    //消息提醒页面
    goToNotice() {
        this.navCtrl.push(NoticePage);
    }

    //上拉加载
    doInfinite(e) {
        console.log('doInfinite');
        if (this.totalNum < this.slideList[this.index].length + 1) {
            console.log('没有数据了');
            this.loadMore = false;
            e.enable(false);
            return false;
        }
        this.pageNum++;
        const data = {
            pageNum: this.pageNum,
            pageCount: this.pageCount,
            isRecent: this.isRecent,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        };
        // this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement, 'height', '60px');
        this.tabsSer.stuffPage(data).subscribe(
            (res) => {
                let arr = res.data.list;
                if (arr.length > 0) {
                    arr.forEach(e => {
                        if (e.attachments.length > 0) {
                            e.imgUrl = e.attachments[0].path;
                        }
                        this.slideList[this.index].push(e);
                    });
                }
                setTimeout(() => {
                    e.complete();
                    // this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement, 'height', '0px');
                }, 1000)
            }
        )
    }

    //下拉刷新
    doRefresh(e) {
        this.getBanner();
        const data = {
            pageNum: 1,
            pageCount: this.pageCount,
            isRecent: this.isRecent,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        };
        this.tabsSer.stuffPage(data).subscribe(
            (res) => {
                let arr = res.data.list;
                if (arr.length > 0) {
                    arr.forEach(e => {
                        if (e.attachments.length > 0) {
                            e.imgUrl = e.attachments[0].path;
                        }
                    });
                }
                this.slideList[this.index] = arr;
                setTimeout(() => {
                    this.commonSer.toastTime('刷新成功!', 800);
                    e.complete();
                }, 800)
            }
        )
    }

    //关闭弹窗
    closeBir() {
        this.isBir = false;
        this.start();
    }

    closeSign() {
        this.isSign = false;
    }

    stop(e) {
        e.stopPropagation();
    }

}