<page-header [title]="'设备列表'">
  <nz-card [nzBordered]="false" class>
    <form nz-form class="search__form" action="search">
      <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
        <div nz-col nzMd="8" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="name">设备名称</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="q.name" placeholder="请输入设备名称" [ngModelOptions]="{ standalone: true }" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24" style="text-align: right">
          <button nz-button type="submit" [nzType]="'primary'" (click)="getData()">搜索</button>
          <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
          <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
        </div>
      </div>

      <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/authority/roleform']" [queryParams]="{Id:-1}">
      <i nz-icon nzType="plus"></i>
      <span>{{ 'button.new' | translate }}</span>
    </button>-->
    </form>

    <div nz-col nzMd="8" nzSm="24">
      <button nz-button [nzType]="'primary'" (click)="edit('00000000-0000-0000-0000-000000000000')" acl [acl-ability]="137">
        <i nz-icon nzType="plus"></i>
        <span>{{ 'button.new' | translate }}</span>
      </button>

      <button nz-button [nzType]="'primary'" (click)="downlink([])" acl [acl-ability]="137">
        <i nz-icon nzType="plus"></i>
        <span>设置规则</span>
      </button>
    </div>
  </nz-card>

  <st
    [expandAccordion]="true"
    #st
    [columns]="columns"
    [data]="url"
    ps="20"
    [page]="page"
    [req]="req"
    [expand]="expand"
    [res]="res"
    expandAccordion
    (change)="onchange($event)"
  >
    <ng-template #expand let-item let-index="index" let-column="column">
      <nz-card nzTitle="设备属性">
        <nz-table [nzNoResult]="null">
          <thead>
          <tr>
            <td>属性名称</td>
            <td>属性值</td>
            <td>数据侧</td>
            <td>时间</td>
          </tr></thead>  <tbody>
          <tr *ngFor="let _item of cead; let i = index; let odd = odd">
            <td>{{ _item.keyName }}</td>
            <td>{{ _item.value }}</td>
            <td>{{ _item.dataSide }}</td>

            <td>{{ _item.dateTime }}</td>
          </tr>   </tbody>
        </nz-table>
      </nz-card>

      <nz-card nzTitle="遥测数据">
        <nz-tabset>
          <!-- <nz-tab [nzTitle]="titleTemplate">
            <ng-template #titleTemplate>
              <i nz-icon nzType="area-chart" nzTheme="outline"></i>
              图表
            </ng-template>

            <div nz-row>
              不要直接绑定,会导致界面重绘 
              <div *ngFor="let _item of cetd; let i = index; let odd = odd">
                <g2-gauge [title]="_item.keyName" [height]="180" [percent]="_item.value" style="width: 200px"></g2-gauge>
              </div>
            </div>
          </nz-tab> -->
          <nz-tab [nzTitle]="titleTemplate">
            <ng-template #titleTemplate>
              <i nz-icon nzType="table" nzTheme="outline"></i>
              数据
            </ng-template>

            <nz-table [nzNoResult]="null">
              <thead>
              <tr>
                <td>属性名称</td>
                <td>属性值</td>
                <td>时间</td>
              </tr></thead>  <tbody>
              <tr *ngFor="let _item of cetd; let i = index; let odd = odd">
                <td>{{ _item.keyName }}</td>
                <td>{{ _item.value }}</td>
                <td>{{ _item.dateTime }}</td>
              </tr> </tbody>
            </nz-table>
          </nz-tab>
        </nz-tabset>
      </nz-card>

      <nz-card nzTitle="规则">
        <nz-table [nzNoResult]="null">   
                <thead>
          <tr>
            <td>规则名称</td>
            <td>备注</td>
            <td>操作</td>
          </tr></thead>  <tbody>
          <tr *ngFor="let _item of cerd; let i = index; let odd = odd">
            <td>{{ _item.name }}</td>
            <td>{{ _item.ruleDesc }}</td>
            <td>
              <button
                nz-button
                nzType="text"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确认删除规则?"
                (nzOnConfirm)="removerule(item, _item)"
                nzPopconfirmPlacement="topLeft"
              >
                删除
              </button>
            </td>
          </tr></tbody>
        </nz-table>
      </nz-card>


      <!-- <nz-card nzTitle="操作">

<div nz-row >

  <span *ngFor="let _item of cett; let i = index;">
  <button 
                nz-button
                nzType="primary"
                (nzOnConfirm)="executeCommand(item, _item)"
                nz-popconfirm
                nzPopconfirmTitle="{{'确认执行'+_item.commandTitle+'?'}}"
                nzPopconfirmPlacement="topLeft"
              >
                {{_item.commandTitle}}
              </button></span>

</div>


      </nz-card> -->
    </ng-template>
  </st>
</page-header>
