<ion-header>

    <ion-navbar>
        <ion-title>值班情况</ion-title>
        <span (click)="sigUp()" float-right class="margin-right-10 color-fff">值班签到</span>

    </ion-navbar>
    <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>
</ion-header>


<ion-content>
    <ion-content direction="y" scrollbar-y="true" class="bgc-e7e8ed">
        <ng-container *ngIf="changeType == 1">
            <ion-calendar [(ngModel)]="date"
                          (onChange)="onChange($event)"
                          [options]="options"
                          type="string"
                          format="YYYY-MM-DD">
            </ion-calendar>
            <div class="margin-top-10 duty-Obj">
                <ion-item class="">
                    <div>
                        <p> <span class="daySpan">白班</span></p>
                        <p class="padding-left-15">
                            <span *ngIf="dayObj.name" >{{dayObj.name}}</span>
                            <span *ngIf="!dayObj.name" >暂无</span>
                            <span>{{dayObj?.phone}}</span>
                        </p>
                        <p class="padding-left-15">{{dayObj?.orgName}}</p>
                    </div>
                </ion-item>
                <ion-item class=" margin-top-10">
                    <div>
                        <p><span class="nightSpan">夜班</span></p>
                        <p class="padding-left-15">
                            <span *ngIf="nightObj.name" >{{nightObj.name}}</span>
                            <span *ngIf="!nightObj.name" >暂无</span>
                            <span>{{nightObj?.phone}}</span>
                        </p>
                        <p class="padding-left-15">{{nightObj?.orgName}}</p>
                    </div>
                </ion-item>
            </div>
        </ng-container>
       <ng-container *ngIf="changeType == 2">
            <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.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="nowDuty.length == 0">
                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
                    <p text-center>
                        暂无数据
                    </p>
                </ion-list>
            </div>
       </ng-container>
    </ion-content>
</ion-content>

