<!-- start 面包屑 -->
<app-breadcrumb></app-breadcrumb>
<!-- end 面包屑 -->
<!--条件搜索-->

<nz-spin [nzSpinning]="loadingObject.spinning" nzTip="{{loadingObject.msg}}">
  <div class="inner-content">
    <form nz-form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)">
      <div nz-row>
        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">设备类型</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select nzAllowClear formControlName="deviceType">
                <nz-option *ngFor="let item of deviceTypeArray" nzLabel="{{item.codeName}}" nzValue="{{item.codeValue}}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">设备编号</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="deviceNo" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">设备状态</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select nzAllowClear formControlName="status">
                <nz-option nzLabel="正常" nzValue="1"></nz-option>
                <nz-option nzLabel="停用" nzValue="2"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row *ngIf="isCollapse">
        <div nz-col nzSpan="8" *ngIf="roleType == 1">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">公司</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="companyName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="roleType == 1 || roleType == 6">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">代理商</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="agentName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="roleType == 1 || roleType == 2 || roleType == 6">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">业务员</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="salesmanName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="roleType == 1 || roleType == 2 || roleType == 3 || roleType == 6">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">商户</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="merName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="roleType == 1 || roleType == 2 || roleType == 3 || roleType == 4 || roleType == 6">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">门店</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="storeName" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row>
        <div nz-col nzSpan="24" class="search-button">
          <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>搜索</button>
          <button nz-button nzType="default" (click)="resetForm()"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
          <a class="collapse" (click)="toggleCollapse()">更多条件
            <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
          </a>
        </div>
      </div>
    </form>
  </div>

  <div class="inner-content">
    <span>共计 {{dataObject.total?dataObject.total:0}} 条数据</span>
    <div class="operating-button">
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_COMPANY_ALLOCATION" (click)="showAllocationCompanyModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配公司</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_AGENT_ALLOCATION" (click)="showAllocationAgentModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配代理商</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_SALESMAN_ALLOCATION" (click)="showAllocationSalesmanModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配业务员</button>
      <button *ngIf="BTN_DOWN_DEVICE" nz-button nzType="primary" class="right-btn" (click)="downloadDeviceTemplate()"><i nz-icon nzType="download" nzTheme="outline"></i>下载导入模板</button>
      <button *ngIf="BTN_IMPORT_DEVICE" nz-button nzType="primary" class="right-btn" (click)="showImportDevice()"><i nz-icon nzType="upload" nzTheme="outline"></i>导入设备</button>
    </div>

    <!--数组表格 -->
    <nz-table #basicTable
              [nzData]="dataObject.list"
              [nzTotal]="dataObject.total"
              [nzFrontPagination]="false"
              [nzLoading]="tableLoading"
              [nzPageIndex]="whereObject.pageNum"
              (nzPageIndexChange)="requestData($event)"
              [nzScroll]="{ x: '1150px'}">
      <thead>
      <tr>
        <th nzWidth="100px" [nzShowCheckbox]="false"></th>
        <th nzWidth="130px">设备类型</th>
        <th nzWidth="190px">设备编号</th>
        <th nzWidth="150px">公司</th>
        <th nzWidth="150px">代理商</th>
        <th nzWidth="150px">业务员</th>
        <th nzWidth="180px">商户</th>
        <th nzWidth="180px">门店</th>
        <th nzWidth="100px">设备状态</th>
        <th nzWidth="160px">创建时间</th>
        <th nzWidth="160px">创建人</th>
        <th nzWidth="120px" nzRight="0px">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data;let i = index">
        <td
          [nzShowCheckbox]="true"
          [nzChecked]="data.checked"
          (nzCheckedChange)="checkedChange(data, $event)"
        ></td>
        <td>{{data.deviceType | deviceType}}</td>
        <td>{{data.deviceNo}}</td>
        <td>{{data.companyName?data.companyName:'未分配'}}</td>
        <td>{{data.agentName?data.agentName:'未分配'}}</td>
        <td>{{data.salesmanName?data.salesmanName:'未分配'}}</td>
        <td>{{data.merName?data.merName:'未分配'}}</td>
        <td>{{data.storeName?data.storeName:'未分配'}}</td>
        <td>{{data.status | deviceStatus}}</td>
        <td>{{data.createTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{data.opUserName}}</td>
        <td nzRight="0px" class="table-td-operation">
          <a nz-dropdown [nzDropdownMenu]="menu">操作列表  <i nz-icon nzType="down"></i> </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li *ngIf="BTN_STORE_UNBIND && data.storeName != null" (click)="showUnbindStore(data.id)"  nz-menu-item>门店解绑</li>
              <li *ngIf="BTN_DEVICE_DISABLE && data.status == 1" (click)="showDisable(data.id)"  nz-menu-item>停用</li>
              <li *ngIf="BTN_DEVICE_ENABLE && data.status == 2" (click)="showEnable(data.id)"  nz-menu-item>启用</li>
              <li *ngIf="BTN_DEVICE_DEL" (click)="showDeleteConfirm(data)"  nz-menu-item>删除</li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-spin>

<nz-modal [(nzVisible)]="importDeviceErrorModal" nzTitle="导入失败数据" (nzOnCancel)="handleCancel()" nzWidth="700px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <nz-table #errorStudentTable [nzData]="importDeviceErrorData">
      <thead>
      <tr>
        <th nzWidth="50px">序号</th>
        <th nzWidth="150px">设备编号</th>
        <th nzWidth="300px">原因</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of errorStudentTable.data;let i = index">
        <td>{{ i + 1}}</td>
        <td>{{data.deviceNo}}</td>
        <td>{{data.errorMessage}}</td>
      </tr>
      </tbody>
    </nz-table>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="importDeviceModal" nzTitle="导入设备" (nzOnCancel)="importDeviceModal = false" nzWidth="500px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="importDeviceForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">设备类型</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-select formControlName="deviceType">
            <nz-option *ngFor="let data of deviceTypeArray" nzLabel="{{data.codeName}}" nzValue="{{data.codeValue}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="6">文件</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-upload
            *ngIf="BTN_IMPORT_DEVICE"
            [nzAccept]="'.xls,.xlsx'"
            nzAction="{{baseUrl}}fileUpload/uploadfile"
            [nzHeaders]="{ authorization: 'authorization-text' }"
            (nzChange)="importDeviceChange($event)"
          >
            <button nz-button ><i nz-icon nzType="upload"></i>上传文件</button>
          </nz-upload>
        </nz-form-control>
      </nz-form-item>
      <div style="text-align: center;">
        <button nz-button nzType="primary" style="width: 150px;" (click)="submitImportDevice()">确定</button>
      </div>
    </form>


  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="allocationCompanyModal" nzTitle="分配公司" (nzOnCancel)="closeAllocationCompanyModal()" nzWidth="500px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="allocationCompanyForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">公司</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-select nzShowSearch nzAllowClear formControlName="companyId">
            <nz-option *ngFor="let data of companyDataArray" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <div style="text-align: center;">
        <button nz-button nzType="primary" style="width: 150px;" (click)="submitAllocationCompany()">确定</button>
      </div>
    </form>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="allocationAgentModal" nzTitle="分配代理商" (nzOnCancel)="closeAllocationAgentModal()" nzWidth="500px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="allocationAgentForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">代理商</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-select nzShowSearch nzAllowClear formControlName="agentId">
            <nz-option *ngFor="let data of agentDataArray" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <div style="text-align: center;">
        <button nz-button nzType="primary" style="width: 150px;" (click)="submitAllocationAgent()">确定</button>
      </div>
    </form>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="allocationSalesmanModal" nzTitle="分配业务员" (nzOnCancel)="closeAllocationSalesmanModal()" nzWidth="500px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="allocationSalesmanForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">业务员</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-select nzShowSearch nzAllowClear formControlName="salesmanId">
            <nz-option *ngFor="let data of salesmanDataArray" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <div style="text-align: center;">
        <button nz-button nzType="primary" style="width: 150px;" (click)="submitAllocationSalesman()">确定</button>
      </div>
    </form>
  </ng-container>
</nz-modal>
