import {Component, ElementRef, ViewChild} from '@angular/core';
import {IonicPage, LoadingController, NavController, NavParams} from 'ionic-angular';
import {HomeService} from "../home.service";
import {DatePipe} from "@angular/common";
import * as echarts from 'echarts';

@Component({
    selector: 'page-data-report',
    templateUrl: 'data-report.html',
})
export class DataReportPage {
    @ViewChild('echart1') echart1: ElementRef;//显示图形的容器
    @ViewChild('echart2') echart2: ElementRef;//显示图形的容器
    echartData1;
    echartData2;
    yearmonth = '2019-11';
    areaList;
    unitsInfo;
    type = "unit";
    yearList = [];
    count = {
        count1: 0,
        count2: 0,
        count3: 0,
        countTotal: 0,
    };

    constructor(public navCtrl: NavController, public navParams: NavParams,
                private datePipe: DatePipe,
                private loadCtrl: LoadingController,
                private homeSer: HomeService) {
        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.shangbaolv();
        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() {
        if (this.type == 'unit') {
            this.unitsInfo.forEach(e => {
                this.count.count1 += e.unitCount1;
                this.count.count2 += e.unitCount1;
                this.count.count3 += e.unitCount1;
                this.count.countTotal += e.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;
            })
        }
        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;
            })
        }
    }

    switchEchart() {
        this.echartData1 = {
            grid: {
                left: "8%",
                right: "10%",
                top: "18%",
                width: "90%",
                height: "70%",
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.unitsInfo.map(e => {
                        return e.geo;
                    }),
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                    }
                }
            ],
            yAxis: {
                type: 'value',
                min: 0,
            },
            series: [
                {
                    name: this.type == 'unit' ? '单位数(个)' : this.type == 'syrs' ? '实有人数(人)' : '编制人数(人)',
                    type: 'bar',
                    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']
                },
            ]
        };
        echarts.init(this.echart1.nativeElement).setOption(this.echartData1, true);
    }

    //实名制上报率
    shangbaolv() {
        const data = {
                yearmonth: new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
            }
        ;
        this.homeSer.shangbaolv(data).subscribe(
            (res) => {
                if (res.list) {
                    this.areaList = res.list;
                    this.echartData2 = {
                        grid: {
                            left: "3%",
                            right: "4%",
                            bottom: "15%",
                            width: "90%",
                            height: "70%",
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{c}%',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: this.areaList.map(e => {
                                return e.areaName
                            }),
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                            }
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                        },

                        series: [
                            {
                                data: this.areaList.map(e => {
                                    const n = e.sblv.split("%")[0];
                                    return n;
                                }),
                                color: ['#58afed'], //折线颜色
                                type: 'bar',
                                name: '柱状图',
                            }
                        ]
                    };
                    echarts.init(this.echart2.nativeElement).setOption(this.echartData2, true);
                }
            }
        )
    }

}
