<div class="integrationDetailContainer">
  <ul class="tabs">
    <li (click)="queryLists(1)"><span [ngClass]="{'actived':status===1}">全部</span></li>
    <li (click)="queryLists(2)"><span [ngClass]="{'actived':status===2}">积分</span></li>
    <li (click)="queryLists(3)"><span [ngClass]="{'actived':status===3}">兑换</span></li>
  </ul>
  <ul class="dateContent">
   
    <li>
      <ListItem  DatePicker [mode]="'month'"  [(ngModel)]="searchDateFormat" (onOk)="onOk($event)">
        {{searchDateFormat | date:'yyyy-MM'}} <i class="iconfont icon-xiangxia" style="margin-left: 10px;"></i>
      </ListItem>

      <span> - </span>

      <ListItem  DatePicker [mode]="'month'"  [(ngModel)]="searchDateEndFormat" (onOk)="onOk($event)">
        {{searchDateEndFormat | date:'yyyy-MM'}} <i class="iconfont icon-xiangxia" style="margin-left: 10px;"></i>
      </ListItem>
    </li>
  </ul>
  <ul class="detailLists">
    <li *ngFor="let item of lists">
      <div [ngStyle]="{'color':item.status==1 ? '#646464' : '#ccc'}">
        <p>{{item.integralRuleName}}</p>
        <p [ngStyle]="{'color':item.status==1 ? '#8c8c8c' : '#ccc'}">{{item.grantDate}}</p>
      </div>
      <div [ngStyle]="{'color':item.integralType=='1' ? '#E56124' : '#333','font-weight':'bold'}" *ngIf="item.status==1"><span>{{item.integralType=='1' ? '+' : ''}}</span><span>{{item.integralNumber}}</span></div>
      <div [ngStyle]="{'color':'#ccc','font-weight':'bold'}" *ngIf="item.status!=1"><span>{{item.integralType=='1' ? '+' : ''}}</span><span>{{item.integralNumber}}</span></div>
    </li>
  </ul>
</div>
