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


@Component({
    selector: 'page-data-report',
    templateUrl: 'data-report.html',
})
export class DataReportPage {
    echartData1;
    echartData2;
    count = {
        lastCount: "20",
        nowCount: "50",
        YeWuBanLi: "10",
        ShenHeTongGuo: "20",
        ShenHeJuJue: "30",
        FaHuiBuCong: "40"
    };
    data2;
    yearmonth;
    areaList;

    constructor(public navCtrl: NavController, public navParams: NavParams,
                private datePipe: DatePipe,
                private homeSer: HomeService) {
        this.yearmonth = this.datePipe.transform(Date.now(), "yyyy-MM");
    }

    ionViewDidLoad() {
        this.shangbaolv();

        const ser1 = [
            {name: "单位数", value: "7749"},
            {name: "编制数", value: "524845"},
            {name: "实有数", value: "429171"},
        ];
        this.echartData1 = {
            grid: {
                left: "8%",
                right: "10%",
                width: "90%",
                height: "70%",
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['实际在编人员数', '编制数', '单位数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['9月', '10月', '11月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '人数',
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                {
                    type: 'value',
                    name: '单位数',
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                }
            ],
            series: [
                {
                    name: '实际在编人员数',
                    type: 'bar',
                    data: [221345, 222456, 232345],
                    color: ['#5baad2']
                },
                {
                    name: '编制数',
                    type: 'bar',
                    data: [222345, 233456, 242567],
                    color: ['#6de0d2']
                },
                {
                    name: '单位数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [6271, 7913, 8776],
                    color: ['#feda66']
                }
            ]
        };
    }

    //实名制上报率
    shangbaolv() {
        const data = {
            yearmonth: this.yearmonth,
        };
        this.homeSer.shangbaolv(data).subscribe(
            (res) => {
                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,
                    },
                    dataZoom: [{
                        type: "slider",         //详细配置可见echarts官网
                        show: true,  //是否显示
                        realtime: true,  //
                        start: 0,  //伸缩条开始位置（1-100），可以随时更改
                        end: 50,  //伸缩条结束位置（1-100），可以随时更改
                    }],
                    series: [
                        {
                            data: this.areaList.map(e => {
                                const n = e.sblv.split("%")[0];
                                return n;
                            }),
                            color: ['#58afed'], //折线颜色
                            type: 'bar',
                            name: '柱状图',
                        }
                    ]
                };
            }
        )
    }

}
