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;
    @ViewChild('echartPie') echartPie: ElementRef;
    echartData1;
    echartData2;
    yearmonth = '2019-11';
    yearmonth1 = '2019-11';
    areaList;
    unitsInfo;
    type = "unit";
    type1 = '单位数(个)';
    yearList = [];
    count = {
        count1: 0,
        count2: 0,
        count3: 0,
        count4: 0,
        count5: 0,
        count6: 0,
        countTotal: 0,
    };

    pieData;
    dataType = '事业单位总览信息';

    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');
        this.yearmonth1 = 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();
        this.getPie();
    }

    // 切换主信息
    changeType(value) {
        if(value == '事业单位分类信息'){
            this.drawPie();
        }
    }

    //单位信息总览
    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
        this.count.count2 = 0
        this.count.count3 = 0
        this.count.countTotal = 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;
            })
        }
        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.countInfo();
        this.echartData1 = {
            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.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.replace('区', '');
                            }),
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value.split("").join("\n")
                                }
                            }
                        },
                        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);
                }
            }
        )
    }

    // 事业单位分类信息
    getPie() {
        const data = {
            yearmonth: this.yearmonth1
        }
        this.homeSer.statisticUnitcatetory(data).subscribe(
            (res) => {
                this.pieData = res.data;
            }
        )
    }

    drawPie() {
        this.count = {
            count1: 0,
            count2: 0,
            count3: 0,
            count4: 0,
            count5: 0,
            count6: 0,
            countTotal: 0,
        }
        let keyword = '';
        if (this.type1 == '单位数(个)') {
            keyword = 'unitCount';
            this.pieData.forEach(e => {
                this.count.count1 += e.unitCount1;
                this.count.count2 += e.unitCount2;
                this.count.count3 += e.unitCount3;
                this.count.count4 += e.unitCount4;
                this.count.count5 += e.unitCount5;
                this.count.count6 += e.unitCount6;
                this.count.countTotal += e.unitTotal;
            })
        }
        if (this.type1 == '编制人数(人)') {
            keyword = 'bzrs';
            this.pieData.forEach(e => {
                this.count.count1 += e.bzrs1;
                this.count.count2 += e.bzrs2;
                this.count.count3 += e.bzrs3;
                this.count.count4 += e.bzrs4;
                this.count.count5 += e.bzrs5;
                this.count.count6 += e.bzrs6;
                this.count.countTotal += e.bzrsTotal;
            })
        }
        if (this.type1 == '实有人数(人)') {
            keyword = 'syrs';
            this.pieData.forEach(e => {
                this.count.count1 += e.syrs1;
                this.count.count2 += e.syrs2;
                this.count.count3 += e.syrs3;
                this.count.count4 += e.syrs4;
                this.count.count5 += e.syrs5;
                this.count.count6 += e.syrs6;
                this.count.countTotal += e.syrsTotal;
            })
        }
        const data = [
            {
                name: '行政类',
                value: this.sum(this.pieData, `${keyword}1`)
            },
            {
                name: '参照行政类',
                value: this.sum(this.pieData, `${keyword}2`)
            },
            {
                name: '公益一类',
                value: this.sum(this.pieData, `${keyword}3`)
            },
            {
                name: '公益二类',
                value: this.sum(this.pieData, `${keyword}4`)
            },
            {
                name: '经营类',
                value: this.sum(this.pieData, `${keyword}5`)
            },
            {
                name: '暂缓分类',
                value: this.sum(this.pieData, `${keyword}6`)
            }
        ];
        let pieData = this.pieData;
        let option1 = {
            tooltip: {
                trigger: 'item',
                formatter(value) {
                    let params;
                    if (value.name == '行政类') params = `${keyword}1`;
                    if (value.name == '参照行政类') params = `${keyword}2`;
                    if (value.name == '公益一类') params = `${keyword}3`;
                    if (value.name == '公益二类') params = `${keyword}4`;
                    if (value.name == '经营类') params = `${keyword}5`;
                    if (value.name == '暂缓分类') params = `${keyword}6`;
                    let QuShuToTal = value.value - pieData[0][params];
                    let str = `${value.name}:${value.value}(${value.percent}%)<br>市属:${pieData[0][params]}<br>区属:${QuShuToTal}`;
                    return str;
                }
            },
            series: [
                {
                    name: this.type1,
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    color: ['#d74e67', '#0092ff', '#21b6b9','#60a900','#01949b','#f17677', '#eba954'],
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echarts.init(this.echartPie.nativeElement).setOption(option1, true);
    }

    sum(arr, key) {
        let s = 0;
        for (let i = arr.length - 1; i >= 0; i--) {
            s += arr[i][key];
        }
        return s;
    }

}
