<ion-header>
    <ion-navbar>
        <ion-title class="padding-0" text-center>处室可报名人员参与情况</ion-title>
        <ion-buttons end>
            <button ion-button (click)="search()" class="color-fff margin-right-10">
                <ion-icon ios="ios-search" md="md-search"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content class="content">
    <div class="activity-title">
        {{this.acitivityName}}
    </div>

    <div class="content-box">
        <div class="content-box-item {{type == 1?'bgc-34b4fc':''}} " (click)="changeType(1)">
            <span class="item-title">全部</span>
            <span class="item-count">{{allList.length}}人</span>
        </div>
        <div class="content-box-item {{type == 2?'bgc-34b4fc':''}}" (click)="changeType(2)">
            <span class="item-title">未报名</span>
            <span class="item-count">{{notSignList.length}}人</span>
        </div>
        <div class="content-box-item {{type == 3?'bgc-34b4fc':''}}" (click)="changeType(3)">
            <span class="item-title">已报名</span>
            <span class="item-count">{{signList.length}}人</span>
        </div>
        <div class="content-box-item {{type == 4?'bgc-34b4fc':''}}" (click)="changeType(4)">
            <span class="item-title">不参加</span>
            <span class="item-count">{{noJoinList.length}}人</span>
        </div>
    </div>

    <ion-list>

            <ng-container *ngIf="type == 1">
                <ion-item *ngFor="let item of allList">
                    <div class="group">
                        <div class="inner-group">
                            <img src="./assets/imgs/head.png" class="person-photo">
                            <div class="item-box">
                                <p class="person-name">{{item?.name}}
                                    <ion-icon class="person-sex-male" *ngIf="item?.gender == '1'||item?.gender == null"
                                              name="male"></ion-icon>
                                    <ion-icon class="person-sex-female" *ngIf="item?.gender == '0'"
                                              name="female"></ion-icon>
                                </p>
                            </div>
                        </div>

                        <!--不参加 1， 非不参加： 0             "isActivityNo": "0",-->
                        <!--报名 ： 1，不报名 ： 0        "isSignUp": "1"-->

                        <div class="inner-button">

                            <ng-container *ngIf="item?.isSignUp == 0 && item.isActivityNo == 0">
                                <div class="text-right">
                                    <button disabled ion-button round class="btn color3">未报名</button>
                                </div>
                                <div class="margin-top-5">
                                <span  (click)="goSignUp(item)" ion-button round class="btn color3 blue-btn">代报名
                                </span>
                                    <span  (click)="confirmSayNo(item)" ion-button round class="btn color3 red-btn">不参加</span>
                                </div>
                            </ng-container>

                            <ng-container *ngIf="item.isActivityNo == 1">
                                <div class="text-right">
                                    <span disabled  ion-button round class="btn color6">不参加</span>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="item.isSignUp == 1">
                                <div class="text-right">
                                    <button disabled ion-button round class="btn color4">已报名</button>
                                </div>
                            </ng-container>
                        </div>

                    </div>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="type == 2">
                <ion-item *ngFor="let item of notSignList">
                <div class="group">
                    <div class="inner-group">
                        <img src="./assets/imgs/head.png" class="person-photo">
                        <div class="item-box">
                            <p class="person-name">{{item?.name}}
                                <ion-icon class="person-sex-male" *ngIf="item?.gender == '1'||item?.gender == null"
                                          name="male"></ion-icon>
                                <ion-icon class="person-sex-female" *ngIf="item?.gender == '0'"
                                          name="female"></ion-icon>
                            </p>
                        </div>
                    </div>
                    <div class="inner-button">
                        <div class="text-right">
                            <button ion-button round class="btn color3">未报名</button>
                        </div>
                        <div class="margin-top-5">
                            <span  (click)="goSignUp(item)" ion-button round class="btn color3 blue-btn">代报名</span>
                            <span (click)="confirmSayNo(item)" ion-button round class="btn color3 red-btn">不参加</span>
                        </div>
                    </div>
                </div>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="type == 3">
                <ion-item *ngFor="let item of signList">
                <div class="group">
                    <div class="inner-group">
                        <img src="./assets/imgs/head.png" class="person-photo">
                        <div class="item-box">
                            <p class="person-name">{{item?.name}}
                                <ion-icon class="person-sex-male" *ngIf="item?.gender == '1'||item?.gender == null"
                                          name="male"></ion-icon>
                                <ion-icon class="person-sex-female" *ngIf="item?.gender == '0'"
                                          name="female"></ion-icon>
                            </p>
                            <span class="person-batch">批次：{{item?.batchNames}}</span>
                        </div>
                    </div>
                    <button disabled ion-button round class="btn color2" *ngIf="item?.orderstate	== 1">已报名</button>
                    <button disabled ion-button round class="btn color1" *ngIf="item?.orderstate	== 2">待确认</button>
                    <button disabled ion-button round class="btn color5" *ngIf="item?.orderstate	== 3">未出行</button>
                    <button disabled ion-button round class="btn color4" *ngIf="item?.orderstate	== 4">已出行</button>
                    <button disabled ion-button round class="btn color3" *ngIf="item?.orderstate  == 0">未报名</button>
                </div>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="type == 4">
                <ion-item *ngFor="let item of noJoinList">
                <div class="group">
                    <div class="inner-group">
                        <img src="./assets/imgs/head.png" class="person-photo">
                        <div class="item-box">
                            <p class="person-name">{{item?.name}}
                                <ion-icon class="person-sex-male" *ngIf="item?.gender == '1'||item?.gender == null"
                                          name="male"></ion-icon>
                                <ion-icon class="person-sex-female" *ngIf="item?.gender == '0'"
                                          name="female"></ion-icon>
                            </p>
                        </div>
                    </div>
                    <button disabled ion-button round class="btn color2" *ngIf="item?.orderstate	== 1">已报名</button>
                    <button disabled ion-button round class="btn color1" *ngIf="item?.orderstate	== 2">待确认</button>
                    <button disabled ion-button round class="btn color5" *ngIf="item?.orderstate	== 3">未出行</button>
                    <button disabled ion-button round class="btn color4" *ngIf="item?.orderstate	== 4">已出行</button>
                    <button disabled ion-button round class="btn color3" *ngIf="item?.orderstate  == 0">未报名</button>
                </div>
                </ion-item>
            </ng-container>
    </ion-list>
</ion-content>