<div class="bigbox" id="hostbox">
  <div class="orbox">
    <div class="topbox">
      <div class="lefttop">
        <span>组织机构列表</span>
      </div>
      <div class="righttop">
        <nz-input-group nzPrefixIcon="search">
          <input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" />
        </nz-input-group>
      </div>
    </div>
    <div class="treeTitle">
      <span>组织机构</span>
    </div>
    <div class="treebox">
      <nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes"
        [nzExpandAll]="nzExpandAll" [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys'
        (nzClick)="nzClick($event)">
      </nz-tree>
    </div>
  </div>
  <div class="hostListbox">
    <div class="topbox">
      <div class="lefttop">
        <span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 边缘盒子列表
          <span class="yellowspan">（请从左侧选择加油站）</span>
          <i style="cursor: pointer;" (click)="refresh()" nz-icon nzType="redo" nzTheme="outline"></i>
        </span>

      </div>
      <!-- <div class="righttop" *ngIf="selectedOilStation">
        <button nz-button nzType="primary" (click)="addHost()"><i nz-icon nzType="plus-circle"
            nzTheme="outline"></i>新增边缘盒子</button>
      </div> -->
    </div>
    <div class="tablebox">
      <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16' [nzLoading]="isLoading">
        <thead>
          <tr>
            <th>ip</th>
            <th>配置状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td>{{data.hostIPAddress}}</td>
            <td>!配置状态!</td>
            <td class="operation">
              <!-- <a (click)="edit(data)" style="margin-right: 12px;">编辑</a> -->
              <a (click)="config(data)" style="margin-right: 12px;">配置</a>
              <nz-modal [(nzVisible)]="isVisible" [nzWidth]="350" nzTitle="请选择要配置的边缘主机" (nzOnCancel)="handleCancel()"
                (nzOnOk)="handleOk()">
                <ng-container *nzModalContent>
                  <nz-radio-group [(ngModel)]="radioValue">
                    <label nz-radio nzValue="交大">交大盒子</label>
                    <label nz-radio nzValue="黄海">黄海盒子</label>
                    <label nz-radio nzValue="安信">安信盒子</label>
                  </nz-radio-group>
                </ng-container>
              </nz-modal>
              <a (click)="download(data)" style="margin-right: 12px;">下载设备编号</a>
              <!-- <a class="red" (click)="delete(data)">删除</a> -->
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>