<nz-tabset [nzTabBarExtraContent]="extraTemplate">
  <nz-tab nzTitle="项目详情">

    <nz-collapse>
      <nz-collapse-panel nzHeader="基础信息" nzActive>
        <nz-list nzBordered>
          <nz-list-item><span>名称</span>{{data.name}}</nz-list-item>
          <nz-list-item>
            <span>模板</span>
            <a [routerLink]="'/admin/template/detail/'+data.template_id">{{data.template}}</a>
          </nz-list-item>
          <nz-list-item><span>状态</span>{{data.running ? '启动' : '离线'}}</nz-list-item>
          <nz-list-item><span>禁用</span>
            <nz-switch [ngModel]="data.disabled" (ngModelChange)="onEnableChange($event)"></nz-switch>
          </nz-list-item>
          <nz-list-item><span>创建时间</span>{{data.created|dateString}}</nz-list-item>
        </nz-list>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="相关设备" nzActive>
        <div nz-row [nzGutter]="10">
          <div nz-col *ngFor="let dev of data.devices" [nzSpan]="4" [nzXs]="12" [nzSm]="8" [nzMd]="6" [nzLg]="4"
               [nzXl]="3" [nzXXl]="2">
            <nz-card [routerLink]="'/admin/device/detail/'+dev.id">
              {{dev.name}}
            </nz-card>
          </div>
        </div>
      </nz-collapse-panel>
    </nz-collapse>

  </nz-tab>
  <nz-tab nzTitle="组态" [nzDisabled]="!data.hmi">
    <ng-template nz-tab>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="告警记录">
    <ng-template nz-tab>
      <app-alarm type="project" [id]="id"></app-alarm>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="日志">
    <ng-template nz-tab>
      <app-event type="project" [id]="id"></app-event>
    </ng-template>
  </nz-tab>

</nz-tabset>

<ng-template #extraTemplate>
  <a (click)="load()" title="刷新">
    <i nz-icon nzType="reload" [nzSpin]="loading"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="原始数据" appViewConfig [config]="data">
    <i nz-icon nzType="profile"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="编辑" [routerLink]="'/admin/project/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
