

<nz-tabset [nzTabBarExtraContent]="extraTemplate">
  <nz-tab nzTitle="模板详情">

    <nz-collapse>
      <nz-collapse-panel nzHeader="基础信息" nzActive>
        <nz-list nzBordered>
          <nz-list-item><span>ID</span>{{data.id}}</nz-list-item>
          <nz-list-item><span>名称</span>{{data.name}}</nz-list-item>
          <nz-list-item><span>版本</span>{{data.version}}</nz-list-item>
          <nz-list-item><span>创建时间</span>{{data.created|dateString}}</nz-list-item>
        </nz-list>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="初始设备" nzActive>
        <nz-table #productsTable nzSize="small" [nzData]="data.products" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>ID</th>
            <th>别名</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of productsTable.data; let i=index">
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="定时任务" nzActive>
        <nz-table #jobsTable nzSize="small" [nzData]="data.jobs" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>类型</th>
            <th>定时</th>
            <th>执行</th>
            <th>禁用</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of jobsTable.data; let i=index">
            <td>{{ data.type }}</td>
            <td>
              <span *ngIf="data.type=='clock'">{{data.clock | minuteFormat}}</span>
              <span *ngIf="data.type=='crontab'">{{data.crontab}}</span>
            </td>
            <td>{{ data.invokes }}</td>
            <td>{{ data.disabled }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="控制策略" nzActive>
        <nz-table #strategiesTable nzSize="small" [nzData]="data.strategies" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>名称</th>
            <th>条件</th>
            <th>延迟</th>
            <th>超时重置</th>
            <th>重置次数</th>
            <th>执行命令</th>
            <th>禁用</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of strategiesTable.data; let i=index">
            <td>{{ data.name }}</td>
            <td>{{ data.condition }}</td>
            <td>{{ data.delay }}</td>
            <td>{{ data.reset_timeout }}</td>
            <td>{{ data.reset_total }}</td>
            <td>{{ data.invokes }}</td>
            <td>{{ data.disabled }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="数据检查" nzActive>
        <nz-table #alarmsTable nzSize="small" [nzData]="data.alarms" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>名称</th>
            <th>条件</th>
            <th>延迟</th>
            <th>超时重置</th>
            <th>重置次数</th>
            <th>代码</th>
            <th>内容</th>
            <th>等级</th>
            <th>禁用</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of alarmsTable.data; let i=index">
            <td>{{ data.name }}</td>
            <td>{{ data.condition }}</td>
            <td>{{ data.delay }}</td>
            <td>{{ data.reset_timeout }}</td>
            <td>{{ data.reset_total }}</td>
            <td>{{ data.code }}</td>
            <td>{{ data.message }}</td>
            <td>{{ data.level }}</td>
            <td>{{ data.disabled }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="聚合计算" nzActive>
        <nz-table #aggregatorsTable nzSize="small" [nzData]="data.aggregators" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>类型</th>
            <th>目标</th>
            <th>变量</th>
            <th>表达式</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of aggregatorsTable.data; let i=index">
            <td>{{ data.type }}</td>
            <td>{{ data.targets?.join(',') }}</td>
            <td>{{ data.as }}</td>
            <td>{{ data.expression }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

    </nz-collapse>
  </nz-tab>
  <nz-tab nzTitle="项目实例">
    <ng-template nz-tab>
      <app-template-project [id]="id"></app-template-project>
    </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/template/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
