<div class="select-component" (mouseleave)="mouseHide?showStatus=false:''" (click)="showStatus=true">
  <div class="select" [ngStyle]="{'width':firstWidth? firstWidth-10+'px' : '350px'}">
    {{firstSelectedShowName}}
    {{secondSelectedShowName?('/ '+secondSelectedShowName):''}}
    {{thirdSelectedShowName?('/ '+thirdSelectedShowName):''}}
  </div>
  <div class="select-box" *ngIf="showStatus" [ngStyle]="{'width':firstWidth? firstWidth+'px' : '370px'}">
    <div class="data-list"
         [ngStyle]="{'width':firstWidth? firstWidth+'px' : '120px'}">
      <span *ngFor="let first of data" (click)="selected(1,first)"
            [ngClass]="{'selected':firstValue==first[firstLabel]}">{{first[firstName]}}</span>
    </div>
    <div class="data-list" *ngIf="secondList && secondList.length">
    <span *ngFor="let second of secondList" (click)="selected(2,second)"
          [ngClass]="{'selected':secondValue==second[secondLabel]}">{{second[secondName]}}</span>
    </div>
    <div class="data-list" *ngIf="thirdList && thirdList.length">
    <span *ngFor="let third of thirdList" (click)="selected(3,third)"
          [ngClass]="{'selected':thirdValue==third[thirdLabel]}">{{third[thirdName]}}</span>
    </div>
  </div>
</div>
