<ion-header>
	<ion-navbar>
		<ion-title text-center>处室可报名人员参与情况</ion-title>
	</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)="signAll()">
			<span class="item-title">全部</span>
			<span class="item-count">{{allPerson}}人</span>
		</div>
		<div class="content-box-item {{type == '2'?'bgc-34b4fc':''}}" (click)="noSign()">
			<span class="item-title">未报名</span>
			<span class="item-count">{{notSign}}人</span>
		</div>
		<div class="content-box-item {{type == '3'?'bgc-34b4fc':''}}" (click)="sign()">
			<span class="item-title">已报名</span>
			<span class="item-count">{{signUp}}人</span>
		</div>
		<div class="content-box-item {{type == '4'?'bgc-34b4fc':''}}" (click)="notJoin()">
			<span class="item-title">不参加</span>
			<span class="item-count">{{noJoin}}人</span>
		</div>
	</div>

	<ion-list>
		<ion-item *ngFor="let item of items">

			<ng-container *ngIf="type == '1'">
				<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">
							<button (click)="goSignUp(item)" ion-button round class="btn color3 blue-btn">代报名</button>
							<button (click)="sayNo(item)" ion-button round class="btn color3 red-btn">不参加</button>
						</div>
					</div>
				</div>
			</ng-container>
			<ng-container *ngIf="type == '2'">
				<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">
							<button (click)="goSignUp(item)" ion-button round class="btn color3 blue-btn">代报名</button>
							<button (click)="sayNo(item)" ion-button round class="btn color3 red-btn">不参加</button>
						</div>
					</div>
				</div>
			</ng-container>
			<ng-container *ngIf="type == '3'">
				<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>
			</ng-container>
			<ng-container *ngIf="type == '4'">
				<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>
			</ng-container>
		</ion-item>

	</ion-list>
</ion-content>