home.ts

import {Component, ElementRef, ViewChild, NgZone, Renderer2, Input, ViewChildren, QueryList} from '@angular/core';
import {
    NavController,
    IonicPage,
    Slides,
    Content,
    InfiniteScrollContent,
    FabList,
    FabContainer,
    ModalController
} from 'ionic-angular';
import {Http, Response} from '@angular/http';
import {AppService, AppGlobal} from '../../../service/http.service';
import {Storage} from '@ionic/storage';
import {Badge} from '@ionic-native/badge';
import {TabsService} from "../tabs.service";
import {CommonService} from "../../../provide/common.service";
import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
import {EmitService} from "../../../provide/emit.service";
import {DatePipe} from "@angular/common";
import {SwiperComponent} from "../../../components/swiper/swiper";
import {FilterComponent} from "../../../components/filter/filter";
import {AppMainService} from "../../../app/app.service";

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 = 1;
    slidersItems = [];
    //所属板块类型:
    //1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
    //9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14结对支部,15结对帮扶
    tabsList = [
        {name: "系列讲话", type: 2, index: 0},
        {name: "党章党规", type: 1, index: 1},
        {name: "中央精神", type: 3, index: 2},
        {name: "本市部署", type: 4, index: 3},
        {name: "评论解读", type: 17, index: 4},
    ];
    isSign = false;   //签到弹窗
    isBir = false;  //政治生日弹窗
    isScroll = false;   //tabs置顶

    noReadNum;
    initSlide = 0;

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

    plateType;
    index = 0;
    slideList = [];

    itemWidth;
    spanWidth;   //文字宽度


    pageNum = 1;
    pageSize = AppGlobal.pageCount;
    total;

    mineInfo;
    username;

    toRight = true;


    constructor(public navCtrl: NavController, public datePipe: DatePipe,
                public commonSer: CommonService, public emitSer: EmitService,
                public zone: NgZone, public tabSer: TabsService, private appMainSer: AppMainService,
                public renderer: Renderer2, private modalCtrl: ModalController,
                public appService: AppService, public http: Http, public storage: Storage,
                public badge: Badge, public tabsSer: TabsService) {
        // 接收发射过来的数据
        this.appMainSer.readInfo.subscribe(value => {
            this.noReadNum = value;
        })
        this.slideList.length = 5;
    }

    ionViewDidEnter() {
        this.getInter();
        this.tabsSer.signNow().subscribe(
            (res) => {
                this.signObj = res.data;
            }
        );
    }

    public dragTo(e) {
        if (e.target.scrollLeft > window.screen.width / 4 - 4) {
            this.toRight = false;
        } else {
            this.toRight = true;
        }
    }

    //获取个人信息
    getInter() {
        this.tabSer.getUserIntegral().subscribe(
            (res) => {
                this.mineInfo = res.data;
                this.username = this.mineInfo.username.slice(-2);
                this.appMainSer.setInfo(res.data);
            }
        )
    }


    ionViewDidLoad() {
        this.getBanner();
        const htmlFontSize = getComputedStyle(window.document.documentElement)['font-size'];
        this.itemWidth = htmlFontSize.split("px")[0] * 8;
        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.getInfo();
        this.scrollHeight();
        this.change(this.tabsList[0]);
        this.initSwiper();
    }

    //初始化swiper
    initSwiper() {
        let that = this;
        that.swiperImg = new Swiper('#swiper-container', {
            speed: 1000,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },//可选选项，自动滑动
            observer: true,
            observeParents: false,
            observeSlideChildren: true,
            loop: false,
            on: {
                init: function () {
                },
                slideChangeTransitionEnd: function () {
                    if (that.swiperImg) {
                        that.slideIndex = this.activeIndex + 1;
                        that.slideTitle = that.slidersItems[this.activeIndex].title;
                        that.swiperImg.update();
                    }
                },
                click: function () {
                    const item = that.slidersItems[this.activeIndex];
                    if (item.plateType == 20) return false;
                    that.navCtrl.push(StuffDetailPage, {
                        id: item.id
                    })
                },
            }
        });
        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;
        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.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.plateType = item.type;
        const data = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            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;
                }
                if (this.swiperArticle) this.swiperArticle.slideTo(this.index, 500);
                this.getMore(res);
            }
        )
    }

    //加载更多
    getMore(res) {
        const totalNum: number = res.data.total;
        if (totalNum < this.pageSize) return false;
        const data = {
            pageNum: 1,
            pageCount: totalNum,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        };
        this.tabsSer.stuffPage(data).subscribe(
            (res) => {
                res.data.list.splice(0, 10);
                res.data.list.forEach(e => {
                    if (e.attachments.length > 0) {
                        e.imgUrl = e.attachments[0].path;
                    }
                    this.slideList[this.index].push(e);
                });
            }
        );
    }

    //列表
    slideChange() {
        if (this.initSlide == 0) {   //防止初始化加载
            this.initSlide = 1;
            return false;
        }
    }

    //获取党员生日
    getInfo() {
        this.storage.get("userLoginInfo").then((value) => {
            let userid = value.userid;
            this.tabsSer.getInfo(userid).subscribe(
                (res) => {
                    if (res.apiResult.data) {  //党员展示政治生日
                        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;
                        }
                    } else {   //非党员不展示政治生日
                        this.isBir = false;
                    }
                }
            );
        })
    }

    //获取轮播图
    getBanner() {
        const data = {
            isRecent: 0,   //是否最新
            obj: {
                "resourceType": 2,   //1标题图片,2推荐轮播图,3视频
                "isRecommend": 1,   //推荐(1是0否)
                "plateType": 2,  //只取系列讲话
            }
        };
        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;
                this.slideTitle = this.slidersItems[this.slidersItems.length - 1].title;
                this.swiperImg.update();
            }
        )
    }

    //关闭弹窗 开启跑马灯
    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;

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

    //前往
    goTo(page) {
        this.navCtrl.push(page);
    }

    //下拉刷新
    doRefresh(e) {
        this.getBanner();
        const data = {
            pageNum: 1,
            pageSize: this.pageSize,
            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);
                    this.getMore(res);
                    e.complete();
                }, 800)
            }
        )
    }

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

    closeSign() {
        this.isSign = false;
    }

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

    //多模块
    moreTab() {
        let modal = this.modalCtrl.create(FilterComponent, {
            list: this.tabsList,
            type: this.plateType,
            title: '我的频道',
            desc:'点击进入我的频道'
        }, {
            enterAnimation: 'modal-from-right-enter',
            leaveAnimation: 'modal-from-right-leave'
        });
        modal.onDidDismiss(data => {
            if (data) {
                this.change(data)
            }
        });
        modal.present();
    }
}