<div class="scrollContainer">
  <div class="scrollContent">
    <div class="issueContainer">
      <div class="top">
        <SearchBar [(ngModel)]="queryName"
        [showCancelButton]="false"
        [placeholder]="'热销产品'"
        [cancelText]="'取消'"
        [showCancelButton]="true"
        (onSubmit)="queryProductBox()"
        (onClear)="clear(queryName)"
        (onCancel)="queryName='';queryProductBox()"
        class="indexSearchBar"
      ></SearchBar>
      </div>
      <div class="bottom">
        <ul class="left">
          <li (click)="switchCategory(1,null)" [ngClass]="{'actived':leftSelectedId===null}">全部</li>
          <li *ngFor="let leftItem of leftList" (click)="switchCategory(1,leftItem)"
              [ngClass]="{'actived':leftSelectedId===leftItem.id}">{{leftItem.tagName}}
          </li>
        </ul>
        <div class="right">
          <ul class="right_header">
            <li *ngFor="let topItem of topList" (click)="allFilter(2,topItem)">
              {{topItem.tagName}}
              <span class="iconfont icon-xiangxia"></span>
            </li>
            <li (click)="allFilter(1)">筛选 <img src="assets/images/product_select.png" alt="筛选" style="width: 16px;height:16px;"></li>
          </ul>
          <div class="mask" *ngIf="filterSelectedFlag" (click)="filterSelectedFlag=false"></div>
          <div class="select_all slowRight" *ngIf="filterSelectedFlag">
            <ul>
              <li *ngFor="let rightItem of rightList">
                <h5>
                  <span>{{rightItem.tagName}}</span>
                  <div *ngIf="rightItem.tagViewQueryInfos && rightItem.tagViewQueryInfos.length>6"
                    (click)="showAll(rightItem)" style="font-size: 12px;"
                    >
                    <span>更多</span>
                    <span class="iconfont icon-xiangxia" style="font-size: 12px;display: inline-block;"
                    [ngStyle]="{'transform': rightItem.showAll? 'rotate(180deg)' : 'rotate(0)'}"
                    ></span>
                  </div>
                  
                </h5>
                <div class="optionLists" *ngIf="rightItem.showAll && rightItem.tagViewQueryInfos">
                  <div *ngFor="let optItem of rightItem.tagViewQueryInfos"
                  (click)="switchCategory(2,optItem)" [ngClass]="{selected:optItem.selected == true}"
                  >{{optItem.tagName}}</div>
                </div>
                <div class="optionLists" *ngIf="!rightItem.showAll && rightItem.tagViewQueryInfos">
                  <div *ngFor="let optItem of rightItem.tagViewQueryInfos.slice(0,6)"
                  (click)="switchCategory(2,optItem)" [ngClass]="{selected:optItem.selected == true}"
                  >{{optItem.tagName}}</div>
                </div>
              </li>
            </ul>
            <div class="foot_btn">
              <div (click)="restart()">重置</div>
              <div (click)="confirm()">确定</div>
            </div>
          </div>
          
          <ul class="productLists">
            <li *ngFor="let productInfoItem of productInfos">
              <div class="productInfoContent" >
                <h3 (click)="goData(productInfoItem)">
                  <span>{{productInfoItem.productName}}</span>
                  <div class="dataContent">
                    <div>资料</div>
                  </div>
                </h3>
                <div (click)="goProductDetail(productInfoItem)">
                  <div class="featureContent" *ngIf="productInfoItem['labels']">
                    <div *ngFor="let labelItem of productInfoItem['labels']">
                      {{labelItem}}
                    </div>
                  </div>
                  <div class="insuranceRulesContent" *ngIf="productInfoItem['adaptionInfos']">
                    <div *ngFor="let adaptionItem of productInfoItem['adaptionInfos']" style="display: flex;">
                    <span>{{adaptionItem.name}}：</span>
                    <span [innerHtml]="adaptionItem.value"></span> 
                    </div>
                  </div>
                  <div class="priceContent">
                    <div>
                      <span style="color: #F16A5D;">￥</span><strong>{{productInfoItem.price | number:'1.0-0'}}</strong><span>元起 | 每人每年</span>
                    </div>
                    <span class="iconfont icon-ar-r" style="font-size: 15px;"></span>
                  </div>
                  <div class="tagsContent" *ngIf="productInfoItem['tags'] && !productInfoItem.showAll">
                    <div *ngFor="let tagItem of productInfoItem['tags'].slice(0,6)">
                      {{tagItem}}
                    </div>
                  </div>
                  <div class="tagsContent" *ngIf="productInfoItem['tags'] && productInfoItem.showAll">
                    <div *ngFor="let tagItem of productInfoItem['tags']">
                      {{tagItem}}
                    </div>
                  </div>
                </div>
                <div (click)="showAll(productInfoItem)" style="text-align: center;margin-left: -30px;" *ngIf="productInfoItem['tags'] && productInfoItem['tags'].length>6">
                  更多<span class="iconfont icon-xiangxia" style="font-size: 12px;display: inline-block;"
                  [ngStyle]="{'transform': productInfoItem.showAll? 'rotate(180deg)' : 'rotate(0)'}"
                  ></span>
                </div>
              </div>
              <!-- <div class="dataContent">
                <div (click)="goData(productInfoItem)">资料</div>
              </div> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
