<div class="scrollContainer">
  <div class="scrollContent">
    <div class="issueContainer">
      <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>
