
<ion-header>

  <ion-navbar>
    <ion-title>我的值班</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="bgc-e7e8ed">

  <div class="duty">
    <div class="dutyItem" (click)="change(1)">
      <span  class="{{changeType == 1?'duty-title':''}}">待执行</span>
    </div>
    <div class="dutyItem"  (click)="change(2)">
      <span class="{{changeType == 2?'duty-title':''}}">已完成</span>
    </div>
  </div>
  <ng-container *ngIf="changeType == 1">
    <div class="duty-content">
      <ion-list *ngIf="nowDuty.length > 0">
        <ion-item class="dutyItem" class="margin-top-10" *ngFor="let item of nowDuty">
          <div class="margin-bottom-15">
            <span>{{item.dutyDate | date:'yyyy-MM-dd'}}</span>
            <span *ngIf="item.type == 0">白班</span>
            <span *ngIf="item.type == 1">夜班</span>
            <span float-right class="duty-state">待值班</span>
          </div>
          <div>
                            <span class="color-666" style="font-size: 1.5rem">
                                <span *ngIf="item.dayType == 1">工作日</span>
                                <span *ngIf="item.dayType == 2">节假日</span>
                                <span *ngIf="item.dayType == 3">调休</span>
                                <span *ngIf="item.dayType == 4">调班</span>
                                <span *ngIf="item.dayType == 5">周末</span>
                            </span>

            <span class="span-btn" float-right (click)="dutyDetail(item)" *ngIf="item.applyId">查看详情</span>
            <span class="span-btn" float-right (click)="dutyApply(item)" *ngIf="!item.applyId">申请换班</span>
          </div>
        </ion-item>
      </ion-list>
      <ion-list text-center style="margin-top: 10rem" *ngIf="nowDuty.length == 0">
        <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
        <p text-center>
          暂无值班
        </p>
      </ion-list>
    </div>
  </ng-container>
  <ng-container *ngIf="changeType == 2">
    <div class="duty-content">
      <ion-list *ngIf="historyDuty.length > 0">
        <ion-item class="dutyItem" class="margin-top-10" *ngFor="let item of nowDuty">
          <div class="margin-bottom-15">
            <span>{{item.dutyDate | date:'yyyy-MM-dd'}}</span>
            <span *ngIf="item.type == 0">白班</span>
            <span *ngIf="item.type == 1">夜班</span>
            <span float-right class="duty-state">待值班</span>
          </div>
          <div>
                            <span class="color-666" style="font-size: 1.5rem">
                                <span *ngIf="item.type == 1">工作日</span>
                                <span *ngIf="item.type == 2">节假日</span>
                                <span *ngIf="item.type == 3">调休</span>
                                <span *ngIf="item.type == 4">调班</span>
                            </span>

            <span class="span-btn" float-right (click)="dutyDetail(item)" *ngIf="item.applyId">查看详情</span>
            <span class="span-btn" float-right (click)="dutyApply(item)" *ngIf="!item.applyId">申请换班</span>
          </div>
        </ion-item>
      </ion-list>
      <ion-list text-center style="margin-top: 10rem" *ngIf="historyDuty.length == 0">
        <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
        <p text-center>
          暂无值班
        </p>
      </ion-list>
    </div>
  </ng-container>

</ion-content>
