<ion-header>
	<ion-toolbar>
		<div class="searchToolBar">
			<button ion-button clear small navPop style="padding: 0;" (click)="goBack()">
				<img class="back-btn" src="./assets/imgs/back.png" />
			</button>
			<ion-title text-center>
				我的报备
			</ion-title>
		</div>

	</ion-toolbar>
	<div class="pageMenuSlides">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide {{i==0?'bottomLine':''}}" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu(i)">{{item}}
					<span *ngIf="i==0" class="menu-index" style="line-height:15px;">{{allReport.length}}</span>
					<span *ngIf="i==1" class="menu-index" style="line-height:15px;">{{processingReport.length}}</span>
					<span *ngIf="i==2" class="menu-index" style="line-height:15px;">{{endReport.length}}</span>
				</div>
			</div>
		</div>
	</div>
</ion-header>
<ion-content>
	<ion-slides #contentSlides (ionSlideDidChange)="slideChanged()">
		<ion-slide>
			<ion-content direction="y" scrollbar-y="true">
				<ion-list>
					<ion-item *ngFor="let report of allReport">
						<div class="item">
							<div class="item-header">
								<div class="item-header-style">
									<img src="./assets/imgs/bb.png" class="icon">
									<span class="item-title">{{report.title}}</span>
								</div>
								<button ion-button round class="btn color1" *ngIf="report.reported && report.outStatus==0">不离沪</button>
								<button ion-button round class="btn color2" *ngIf="report.reported && report.outStatus==1">境内</button>
								<button ion-button round class="btn color3" *ngIf="report.reported && report.outStatus==2">境外</button>
								<button ion-button round class="btn color4" *ngIf="report.reported && report.outStatus==3">境内&境外</button>

								<button ion-button round class="btn color4" *ngIf="report.isOverTimeFlag && !report.reported">截止未报备</button>

								<button ion-button round class="btn color4" *ngIf="!report.isOverTimeFlag && !report.reported">未报备</button>

							</div>

						<ion-item *ngIf="!report.isOverTimeFlag && report.reported">
							<div class="content-box" (click)="goReport(report)" >
								<div class="content-item-box">
									<label class="left-title">离沪日期：</label>
									<div class="data">{{report.leaveDate}}</div>
								</div>
								<div class="content-item-box">
									<label class="left-title">回沪日期：</label>
									<div class="data">
										{{report.backDate}}
									</div>
								</div>
								<div class="content-item-box">
									<label class="left-title">外出地点：</label>
									<div class="data">
										{{report.address}}
									</div>
								</div>
							</div>
						</ion-item>

						<ion-item *ngIf="!report.isOverTimeFlag && !report.reported">
								<div class="content-box" (click)="goReport(report)" >
									<div class="content-item-box">
										<label class="left-title">离沪日期：</label>
										<div class="data">{{report.leaveDate}}</div>
									</div>
									<div class="content-item-box">
										<label class="left-title">回沪日期：</label>
										<div class="data">
											{{report.backDate}}
										</div>
									</div>
									<div class="content-item-box">
										<label class="left-title">外出地点：</label>
										<div class="data">
											{{report.address}}
										</div>
									</div>
								</div>
							</ion-item>

						<ion-item *ngIf="report.isOverTimeFlag && report.reported">
								<div class="content-box" (click)="goDetail(report)" >
									<div class="content-item-box">
										<label class="left-title">离沪日期：</label>
										<div class="data">{{report.leaveDate}}</div>
									</div>
									<div class="content-item-box">
										<label class="left-title">回沪日期：</label>
										<div class="data">
											{{report.backDate}}
										</div>
									</div>
									<div class="content-item-box">
										<label class="left-title">外出地点：</label>
										<div class="data">
											{{report.address}}
										</div>
									</div>
								</div>
							</ion-item>

						<ion-item *ngIf="report.isOverTimeFlag && !report.reported">
								<div class="content-box" (click)="goDetail(report)" >
									<div class="content-item-box">
										<label class="left-title">报备已截止</label>
									</div>
								</div>
						</ion-item>

							<div class="right">
								<button class="reselection" *ngIf="report.isOverTimeFlag && !report.reported" (click)="goDetail(report); $event.stopPropagation()">查看详情</button>
								<button class="reselection" *ngIf="!report.isOverTimeFlag && report.reported" (click)="goReport(report); $event.stopPropagation()">修改报备</button>

								<button class="reselection" *ngIf="report.isOverTimeFlag && report.reported" (click)="goDetail(report); $event.stopPropagation()">查看详情</button>
								<button class="reselection" *ngIf="!report.isOverTimeFlag && !report.reported" (click)="goReport(report); $event.stopPropagation()">报备</button>
							</div>
						</div>
					</ion-item>
				</ion-list>
			</ion-content>
		</ion-slide>

		<ion-slide>
			<ion-content direction="y" scrollbar-y="true">
				<ion-list>
					<ion-item *ngFor="let report of processingReport">
						<div class="item">
							<div class="item-header">
								<div class="item-header-style">
									<img src="./assets/imgs/bb.png" class="icon">
									<span class="item-title">{{report.title}}</span>
								</div>
								<button ion-button round class="btn color1" *ngIf="report.outStatus==0">不离沪</button>
								<button ion-button round class="btn color2" *ngIf="report.outStatus==1">境内</button>
								<button ion-button round class="btn color3" *ngIf="report.outStatus==2">境外</button>
								<button ion-button round class="btn color4" *ngIf="report.outStatus==3">境内&境外</button>

								<button ion-button round class="btn color4" *ngIf="!report.isOverTimeFlag && !report.reported">未报备</button>
							</div>

							<div class="content-box" (click)="goReport(report)" >
								<div class="content-item-box">
									<label class="left-title">离沪日期：</label>
									<div class="data">{{report.leaveDate}}</div>
								</div>
								<div class="content-item-box">
									<label class="left-title">回沪日期：</label>
									<div class="data">
										{{report.backDate}}
									</div>
								</div>
								<div class="content-item-box">
									<label class="left-title">外出地点：</label>
									<div class="data">
										{{report.address}}
									</div>
								</div>
							</div>

							<div class="right">
								<button class="reselection" *ngIf="!report.isOverTimeFlag && report.reported" (click)="goReport(report); $event.stopPropagation()">修改报备</button>
								<button class="reselection" *ngIf="!report.isOverTimeFlag && !report.reported" (click)="goReport(report); $event.stopPropagation()">报备</button>
							</div>
						</div>
					</ion-item>
				</ion-list>
			</ion-content>
		</ion-slide>

		<ion-slide>
			<ion-content direction="y" scrollbar-y="true">
				<ion-list>
					<ion-item *ngFor="let report of endReport">
						<div class="item">
							<div class="item-header">
								<div class="item-header-style">
									<img src="./assets/imgs/bb.png" class="icon">
									<span class="item-title">{{report.title}}</span>
								</div>
								<button ion-button round class="btn color1" *ngIf="report.outStatus==0">不离沪</button>
								<button ion-button round class="btn color2" *ngIf="report.outStatus==1">境内</button>
								<button ion-button round class="btn color3" *ngIf="report.outStatus==2">境外</button>
								<button ion-button round class="btn color4" *ngIf="report.outStatus==3">境内&境外</button>

								<button ion-button round class="btn color4" *ngIf="report.isOverTimeFlag && !report.reported">截止未报备</button>
							</div>

							<ion-item *ngIf="report.isOverTimeFlag && report.reported">
									<div class="content-box" (click)="goDetail(report)" >
										<div class="content-item-box">
											<label class="left-title">离沪日期：</label>
											<div class="data">{{report.leaveDate}}</div>
										</div>
										<div class="content-item-box">
											<label class="left-title">回沪日期：</label>
											<div class="data">
												{{report.backDate}}
											</div>
										</div>
										<div class="content-item-box">
											<label class="left-title">外出地点：</label>
											<div class="data">
												{{report.address}}
											</div>
										</div>
									</div>
								</ion-item>
		
								<ion-item *ngIf="report.isOverTimeFlag && !report.reported">
										<div class="content-box" (click)="goDetail(report)" >
											<div class="content-item-box">
												<label class="left-title">报备已截止</label>
											</div>
										</div>
								</ion-item>


							<div class="right">
								<button class="reselection" (click)="goDetail(report)">查看详情</button>
							</div>
						</div>
					</ion-item>
				</ion-list>
			</ion-content>
		</ion-slide>
	</ion-slides>
</ion-content>