import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core';
import {LoadingController, NavController, Slides} from 'ionic-angular';
import {HomeService} from "./home.service";
import {CommonService} from "../../core/common.service";
import {Storage} from "@ionic/storage";
import {MineService} from "../mine/mine.service";
import {TabService} from "../../core/tab.service";
import {InAppBrowser} from "@ionic-native/in-app-browser";
import {AppService} from "../../app/app.service";
import {StatusBar} from "@ionic-native/status-bar";
import {ContactPage} from "./contact/contact";
import {DoVerityPage} from "./do-verity/do-verity";
import {DoSupervisePage} from "./do-supervise/do-supervise";
import {DataReportPage} from "./data-report/data-report";
import {PersonPage} from "../mine/person/person";
import {GlobalData} from "../../core/GlobleData";
import {DatePipe} from "@angular/common";
import {InfoListPage} from "./report-info/info-list/info-list";
import * as echarts from 'echarts';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild('echart') echart: ElementRef;//显示图形的容器
    @ViewChild('table') table: ElementRef;

    echartData;
    type = 'unit';

    info = {
        new: 0,
    };
    yearmonth;

    unitsInfo;
    mineInfo;  //个人信息
    roles = [];
    count = {
        count1: 0,
        qscount1: 0,
        count2: 0,
        qscount2: 0,
        count3: 0,
        qscount3: 0,
        countTotal: 0,
        qscountTotal: 0,
    };

    yearList = [];
    isToggle;

    constructor(public navCtrl: NavController, public homeSer: HomeService,
                private loadCtrl: LoadingController,
                private commonSer: CommonService, private storage: Storage,
                private appSer: AppService, public statusBar: StatusBar,
                private global: GlobalData,
                private datePipe: DatePipe,
                private mineSer: MineService, private tabSer: TabService, private inAppBrowser: InAppBrowser,
                private renderer: Renderer2) {
        this.mineInfo = this.global.userObj;
        this.storage.get('roles').then(value => this.roles = value || []);
        const yearmonth = new Date().getFullYear() + '-' + new Date().getMonth();
        this.yearmonth = this.datePipe.transform(yearmonth, 'yyyy-MM');
        const year = new Date().getFullYear();
        const month = new Date().getMonth();
        for (let i = 1; i < month + 1; i++) {
            let d = this.datePipe.transform(year + '-' + i, 'yyyy-MM');
            this.yearList.push(d);
        }
    }

    ionViewDidLoad() {
        this.getUnits();
    }

    //单位信息总览
    getUnits() {
        const data = {
            yearmonth: this.yearmonth,
        };
        let loading = this.loadCtrl.create();
        loading.present();
        this.homeSer.units(data).subscribe(
            (res) => {
                if (res.code == 0) {
                    this.unitsInfo = res.data;
                    this.switchEchart();
                    this.countInfo();
                }
                loading.dismiss();
            }
        )
    }

    countInfo() {
        this.count = {
            count1: 0,
            qscount1: 0,
            count2: 0,
            qscount2: 0,
            count3: 0,
            qscount3: 0,
            countTotal: 0,
            qscountTotal: 0,
        };
        if (this.type == 'unit') {
            this.unitsInfo.forEach(e => {
                this.count.count1 += e.unitCount1;
                this.count.count2 += e.unitCount2;
                this.count.count3 += e.unitCount3;
                this.count.countTotal += e.unitTotal;
            })
            this.count.qscount1 = this.count.count1 - this.unitsInfo[0].unitCount1;
            this.count.qscount2 = this.count.count2 - this.unitsInfo[0].unitCount2;
            this.count.qscount3 = this.count.count3 - this.unitsInfo[0].unitCount3;
            this.count.qscountTotal = this.count.countTotal - this.unitsInfo[0].unitTotal;
        }
        if (this.type == 'bzrs') {
            this.unitsInfo.forEach(e => {
                this.count.count1 += e.bzrs1;
                this.count.count2 += e.bzrs2;
                this.count.count3 += e.bzrs3;
                this.count.countTotal += e.bzrsTotal;
            })
            this.count.qscount1 = this.count.count1 - this.unitsInfo[0].bzrs1;
            this.count.qscount2 = this.count.count2 - this.unitsInfo[0].bzrs2;
            this.count.qscount3 = this.count.count3 - this.unitsInfo[0].bzrs3;
            this.count.qscountTotal = this.count.countTotal - this.unitsInfo[0].bzrsTotal;
        }
        if (this.type == 'syrs') {
            this.unitsInfo.forEach(e => {
                this.count.count1 += e.syrs1;
                this.count.count2 += e.syrs2;
                this.count.count3 += e.syrs3;
                this.count.countTotal += e.syrsTotal;
            })
            this.count.qscount1 = this.count.count1 - this.unitsInfo[0].syrs1;
            this.count.qscount2 = this.count.count2 - this.unitsInfo[0].syrs2;
            this.count.qscount3 = this.count.count3 - this.unitsInfo[0].syrs3;
            this.count.qscountTotal = this.count.countTotal - this.unitsInfo[0].syrsTotal;
        }
    }

    switchEchart() {
        this.countInfo();
        this.echartData = {
            grid: {
                left: "5%",
                right: "15%",
                top: "18%",
                width: "90%",
                height: "70%",
                containLabel: true
            },
            legend: {
                icon: 'rect',
                itemWidth: 14,
                itemHeight: 5,
                itemGap: 13,
                data: ['编制人数(人)', '实有人数(人)'],
                right: '4%',
                textStyle: {
                    fontSize: 12,
                    color: '#999'
                },
                show: this.type !== 'unit'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: this.type == 'unit' ? 'cross' : 'linear',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.unitsInfo.map(e => {
                        return e.geoApp;
                    }),
                    axisPointer: {
                        type: this.type == 'unit' ? 'shadow' : 'line',
                        snap: true,
                    },
                    axisLabel: {
                        interval: 0,
                        formatter:function (value) {
                            return value.split("").join("\n")
                        }
                    }
                }
            ],
            yAxis: {
                type: 'value',
                min: 0,
            },
            series: this.type == 'unit' ? [
                {
                    name: this.type == 'unit' ? '单位数(个)' : this.type == 'syrs' ? '实有人数(人)' : '编制人数(人)',
                    type: this.type == 'unit' ? 'bar' : 'line',
                    data: this.unitsInfo.map(e => {
                        let d;
                        if (this.type == 'unit') {
                            d = e.unitTotal;
                        }
                        if (this.type == 'syrs') {
                            d = e.syrsTotal;
                        }
                        if (this.type == 'bzrs') {
                            d = e.bzrsTotal;
                        }
                        return d;
                    }),
                    color: ['#feda66'],
                }
                ] : [
                {
                    name: '编制人数(人)',
                    type: 'line',
                    data: this.unitsInfo.map(e => e.bzrsTotal),
                    color: ['#fad049'],
                },
                {
                    name: '实有人数(人)',
                    type: 'line',
                    data: this.unitsInfo.map(e => e.syrsTotal),
                    color: ['#0000ff'],
                }
            ]
        };
        echarts.init(this.echart.nativeElement).setOption(this.echartData, true);
    }


    goToContact() {
        this.navCtrl.push(ContactPage);
    }

    //审核审批
    goToVerity() {
        this.navCtrl.push(DoVerityPage);
    }

    //办理督办
    goToSupervise() {
        this.navCtrl.push(DoSupervisePage);
    }

    //数据报表
    goToReport() {
        this.navCtrl.push(DataReportPage);
    }

    //信息查询
    goToInfo() {
        this.navCtrl.push(InfoListPage)
    }

    goToPersonInfo() {
        this.navCtrl.push(PersonPage)
    }

    //展开or收缩
    toggle(type) {
        if (type == 1) {
            this.table.nativeElement.style.height = '625px';
            this.isToggle = true;
        } else {
            this.table.nativeElement.style.height = '177px';
            this.isToggle = false;
        }
    }
}
