<div class="searchBar" @fade>
  <div class="btnLine">
    <button nz-button [nzType]="'primary'" class="searchBtn" [nzLoading]="isLoading" (click)="add()">
      <span>{{'addCompany' | translate}}</span></button>
  </div>
</div>
<div class="tableBar" @fade>
  <nz-table #nzTable
            [nzData]="data"
            [nzLoading]="isLoading"
            [nzFrontPagination]="false">
    <thead nz-thead>
    <tr>
      <th nz-th><span>{{'num' | translate}}</span></th>
      <th nz-th><span>{{'companyName' | translate}}</span></th>
      <th nz-th><span>{{'companyAlias' | translate}}</span></th>
      <th nz-th><span>{{'province' | translate}}</span></th>
      <th nz-th><span>{{'city' | translate}}</span></th>
      <th nz-th><span>{{'area' | translate}}</span></th>
      <th nz-th><span>{{'address' | translate}}</span></th>
      <th nz-th><span>{{'manager' | translate}}</span></th>
      <th nz-th><span>{{'phone' | 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>{{i + 1}}</td>
      <td nz-td>{{one.companyName}}</td>
      <td nz-td>{{one.companyAlias}}</td>
      <td nz-td>{{one.province}}</td>
      <td nz-td>{{one.city}}</td>
      <td nz-td>{{one.area}}</td>
      <td nz-td>{{one.address}}</td>
      <td nz-td>{{one.manager}}</td>
      <td nz-td>{{one.phone}}</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>
</div>

<nz-modal [(nzVisible)]="isAddConV" [nzTitle]="isUpdate ? ('updateCompany' | translate) : ('addCompany' | translate)"
          [nzContent]="con1" nzWidth="500"
          [nzFooter]="foot1" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con1>
    <app-search-item isMust="true" inModal="true" [label]="'companyName' | translate"
                     [(value)]="req.companyName"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'companyAlias' | translate"
                     [(value)]="req.companyAlias"></app-search-item>
    <app-search-select *ngIf="!isUpdate" isMust="true" inModal="true" [label]="'maxRole' | translate"
                       [(value)]="req.roleNo" optV="roleNo" optL="roleName"
                       [data]="roles"></app-search-select>
    <app-search-select isMust="true" (valueChange)="getCitys($event, '')" inModal="true" [label]="'province' | translate"
                       [(value)]="req.province" [data]="procs" optL="province" optV="province"></app-search-select>
    <app-search-select isMust="true" (valueChange)="getAreas($event, '')" inModal="true" [label]="'city' | translate"
                       [(value)]="req.city" [data]="citys" optL="city" optV="city"></app-search-select>
    <app-search-select isMust="true" inModal="true" [label]="'area' | translate"
                     [(value)]="req.area" [data]="areas" optV="area" optL="area"></app-search-select>
    <app-search-item isMust="true" inModal="true" [label]="'address' | translate"
                     [(value)]="req.address"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'manager' | translate"
                     [(value)]="req.manager"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'phone' | translate"
                     [(value)]="req.phone"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'logo' | translate"
                     [(value)]="req.logo"></app-search-item>
    <app-search-item inModal="true" [label]="'remark' | translate"
                     [(value)]="req.remark"></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()">
      <span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
