<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">
    <ion-list class="activity-title">
        <ion-item>
            <ion-label>{{this.acitivityName}}</ion-label>
            <ion-select [(ngModel)]="batchId" cancelText="取消" okText="确定" placeholder="选择批次" (ngModelChange)="changeBatch()">
                <ion-option value="" >全部</ion-option>
                <ng-container *ngFor="let item of batchList">
                    <ion-option value="{{item.id}}" >{{item.batchName}}</ion-option>
                </ng-container>
            </ion-select>
        </ion-item>
    </ion-list>

    <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">
                            <ng-container *ngIf="item?.picUrl && item?.picUrl != ''">
                                <img src="{{picture+item?.picUrl}}" class="contact-img">
                            </ng-container>
                            <ng-container *ngIf="!item?.picUrl || item?.picUrl == ''">
                                <img src="./assets/imgs/man.png" class="contact-img" *ngIf="item.gender =='1'||item.gender==null">
                                <img src="./assets/imgs/woman.png" class="contact-img" *ngIf="item.gender =='0'">
                            </ng-container>
                            <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" style="margin-bottom: 5px">已报名</button>
                                    <br>
                                    <span (click)="cancelSignUp(item)" ion-button round class=" btn color3 cancelBtn">取消报名</span>
                                </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">
                        <ng-container *ngIf="item?.picUrl && item?.picUrl != ''">
                            <img src="{{picture+item.picUrl}}" class="contact-img">
                        </ng-container>
                        <ng-container *ngIf="!item?.picUrl || item?.picUrl == ''">
                            <img src="./assets/imgs/man.png" class="contact-img" *ngIf="item.gender =='1'||item.gender==null">
                            <img src="./assets/imgs/woman.png" class="contact-img" *ngIf="item.gender =='0'">
                        </ng-container>
                        <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" style="position: relative">
                <div class="group">
                    <div class="inner-group">
                        <ng-container *ngIf="item?.picUrl && item?.picUrl != ''">
                            <img src="{{picture+item.picUrl}}" class="contact-img">
                        </ng-container>
                        <ng-container *ngIf="!item?.picUrl || item?.picUrl == ''">
                            <img src="./assets/imgs/man.png" class="contact-img" *ngIf="item.gender =='1'||item.gender==null">
                            <img src="./assets/imgs/woman.png" class="contact-img" *ngIf="item.gender =='0'">
                        </ng-container>
                        <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>
                                <span (click)="cancelSignUp(item)" ion-button round class="cancelButton btn color3 cancelBtn">取消报名</span>
                            </p>
                            <span class="person-batch">批次：{{item?.batchNames}}</span>
                        </div>
                    </div>
                </div>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="type == 4">
                <ion-item *ngFor="let item of noJoinList">
                <div class="group">
                    <div class="inner-group">
                        <ng-container *ngIf="item?.picUrl && item?.picUrl != ''">
                            <img src="{{picture+item.picUrl}}" class="contact-img">
                        </ng-container>
                        <ng-container *ngIf="!item?.picUrl || item?.picUrl == ''">
                            <img src="./assets/imgs/man.png" class="contact-img" *ngIf="item.gender =='1'||item.gender==null">
                            <img src="./assets/imgs/woman.png" class="contact-img" *ngIf="item.gender =='0'">
                        </ng-container>
                        <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>