<ion-header>
    <ion-navbar>
        <ion-buttons start>
            <button ion-button icon-only>
                <img class="toolbar-img" src="./assets/imgs/logo.png">
            </button>
        </ion-buttons>
        <ion-buttons end class="mine-button">
            <button (click)="goToPersonInfo()" class="mine-home">
                <span>{{mineInfo?.name.slice(-2)}}</span>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <div class="banner">
        <img src="./assets/imgs/home_banner.png">
    </div>
    <div class="new-module">
        <div *ngIf="roles.indexOf('2') > -1" class="card" (click)="goToVerity()">
            <img src="./assets/imgs/spsh.png">
            <p>审核审批</p>
        </div>
        <div *ngIf="roles.indexOf('3') > -1" class="card" (click)="goToSupervise()">
            <img src="./assets/imgs/db.png">
            <p>办理督办</p>
        </div>
        <div *ngIf="roles.indexOf('4') > -1" class="card" (click)="goToReport()">
            <img src="./assets/imgs/sjbb.png">
            <p>数据报表</p>
        </div>
        <div *ngIf="roles.indexOf('5') > -1" class="card" (click)="goToInfo()">
            <img src="./assets/imgs/xxcx.png">
            <p>信息查询</p>
        </div>
        <div *ngIf="roles.indexOf('1') > -1" class="card" (click)="goToContact()">
            <img src="./assets/imgs/txl.png">
            <p>通讯录</p>
        </div>
    </div>
    <div 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 #echart class="echart-pie"></div>
        </div>
        <div class="data">
            <div class="table" #table>
                <table border="1">
                    <thead>
                    <tr>
                        <th>隶属</th>
                        <th>全额拨款</th>
                        <th>差额拨款</th>
                        <th>自收自支</th>
                        <th>小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-container *ngFor="let item of unitsInfo;let i = index">
                        <tr>
                            <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 style="border:1px solid #e3614d" *ngIf="i == 0">
                            <td>区属小计:</td>
                            <td>{{count.qscount1}}</td>
                            <td>{{count.qscount2}}</td>
                            <td>{{count.qscount3}}</td>
                            <td>{{count.qscountTotal}}</td>
                        </tr>
                    </ng-container>
                    <tr style="border:1px solid #e3614d">
                        <td>合计:</td>
                        <td>{{count.count1}}</td>
                        <td>{{count.count2}}</td>
                        <td>{{count.count3}}</td>
                        <td>{{count.countTotal}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <p class="toggle">
            <span *ngIf="!isToggle" (click)="toggle(1)">展开
                <ion-icon tappable name="arrow-down"></ion-icon>
            </span>
            <span *ngIf="isToggle" (click)="toggle(0)">收缩
                <ion-icon tappable name="arrow-up"></ion-icon>
            </span>
        </p>
    </div>
</ion-content>
