<div class="salesWrapper">
  <ul class="tab">
    <li class="selected" *ngFor="let tabItem of tabList" (click)="selectTab(tabItem.id)"
    [ngClass]="{selected:selectedId === tabItem.id}"
    >
      <div style="position: relative;">
        <h3>{{tabItem.name}}</h3>
      </div>
    </li>
  </ul>
  <div class="salesContent" *ngIf="selectedId == 0">
    <div class="salesItem" *ngFor="let payScaleItem of payScaleInfos" (click)="enterDetail(payScaleItem.years,payScaleItem.month,payScaleItem.loginName,payScaleItem.isBasic)">
      <div class="icon_bolck"><span class="iconfont icon-xinzidan"></span></div>
      <div style="padding-left: 45px;padding-right: 20px;">
        <div class="line">
          <span>薪资日期</span>
          <div>{{payScaleItem.years}}年{{payScaleItem.month}}月</div>
        </div>
        <div class="line">
          <span>本期实发佣金</span>
          <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div>
        </div>
      </div>
      <div class="iconfont icon-ar-r" 
      style="width: 20px;height: 20px;position: absolute;right: 2px;top: 23px;"></div>
    </div>
    <div style="text-align: center;margin-top: 20px;" *ngIf="payScaleInfos?.length<=0">暂无数据</div>
  </div>

  <div id="salesContent" *ngIf="selectedId == 2">
    <div *ngIf="nowYear>2021">
      <div class="salesItem" *ngFor="let historyPartItem of historyPart2" (click)="enterDetail(historyPartItem.years,historyPartItem.month,historyPartItem.loginName,historyPartItem.isBasic)">
        <div class="icon_bolck" style="top: 16px;"><span class="iconfont icon-xinzidan"></span></div>
        <div style="padding-right: 20px;">
          <div class="line">
            <span>薪资日期</span>
            <div>{{historyPartItem.years}}年{{historyPartItem.month}}月</div>
          </div>
          <div class="line">
            <span>本期实发佣金</span>
            <div class="price">￥{{historyPartItem.monDtlRAmount | number: "1.2-2"}}</div>
          </div>
        </div>
        <div class="iconfont icon-ar-r" 
        style="width: 20px;height: 20px;position: absolute;right: 2px;top: 23px;"></div>
      </div>
    </div>
    <div class="salesItem" *ngFor="let payScaleItem of historyPart1"  (click)="getPdf(payScaleItem.monShId,payScaleItem.pdfOssPath)">
      <div class="icon_bolck"><span class="iconfont icon-xinzidan"></span></div>
      <div class="line">
        <div>薪资日期</div>
        <div>{{payScaleItem.years}}年{{payScaleItem.month}}月</div>
      </div>
      <div class="line">
        <span>应发佣金</span>
        <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlAmount | number: "1.2-2"}}</div>
        <div  *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
      </div>
      <div class="line">
        <span>扣除税</span>
        <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{(payScaleItem.monDtlAmount-payScaleItem.monDtlRAmount) | number: "1.2-2"}}</div>
        <div class="price" *ngIf="payScaleItem.pdfOssPath">-</div>
      </div>
      <div class="line">
        <span>实发佣金</span>
        <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div>
        <div  *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
      </div>
      <div class="line">
        <div></div>
        <div>
          薪资单明细
          <span class="iconfont icon-xiazai" style="color:#ff3500;margin-left: 5px;"></span>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: 20px;" *ngIf="(historyPart2?.length<=0) && (historyPart1?.length<=0)">暂无数据</div>
  </div>

</div>

<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>