<div class="quiltWashingTrendAnalysis">
  <div class="main">
    <div class="head">
      <div class="search">
        <div class="searchItem">
          <nz-radio-group [(ngModel)]="searchDto.dateType" (ngModelChange)="changeDateType($event)">
            <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
          </nz-radio-group>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='day'">
          <span class="label">发起时间：</span>
          <nz-date-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-date-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='month'">
          <span class="label">发起时间：</span>
          <nz-month-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-month-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='year'">
          <span class="label">发起时间：</span>
          <nz-year-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-year-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='quarter'">
          <span class="label">发起时间：</span>
          <nz-select [(ngModel)]="searchDto.year">
            <nz-option [nzLabel]="item.name" [nzValue]="item.value" *ngFor="let item of yearList"></nz-option>
          </nz-select>
          <nz-select class="ml8" [(ngModel)]="searchDto.quarter">
            <nz-option [nzLabel]="item.name" [nzValue]="item.value" *ngFor="let item of quarterList"></nz-option>
          </nz-select>
        </div>
      </div>
      <div class="btns">
        <button nz-button nzType="primary" (click)='search()'>搜索</button>
        <button nz-button class="ml8" (click)='reset()'>重置</button>
      </div>
    </div>
    <div class="body">
      <div class="body_tabs_wrap">
        <div class="body_tabs">
          <ng-container *ngFor="let tabType of tabTypes">
            <div class="tab" [ngClass]="{active: searchDto.tabType == tabType.value}" *ngIf="!(searchDto.dateType == 'year' && tabType.value == 'MoM')" (click)="changeTabType(tabType.value)">{{tabType.name}}</div>
          </ng-container>
        </div>
        <div class="compareDate">对比期：{{headerDate.compareDate}}</div>
      </div>

      <div class="total">
        <div class="total_list">
          <div class="total_item">
            <span class="name">{{headerData.totalIntoWeight}}</span>
            <span class="value">产生医废重量(kg)</span>
          </div>
          <div class="total_item">
            <span class="name">{{headerData.compareTotalIntoWeight}}</span>
            <span class="value">对比期重量(kg)</span>
          </div>
          <div class="total_item" [ngClass]="{green: headerData.intoWeightRate >= 0, red: headerData.intoWeightRate < 0}">
            <span class="name">{{headerData.intoWeightRate}}%</span>
            <span class="value">差异率</span>
          </div>
        </div>
        <div class="total_list">
          <div class="total_item">
            <span class="name">{{headerData.totalOutWeight}}</span>
            <span class="value">出库总重量(kg)</span>
          </div>
          <div class="total_item">
            <span class="name">{{headerData.compareTotalOutWeight}}</span>
            <span class="value">对比期总重量(kg)</span>
          </div>
          <div class="total_item" [ngClass]="{green: headerData.outWeightRate >= 0, red: headerData.outWeightRate < 0}">
            <span class="name">{{headerData.outWeightRate}}%</span>
            <span class="value">差异率</span>
          </div>
        </div>
      </div>

      <div class="boxwrap">
        <div class="box">
          <div class="box-head">本期科室重量TOP10</div>
          <nz-table class="table" [nzData]="deptListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">本期重量(kg)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of deptListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.weight}}</td>
                <td>{{data.weightRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>

        <div class="box">
          <div class="box-head">对比期科室重量TOP10</div>
          <nz-table class="table" [nzData]="deptCompareListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">对比期重量(kg)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of deptCompareListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.weight}}</td>
                <td>{{data.weightRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>

      <div class="echarts">
        <div class="echart-head">科室重量差异率TOP10</div>
        <div echarts class="echart" [options]='deptWeightOption'></div>
      </div>

      <div class="boxwrap">
        <div class="box">
          <div class="box-head">本期医废类型产生重量排名</div>
          <nz-table class="table" [nzData]="wasteTypeListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">医废类型</th>
                <th nzWidth="30%">本期重量(kg)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of wasteTypeListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.clinicalWasteTypeName}}</td>
                <td>{{data.weight}}</td>
                <td>{{data.weightRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>

        <div class="box">
          <div class="box-head">对比期医废类型产生重量排名</div>
          <nz-table class="table" [nzData]="wasteTypeCompareListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">医废类型</th>
                <th nzWidth="30%">对比期重量(kg)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of wasteTypeCompareListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.clinicalWasteTypeName}}</td>
                <td>{{data.weight}}</td>
                <td>{{data.weightRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>

      <div class="echarts">
        <div class="echart-head">医废类型重量差异率排名</div>
        <div echarts class="echart" [options]='typeWeightOption'></div>
      </div>
    </div>
  </div>
</div>
