<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.tags?.join(',')}}</nz-list-item>
          <nz-list-item><span>厂商</span>{{data.manufacturer}}</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 #dataPointsTable nzSize="small" [nzData]="data.points" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>变量</th>
            <th>名称</th>
            <th>单位</th>
            <th>地址</th>
            <th>类型</th>
            <th>小端模式</th>
            <th>小数点位</th>
            <th>默认值</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of dataPointsTable.data; let i=index">
            <td>{{ data.name }}</td>
            <td>{{ data.label }}</td>
            <td>{{ data.unit }}</td>
            <td>{{ data.address }}</td>
            <td>{{ data.type }}</td>
            <td>{{ data.little_endian }}</td>
            <td>{{ data.precision }}</td>
            <td>{{ data.default }}</td>
          </tr>
          </tbody>
        </nz-table>

      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="采集器" nzActive>
        <nz-table #collectorsTable nzSize="small" [nzData]="data.pollers" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>类型</th>
            <th>定时</th>
            <th>地址</th>
            <th>长度</th>
            <th>禁用</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of collectorsTable.data; let i=index">
            <td>{{ data.type }}</td>
            <td>
              <span *ngIf="data.type=='interval'">{{data.interval}}</span>
              <span *ngIf="data.type=='clock'">{{data.clock | minuteFormat}}</span>
              <span *ngIf="data.type=='crontab'">{{data.crontab}}</span>
            </td>
            <td>{{ data.address }}</td>
            <td>{{ data.length }}</td>
            <td>{{ data.disabled }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="公式计算" nzActive>
        <nz-table #calculatorsTable nzSize="small" [nzData]="data.calculators" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>变量</th>
            <th>表达式</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of calculatorsTable.data; let i=index">
            <td>{{ data.as }}</td>
            <td>{{ data.expression }}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="控制命令" nzActive>
        <nz-table #commandsTable nzSize="small" [nzData]="data.commands" [nzFrontPagination]="false">
          <thead>
          <tr>
            <th>命令</th>
            <th>指令</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of commandsTable.data; let i=index">
            <td>{{ data.name }}</td>
            <td>{{ data.directives }}</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>

  </nz-tab>
  <nz-tab nzTitle="设备实例">
    <ng-template nz-tab>
      <app-product-device [id]="id"></app-product-device>
    </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/product/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
