<div @fade class="tableBar" style="padding: 0 15px;">
  <div class="backBtnOnTabset">
    <app-back [isLoading]="isLoading"></app-back>
  </div>
  <nz-tabset>
    <nz-tab nzTitle="主题">
      <div class="subTitle">
        {{'sensor' | translate}} {{name}} {{'topic' | translate}}{{'detail' | translate}}
        <div class="backBtnOnTabset" style="top: -2px">
          <button nz-button nzType="primary" class="searchBtn" style="margin-right: 10px" [nzLoading]="isLoading" (click)="saveOther()"><span>
            {{'isSaveOtherTopicModel' | translate}}</span></button>
          <button nz-button nzType="primary" class="searchBtn" style="margin-right: 10px" [nzLoading]="isLoading" (click)="add()"><span>
            {{'addTopic' | translate}}</span></button>
          <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="changeModel()"><span>
            {{'changeModel' | translate}}</span></button>
        </div>
      </div>
      <nz-table #nzTable
                [nzData]="deviceData"
                [nzSize]="'middle'"
                nzShowSizeChanger
                [nzShowPagination]="true"
                [nzLoading]="isLoading">
        <thead nz-thead>
        <tr>
          <th nz-th><span>{{'topicName' | translate}}</span></th>
          <th nz-th><span>{{'topicType' | translate}}</span></th>
          <th nz-th><span>{{'dataType' | translate}}</span></th>
          <th nz-th><span>{{'inTime' | translate}}</span></th>
          <th nz-th><span>{{'dataSaveInTime' | translate}}</span></th>
          <th nz-th><span>{{'retentionPolicyName' | translate}}</span></th>
          <th nz-th><span>{{'duration' | translate}}</span></th>
          <th nz-th><span>{{'oper' | translate}}</span></th>
        </tr>
        </thead>
        <tbody nz-tbody>
        <tr *ngFor="let one of nzTable.data, let i = index">
          <td nz-td class="canClick" (click)="toDetail(one)">{{one.topicName}}</td>
          <td nz-td>{{one.topicType === 0 ? '推送主题' : one.topicType === 1 ? '订阅主题' :
            one.topicType === 2 ? '推送订阅主题' :
            one.topicType === 3 ? '告警主题' : '通知主题' }}</td>
          <td nz-td>{{one.dataType === 0 ? 'json' : 'bin'}}</td>
          <td nz-td>{{one.interval}}</td>
          <td nz-td>{{one.dataInterval}}</td>
          <td nz-td>{{one.retentionPolicyName}}</td>
          <td nz-td>{{one.duration}}</td>
          <td nz-td>
            <span class="editSpan" (click)="update(one)">{{'update' | translate}}</span>
            <nz-divider nzType="vertical"></nz-divider>
            <span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab nzTitle="运行状态">
      <div class="subTitle">
        <div class="backBtnOnTabset" style="top: -2px">
          <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="refresh()"><span>
            {{'refresh' | translate}}</span></button>
        </div>
      </div>
      <nz-tabset style="margin-top: -20px;">
        <nz-tab nzTitle="表格">
          <nz-table #nzTable5
                    [nzData]="actualData"
                    [nzSize]="'middle'"
                    nzShowSizeChanger
                    [nzShowPagination]="true"
                    [nzLoading]="isLoading">
            <thead nz-thead>
            <tr>
              <th nz-th><span>{{'wayName' | translate}}</span></th>
              <th nz-th><span>{{'wayAlias' | translate}}</span></th>
              <th nz-th><span>{{'per' | translate}}</span></th>
              <th nz-th><span>{{'wayType' | translate}}</span></th>
              <th nz-th><span>{{'updateTime' | translate}}</span></th>
              <th nz-th><span>{{'updateData' | translate}}</span></th>
              <th nz-th><span>{{'max' | translate}}</span></th>
              <th nz-th><span>{{'min' | translate}}</span></th>
              <th nz-th><span>{{'oper' | translate}}</span></th>
            </tr>
            </thead>
            <tbody nz-tbody>
            <tr *ngFor="let one of nzTable5.data, let i = index">
              <td nz-td>{{one.name}}</td>
              <td nz-td>{{one.alias}}</td>
              <td nz-td>{{one.unit}}</td>
              <td nz-td>{{one.type}}</td>
              <td nz-td>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
              <td nz-td>{{(one.type === 'DI' || one.type === 'DO') ? (one.value === '1.0' ? 1 : 0) : one.value}}</td>
              <td nz-td>{{one.rangeMax}}</td>
              <td nz-td>{{one.rangeMin}}</td>
              <td nz-td>
                <span class="editSpan" (click)="toSee(one)">{{'see' | translate}}</span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-tab>
        <nz-tab nzTitle="图表">
          <nz-row style="min-height: 50px;">
            <nz-col [nzSpan]="2">
              <p>请选择主题</p>
            </nz-col>
            <nz-col [nzSpan]="5">
              <nz-select [(ngModel)]="selectedTopicValue" nzAllowClear nzPlaceHolder="Choose" style="min-width: 300px">
                <nz-option *ngFor="let one of topicOption" [nzValue]="one.topicName" [nzLabel]="one.topicName"></nz-option>
              </nz-select>
            </nz-col>

          </nz-row>
          <nz-row>
            <div class="cards">
              <div class="card" *ngFor="let one of actualData;let i = index">
                <div class="title">
                  {{one.alias}}
                  <div class="rightSpan canClick" (click)="OnReqHistroyChart(i)">查看数据</div>
                </div>
                <div class="middle">
                  <div class="left">{{one.value}}{{one.unit === '-' ? '' : one.unit}}</div>
                  <div class="right">
                    {{one.rangeMin}}{{one.unit === '-' ? '' : one.unit}} - {{one.rangeMax}}{{one.unit === '-' ? '' : one.unit}}
                  </div>
                </div>
                <div class="bottom">
                  {{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
                </div>
              </div>
            </div>
            <div class="charts" *ngIf="isClose">
              <div style="width: calc(100% - 80px);display: inline-block;vertical-align: top;padding-left: 15px;">
                <app-search-select inModal="true" [label]="'selectTime' | translate" [(value)]="selectTime3"
                                   optL="a" optV="b" [data]="[{a: '1小时', b: 1}, {a: '24小时', b: 24}, {a: '7天', b: 144}, {a: '自定义', b: 0}]"></app-search-select>
                <app-search-date *ngIf="selectTime3 === 0" inModal="true" [label]="'startTime' | translate" [(value)]="req3.startTime"
                                 showTime="true"></app-search-date>
                <app-search-date *ngIf="selectTime3 === 0" inModal="true" [label]="'endTime' | translate" [(value)]="req3.endTime"
                                 showTime="true"></app-search-date>
              </div>
              <button nz-button class="searchBtn" [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()">
                <span>{{'search' | translate}}</span></button>
              <nz-tabset style="border-top: 1px solid #cccccc">
                <nz-tab nzTitle="图表"><div echarts [options] = "chartOption" class="demo-chart"></div></nz-tab>
              </nz-tabset>
              <div class="btnLine">
                <button nz-button class="searchBtn" [nzType]="'default'" [nzLoading]="isLoading" (click)="isClose = false;">
                  <span>{{'close' | translate}}</span></button>
              </div>
            </div>
          </nz-row>
        </nz-tab>
      </nz-tabset>
    </nz-tab>

  </nz-tabset>
</div>
<nz-modal [(nzVisible)]="isUC" [nzTitle]="isUpdate ? ('updateTopic' | translate) : ('addTopic' | translate)" [nzContent]="con1" nzWidth="500"
          [nzFooter]="foot1" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con1>
    <app-search-item isMust="true" inModal="true" [label]="'topicName' | translate" [(value)]="req.topicName"></app-search-item>
    <app-search-select isMust="true" inModal="true" [label]="'topicType' | translate" [(value)]="req.topicType"
                       [data]="[{a: '推送主题', b: 0}, {a: '订阅主题', b: 1}, {a: '推送订阅主题', b: 2}, {a: '告警主题', b: 3}, {a: '通知主题', b: 4}]"
                       optL="a" optV="b"></app-search-select>
    <app-search-select isMust="true" inModal="true" [label]="'dataType' | translate" [(value)]="req.dataType"
                       [data]="[{a: 'json', b: 0}, {a: 'bin', b: 1}]" optL="a" optV="b"></app-search-select>
    <app-search-select isMust="true" *ngIf="!isUpdate" inModal="true" [label]="'probesModel' | translate" [(value)]="req.probesModelNo"
                       [data]="probsModels" optL="probesModelName" optV="probesModelNo"></app-search-select>
    <app-search-item inModal="true" [label]="'dataInterval' | translate" [(value)]="req.dataInterval"></app-search-item>
    <!--<app-search-item isMust="true" inModal="true" [label]="'frequency' | translate" [(value)]="req.frequency"></app-search-item>-->
    <app-search-item isMust="true" inModal="true" [label]="'interval' | translate" [(value)]="req.interval"></app-search-item>

    <app-search-select inModal="true" [label]="'retentionPolicyName' | translate" [(value)]="req.retentionPolicyNo"
                       [data]="policyList"
                       (valueChange)="onChangePolicy()"
                       optL="opLevel" optV="opValue"></app-search-select>
    <app-search-item inModal="true" [readonly]="'true'" [label]="'duration' | translate" [(value)]="req.duration"></app-search-item>
  </ng-template>
  <ng-template #foot1>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()">
      <span>{{'cancel' | translate}}</span></button>
    <button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save('req')">
      <span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isMC" [nzTitle]="'changeModel' | translate" [nzContent]="con2" nzWidth="500"
          [nzFooter]="foot2" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con2>
    <app-search-select isMust="true" inModal="true" [label]="'topicModel' | translate" [(value)]="req5.topicModelNo"
                       [data]="topicModels" optL="topicModelName" optV="topicModelNo"></app-search-select>
  </ng-template>
  <ng-template #foot2>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()">
      <span>{{'cancel' | translate}}</span></button>
    <button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save('req5')">
      <span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isUC2" [nzContent]="con3" nzWidth="750"
          [nzFooter]="foot3" [nzTitle]="'updateWay' | translate" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con3>
    <div class="half">
      <app-search-item isMust="true" inModal="true" [label]="'wayName' | translate" [(value)]="req2.name"></app-search-item>
      <app-search-item inModal="true" [label]="'per' | translate" [(value)]="req2.unit"></app-search-item>
      <app-search-item isMust="true" inModal="true" [label]="'wayDescription' | translate" [(value)]="req2.description"></app-search-item>
      <app-search-item inModal="true" [label]="'max' | translate" [(value)]="req2.rangeMax"></app-search-item>
      <app-search-item inModal="true" [label]="'alarmMax' | translate" [(value)]="req2.alarmUp"></app-search-item>
      <app-search-item inModal="true" [label]="'alarmMaxMax' | translate" [(value)]="req2.upperAlarmLimit"></app-search-item>
      <div class="searchItem inModal">
        <div class="item-label"><span class="deleteFontColor">* </span>{{'isAlarm' | translate}}</div>
        <div class="item-input">
          <nz-radio-group [(ngModel)]="req2.isAlarm">
            <label nz-radio [nzValue]="1">是</label>
            <label nz-radio [nzValue]="0">否</label>
          </nz-radio-group>
        </div>
      </div>
    </div>
    <div class="half">
      <app-search-item inModal="true" [label]="'wayAlias' | translate" [(value)]="req2.alias"></app-search-item>
      <app-search-item isMust="true" inModal="true" [label]="'wayType' | translate" [(value)]="req2.type"></app-search-item>
      <app-search-item inModal="true" [label]="'min' | translate" [(value)]="req2.rangeMin"></app-search-item>
      <app-search-item inModal="true" [label]="'alarmMin' | translate" [(value)]="req2.alarmDown"></app-search-item>
      <app-search-item inModal="true" [label]="'alarmMinMin' | translate" [(value)]="req2.lowerAlarmLimit"></app-search-item>
      <app-search-item inModal="true" [label]="'alarmInterval' | translate" [(value)]="req2.alarmInterval"></app-search-item>
    </div>
    <div class="searchItem inModal">
      <div class="item-label" style="width: 149px;">{{'wayInfo' | translate}}</div>
      <div class="item-input" style="width: calc(100% - 158px);">
        <textarea nz-input [(ngModel)]="req2.boxedart"></textarea>
      </div>
    </div>
  </ng-template>
  <ng-template #foot3>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
    <button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save('req2')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>


<nz-modal [(nzVisible)]="isSaveOther" [nzContent]="con4" nzWidth="500" [nzTitle]="'isSaveOtherTopicModel' | translate"
          [nzFooter]="foot4" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con4>
    <app-search-item inModal="true" isMust="true" [label]="'moduleName' | translate" [(value)]="req4.newTopicModelName"></app-search-item>
    <!--<app-search-select isMust="true" inModal="true" [(value)]="req2.companyNo" [label]="'selectCompany' | translate" optL="companyName"-->
    <!--[data]="companys" optV="companyNo"></app-search-select>-->
  </ng-template>
  <ng-template #foot4>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
    <button nz-button nzType="primary" class="searchBtn" [nzLoading]="isLoading" (click)="save('req4')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>


<nz-modal [(nzVisible)]="isToSee" [nzContent]="con5" nzWidth="500" [nzTitle]="'isToSeeModel' | translate"
          [nzFooter]="foot5" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con5>
    <!--<app-search-item inModal="true" isMust="true" [label]="'moduleName' | translate" [(value)]="req4.newTopicModelName"></app-search-item>-->
    <!--<app-search-select isMust="true" inModal="true" [(value)]="req2.companyNo" [label]="'selectCompany' | translate" optL="companyName"-->
    <!--[data]="companys" optV="companyNo"></app-search-select>-->
    <div style="width: calc(100% - 80px);display: inline-block;vertical-align: top;padding-left: 15px;">
      <app-search-select inModal="true" [label]="'selectTime' | translate" [(value)]="selectTime3"
                         optL="a" optV="b" [data]="[{a: '1小时', b: 1}, {a: '24小时', b: 24}, {a: '7天', b: 144}, {a: '自定义', b: 0}]"></app-search-select>
      <app-search-date *ngIf="selectTime3 === 0" inModal="true" [label]="'startTime' | translate" [(value)]="req3.startTime"
                       showTime="true"></app-search-date>
      <app-search-date *ngIf="selectTime3 === 0" inModal="true" [label]="'endTime' | translate" [(value)]="req3.endTime"
                       showTime="true"></app-search-date>
    </div>
    <button nz-button class="searchBtn" [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearchToSee()">
      <span>{{'search' | translate}}</span></button>
        <nz-tabset style="border-top: 1px solid #cccccc">
          <nz-tab nzTitle="表格">
            <nz-table #nzTable6
                      [nzData]="toSeeData"
                      [nzSize]="'middle'"
                      nzShowSizeChanger
                      [nzShowPagination]="true"
                      [nzLoading]="isLoading">
              <thead nz-thead>
              <tr>
                <th nz-th><span>{{'Time' | translate}}</span></th>
                <th nz-th><span>{{'Numerical' | translate}}</span></th>
              </tr>
              </thead>
              <tbody nz-tbody>
              <tr *ngFor="let one of nzTable6.data, let i = index">
                <td nz-td>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
                <td nz-td>{{(one.type === 'DI' || one.type === 'DO') ? (one.value ? 1 : 0) : one.value}}</td>
              </tr>
            </nz-table>
      </nz-tab>
      <nz-tab nzTitle="图表"><div class="chartCon" echarts [options]="option1"></div></nz-tab>
    </nz-tabset>
  </ng-template>
  <ng-template #foot5>
    <button nz-button class="searchBtn" nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
  </ng-template>
</nz-modal>
