<ion-header>
	<ion-navbar>
		<ion-title>我的报备</ion-title>
	</ion-navbar>
	<div class="pageMenuSlides">

				<div class="swiper-slide" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu(i)">
					<span class=" {{swiperIndex == i? 'swiper-title':''}} ">{{item}}</span>
					<span *ngIf="i==0" class="menu-index" style="right: 14%;">{{allReport.length}}</span>
					<span *ngIf="i==1" class="menu-index">{{processingReport.length}}</span>
					<span *ngIf="i==2" class="menu-index">{{endReport.length}}</span>
				</div>
	</div>
</ion-header>
<ion-content class="bgc-e7e8ed">

			<ng-container *ngIf="swiperIndex == 0">
				<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>
			</ng-container>

			<ng-container *ngIf="swiperIndex == 1"  >
				<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 margin-bottom-10" (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>
			</ng-container>

			<ng-container *ngIf="swiperIndex == 2">
				<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>
			</ng-container>

</ion-content>