<ion-header>
    <ion-navbar>
        <ion-title>数据报表</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <div class="echart-title">
        <span>数据报表分类</span>
        <ion-select [(ngModel)]="dataType" cancelText="取消" okText="确定" placeholder="选择" (ngModelChange)="changeType(dataType)">
            <ion-option value="事业单位总览信息">事业单位总览信息</ion-option>
            <ion-option value="事业单位分类信息">事业单位分类信息</ion-option>
            <ion-option value="实名制上报率">实名制上报率</ion-option>
        </ion-select>
    </div>
    <ng-container >
        <div [hidden]="dataType !== '事业单位总览信息'" class="echart-data">
            <div class="echart-title">
                <span>事业单位总览信息</span>
                <ion-select [(ngModel)]="yearmonth" cancelText="取消" okText="确定" placeholder="选择"
                            (ngModelChange)="getUnits()">
                    <ng-container *ngFor="let item of yearList">
                        <ion-option [value]="item">{{item}}</ion-option>
                    </ng-container>
                </ion-select>
            </div>
            <ion-segment style="padding: 0 30px" [(ngModel)]="type" (ngModelChange)="switchEchart()">
                <ion-segment-button value="unit">
                    单位数(个)
                </ion-segment-button>
                <ion-segment-button value="bzrs">
                    编制人数(人)
                </ion-segment-button>
                <ion-segment-button value="syrs">
                    实有人数(人)
                </ion-segment-button>
            </ion-segment>
            <div class="echart">
                <div #echart1 class="echart-pie"></div>
            </div>
            <div class="data">
                <div class="table">
                    <table border="1">
                        <thead>
                        <tr>
                            <th>隶属</th>
                            <th>全额拨款</th>
                            <th>差额拨款</th>
                            <th>自收自支</th>
                            <th>小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of unitsInfo">
                            <td>{{item.geo}}</td>
                            <td>{{type == 'unit' ? item.unitCount1 : type == 'bzrs' ? item.bzrs1 : item.syrs1}}</td>
                            <td>{{type == 'unit' ? item.unitCount2 : type == 'bzrs' ? item.bzrs2 : item.syrs2}}</td>
                            <td>{{type == 'unit' ? item.unitCount3 : type == 'bzrs' ? item.bzrs3 : item.syrs3}}</td>
                            <td>{{type == 'unit' ? item.unitTotal : type == 'bzrs' ? item.bzrsTotal : item.syrsTotal}}</td>
                        </tr>
                        <tr>
                            <td>合计:</td>
                            <td>{{count.count1}}</td>
                            <td>{{count.count2}}</td>
                            <td>{{count.count3}}</td>
                            <td>{{count.countTotal}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container >
        <div [hidden]="dataType !== '事业单位分类信息'" class="echart-data">
            <div class="echart-title">
                <span>事业单位分类信息</span>
                <ion-select [(ngModel)]="yearmonth1" cancelText="取消" okText="确定" placeholder="选择"
                            (ngModelChange)="getPie()">
                    <ng-container *ngFor="let item of yearList">
                        <ion-option [value]="item">{{item}}</ion-option>
                    </ng-container>
                </ion-select>
            </div>
            <ion-segment style="padding: 0 30px" [(ngModel)]="type1" (ngModelChange)="drawPie()">
                <ion-segment-button value="单位数(个)">
                    单位数(个)
                </ion-segment-button>
                <ion-segment-button value="编制人数(人)">
                    编制人数(人)
                </ion-segment-button>
                <ion-segment-button value="实有人数(人)">
                    实有人数(人)
                </ion-segment-button>
            </ion-segment>
            <div class="echart">
                <div #echartPie class="echart-pie"></div>
            </div>

            <div class="data">
                <div class="table">
                    <table border="1">
                        <thead>
                        <tr>
                            <th>隶属</th>
                            <th>行政<br/>类</th>
                            <th>参照<br/>行政类</th>
                            <th>公益<br/>一类</th>
                            <th>公益<br/>二类</th>
                            <th>经营<br/>类</th>
                            <th>暂缓<br/>分类</th>
                            <th>小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of pieData">
                            <td>{{item.geoApp}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount1 : type1 == '编制人数(人)' ? item.bzrs1 : item.syrs1}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount2 : type1 == '编制人数(人)' ? item.bzrs2 : item.syrs2}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount3 : type1 == '编制人数(人)' ? item.bzrs3 : item.syrs3}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount4 : type1 == '编制人数(人)' ? item.bzrs4 : item.syrs4}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount5 : type1 == '编制人数(人)' ? item.bzrs5 : item.syrs5}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitCount6 : type1 == '编制人数(人)' ? item.bzrs6 : item.syrs6}}</td>
                            <td>{{type1 == '单位数(个)' ? item.unitTotal : type1 == '编制人数(人)' ? item.bzrsTotal : item.syrsTotal}}</td>
                        </tr>
                        <tr>
                            <td>合计</td>
                            <td>{{count.count1}}</td>
                            <td>{{count.count2}}</td>
                            <td>{{count.count3}}</td>
                            <td>{{count.count4}}</td>
                            <td>{{count.count5}}</td>
                            <td>{{count.count6}}</td>
                            <td>{{count.countTotal}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </ng-container>
    <ng-container >
        <div [hidden]="dataType !== '实名制上报率'" class="echart-data">
            <div class="echart-title">
                <span>实名制上报率</span>
            </div>
            <div class="echart">
                <div #echart2 class="echart-pie"></div>
            </div>
            <ion-row class="data-report">
                <ion-col col-4 *ngFor="let item of areaList">
                    <p>{{item.areaName.replace('区','')}}</p>
                    <p>{{item?.sblv}}</p>
                </ion-col>
            </ion-row>
        </div>
    </ng-container>
</ion-content>
