<!-- 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" *ngIf="userType == 0">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">公司</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select nzShowSearch nzAllowClear formControlName="companyId" (ngModelChange)="agentChange($event)">
                <nz-option *ngFor="let data of agentDataArray" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">代理商</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select nzShowSearch nzAllowClear formControlName="agentId" (ngModelChange)="agentChange($event)">
                <nz-option *ngFor="let data of agentDataArray" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1 || userType == 2">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">业务员</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>
        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1 || userType == 2 || userType == 3">
          <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="userType == 0 || userType == 1 || userType == 2 || userType == 3 || userType == 4">
          <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 nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">序列号</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <input nz-input formControlName="serialNumber" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8" *ngIf="userType == 0">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">是否分配公司</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select formControlName="isAssignCompany" >
                <nz-option nzValue="true" nzLabel="是"></nz-option>
                <nz-option nzValue="false" nzLabel="否"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">是否分配代理商</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select formControlName="isAssignAgent" >
                <nz-option nzValue="true" nzLabel="是"></nz-option>
                <nz-option nzValue="false" nzLabel="否"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1 || userType == 2">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">是否分配业务员</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select formControlName="isAssignSalesman" >
                <nz-option nzValue="true" nzLabel="是"></nz-option>
                <nz-option nzValue="false" nzLabel="否"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8" *ngIf="userType == 0 || userType == 1 || userType == 2 || userType == 3">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">是否分配门店</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select formControlName="isAssignStore" >
                <nz-option nzValue="true" nzLabel="是"></nz-option>
                <nz-option nzValue="false" nzLabel="否"></nz-option>
              </nz-select>
            </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>
        </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_QRCODE_GENERATE" (click)="showGeneratePayQrCodeModal()"><i nz-icon nzType="qrcode" nzTheme="outline"></i>生成二维码</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_QRCODE_COMPANY" (click)="showAllocationCompanyModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配公司</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_QRCODE_AGENT" (click)="showAllocationAgentModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配代理商</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="BTN_QRCODE_SALESMAN" (click)="showAllocationSalesmanModal()"><i nz-icon nzType="plus" nzTheme="outline"></i>分配业务员</button>
      <button nz-button nzType="primary" class="right-btn" *ngIf="userType == 0 || userType == 1" (click)="exportQrCode()">导出二维码</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="50px" [(nzChecked)]="allChecked" [nzShowCheckbox]="true" (nzCheckedChange)="onAllChecked($event)"></th>
        <th nzWidth="120px">序列号</th>
        <th nzWidth="150px">二维码</th>
        <th nzWidth="150px" *ngIf="userType == 0">公司</th>
        <th nzWidth="150px">代理商</th>
        <th nzWidth="150px">业务员</th>
        <th nzWidth="180px">商户</th>
        <th nzWidth="150px">门店</th>
        <th nzWidth="180px">绑定门店时间</th>
        <th nzWidth="100px">状态</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"
          [nzDisabled]="data.disabled"
          (nzCheckedChange)="checkedChange(data, $event)"
        ></td>
        <td>{{data.serialNumber}}</td>
        <td>
          <img style="width: 100px; height: 100px;" src="{{data.qrCodeUrl}}">
        </td>
        <td *ngIf="userType == 0">{{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>
                    <span *ngIf="data.storeBindTime != null">
                        {{data.storeBindTime | date : 'yyyy-MM-dd HH:mm:ss'}}
                    </span>
          <span *ngIf="data.storeBindTime == null">未绑定</span>
        </td>
        <td>{{data.status | deviceStatus}}</td>
        <td>{{data.createTime | date : 'yyyy-MM-dd HH:mm:ss'}}</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_QRCODE_STORE_UNBIND && data.storeId != null" (click)="showUnbindStore(data.id)"  nz-menu-item>门店解绑</li>
              <li *ngIf="BTN_QRCODE_DISABLED && data.status == 1" (click)="showDisabledConfirm(data)"  nz-menu-item>停用</li>
              <li *ngIf="BTN_QRCODE_ENABLE && data.status == 2" (click)="showEnableConfirm(data)"  nz-menu-item>启用</li>
              <li *ngIf="!BTN_QRCODE_STORE_UNBIND || !BTN_QRCODE_DISABLED || !BTN_QRCODE_ENABLE" nz-menu-item nzDisabled>暂无操作</li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-spin>

<nz-modal [(nzVisible)]="generatePayQrCodeModal" nzTitle="生成二维码【单次生成，最高限制1000张二维码】" (nzOnCancel)="closeGeneratePayQrCodeModal()" nzWidth="500px" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="generatePayQrCodeForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">
          生成数量
        </nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-input-number formControlName="generateNum" style="width: 100%;" [nzMin]="1" [nzMax]="1000" [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <div style="text-align: center;">
        <button nz-button nzType="primary" style="width: 150px;" (click)="submitGeneratePayQrCode()">确定</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>
