<ion-header class="ion-no-border px-20">
  <div class="title">
    <div class="thetitle"><ion-label >Pedidos</ion-label></div>
    <div class="theicon">
      <button class="btn-no-color" (click)="doRefresh()">
        <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
      </button>
    </div>
  </div>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="parecer">
        Pedidos de Parecer
      </ion-segment-button>
      <ion-segment-button value="deferimento">
        Pedidos de Deferimento
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh()">
      <ion-refresher-content
        pullingIcon="chevron-down-circle-outline"
        pullingText="deslize para actualizar"
        refreshingSpinner="circles"
        refreshingText="A actualizar...">
      </ion-refresher-content>
    </ion-refresher>

  <div class="width-100 overflow-y-auto height-100 px-20" [ngSwitch]="segment">
    <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
    <div *ngIf="pedidosstore.listparecer.length >= 1">
      <ion-list *ngSwitchCase="'parecer'">
        <!-- *ngFor = "let task of pedidosstore.listparecer; let i = index"
        (click)="viewExpedientDetail(task.SerialNumber)" -->
        <div
          class="expediente item-hover ion-no-padding ion-no-margin cursor-pointer"
          *ngFor = "let task of pedidosstore.listparecer"
          (click)="goToPedido(task.SerialNumber)"
        >
          <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
          <div class="item width-100">
            <div class="exp-top-detail">
              <div class="subject">
                <ion-label>{{ task.Folio }}</ion-label>
              </div>
              <div class="exp-icon">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
              </div>
            </div>
            <div class="exp-bottom-detail">
              <div class="exp-remetente">
                <ion-label>{{task.Senders}}</ion-label>
              </div>
            </div>
            <div class="exp-middle-detail">
              <div class="exp-workflow">
                <span class="label">{{task.activityInstanceName}}</span>
              </div>
              <div class="exp-date">
                <ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
              </div>
            </div>
          </div>
        </div>
      </ion-list>

    </div>
    <div *ngIf="pedidosstore.listdeferimento.length >= 1">
      <ion-list *ngSwitchCase="'deferimento'">
        <div
          class="expediente item-hover ion-no-padding ion-no-margin cursor-pointer"
          *ngFor = "let task of pedidosstore.listdeferimento"
          (click)="goToPedido(task.SerialNumber)"
        >
          <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
          <div class="item width-100">
            <div class="exp-top-detail">
              <div class="subject">
                <ion-label>{{ task.Folio }}</ion-label>
              </div>
              <div class="exp-icon">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
              </div>
            </div>
            <div class="exp-bottom-detail">
              <div class="exp-remetente">
                <ion-label>{{task.Senders}}</ion-label>
              </div>
            </div>
            <div class="exp-middle-detail">
              <div class="exp-workflow">
                <span class="label">{{task.activityInstanceName}}</span>
              </div>
              <div class="exp-date">
                <ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
              </div>
            </div>
          </div>
        </div>
      </ion-list>
    </div>

    <div *ngSwitchCase="'parecer'" class="centered-div" >
      <div
        *ngIf=" pedidosstore.listparecer.length == 0"
        class="empty-list d-flex height-100 align-center justify-content-center"
      >
        <span>Lista vazia</span>
      </div>
    </div>

    <div *ngSwitchCase="'deferimento'" class="centered-div">
      <div
        *ngIf="pedidosstore.listdeferimento.length == 0"
        class="empty-list d-flex height-100 align-center justify-content-center"
      >
        <span>Lista vazia</span>
      </div>
    </div>

    <div *ngIf="skeletonLoader && pedidosstore.listparecer.length == 0 && skeletonLoader && pedidosstore.listdeferimento.length == 0 ">

      <ion-list>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>
  </div>

</ion-content>

