<div class="weui-panel">
  <div class="weui-panel__hd header">
    <!--头部经纪人信息START-->
    <div class="avatar">
      <img
        src="{{lifeCustomerInfo?.practitionerBasicInfo?.headImagePath ? lifeCustomerInfo?.practitionerBasicInfo?.headImagePath : './assets/images/icons/meng.png'}}"
        alt="头像">
    </div>
    <div class="brokerInfo">
      <div class="brokerName">
        <div style="letter-spacing: 2px"><span>{{lifeCustomerInfo?.practitionerBasicInfo?.name}}</span></div>
        <div style="color: #fff;font-weight: normal;color: #fff;font-weight: normal;position: relative;top: -5px;"
          (click)="getOut()">
          <i class="iconfont icon-tuichu" style="font-size: 12px;"></i>
          <span style="margin-left: 5px;font-size: 12px;">退出</span>
        </div>
        <!-- <div class="shareSelfInfoBtn" *ngIf="deviceType=='3'" (click)="shareIdCard()"><span>分享名片</span></div> -->
      </div>

      <div class="brokerTag">
        <div>
          <p>{{lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName ?
            lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName : '银盾保险'}}</p>
        </div>
        <div><span class="ydTitle">{{lifeCustomerInfo?.practitionerBasicInfo?.levelName}}</span></div>
      </div>
    </div>
    <!--头部经纪人信息END-->
  </div>

  <div class="weui-panel__bd">

    <div class="performance_wrapper">
      <!-- <img class="bg" src="assets/images/sales__bg.png" > -->

      <div class="content">
        <span class="detail" (click)="jumpToDetail()">明细<i class="iconfont icon-ar-r"
            style="font-size:12px;"></i></span>
        <ul class="tab">
          <li *ngFor="let item of performanceList" (click)="selectRang(item.type)"
            [ngClass]="{selected:performanceSelectedFlag==item.type}">
            <div style="position: relative;">
              <h3>{{item.name}}
                <i class="line" *ngIf="performanceSelectedFlag==item.type" [ngStyle]="{'left':leftWidth}"></i>
              </h3>
            </div>
          </li>
        </ul>
        <ul class="performance_list title">
          <li></li>
          <li>FYP</li>
          <li>FYC</li>
          <li>完成率</li>
          <li>排名</li>
        </ul>
        <ul class="performance_list">
          <li>线上</li>
          <li class="markPrice" style="margin-left: 7px;">
            ￥{{performanceInfo?.onlineInfo['fyp'] | number: "1.2-2"}}
          </li>
          <li class="markPrice">
            ￥{{performanceInfo?.onlineInfo['fyc'] | number: "1.2-2"}}
          </li>
        </ul>
        <ul class="performance_list">
          <li>线下</li>

        </ul>
      </div>

    </div>
    <div class="performance_wrapper notice">
      <div style="position: relative;">
        <h3 style="font-size: 16px;color: #ff002a;">公告</h3><i class="iconfont" style="color: #ff002a;">&#xe645;</i>
        <div #hide style="font-size: 14px;position: absolute;z-index:-100" [innerHtml]="firstAnnouncement"></div>
        <div>{{this.firstAnnouncementTitle}}</div>
        <span style="position:absolute;right:5px;font-size: 12px;color:#408dc9;"
          routerLink="importantAnnouncement">更多</span>
      </div>
    </div>
    <div class="tool_wrapper">
      <div class="tool_item" *ngFor="let menuItem of menuLists;">
        <h3>{{menuItem.title}}</h3>
        <div class="tool_content">
          <div class="content_item" *ngFor="let menuItemContent of menuItem['content']" href="javascript:;"
            (click)="menuNavigation(menuItemContent)">
            <span class="iconfont" [ngClass]="menuItemContent.icon"></span>
            <div style="font-size: 12px;">{{menuItemContent.subtitle}}</div>
          </div>
        </div>
      </div>
    </div>
    <hr style="border-top: 1px solid #ddd;border-left: none;border-right: none;border-bottom: none;" />
    <div class="hotProduct">
      <div style="margin-bottom: 10px;">
        <h3>热销产品</h3>
      </div>
      <div class="media borderBottom" *ngFor="let product of products,let i = index" (click)="goProductDetail(product)"
        [ngClass]="{'pad15':!isShowShare}">
        <div class="media-left media-middle">
          <img class="media-object" src="{{product.iconPath}}" alt="{{product.planName}}">
          <div class="yd_logo">
            <img src="assets/images/yd-online_logo.png" alt="上海银盾保险经纪有限公司">
          </div>
        </div>
        <div class="media-body">
          <div class="media-heading">
            <h4>{{product.planName}}</h4>
            <div class="companylogo">
              <span class="logoBox"><img src="{{product.companyLogoPath}}" alt="{{product.companyName}}"
                  class="img-responsive"></span>
            </div>
          </div>
          <div class="summaryBox">
            <div class="summaryContent" *ngFor="let label of product.labels">
              <div class="summaryIcon"><i class="iconfont icon-gou"></i></div>
              <div class="summaryLabel">{{label}}</div>
            </div>
          </div>
          <div class="priceContainer">
            <div style="width: 75%;display: flex;justify-content:space-between;align-items: flex-end">
              <span class="price" *ngIf="product.productCategoryId!='4'"><strong>￥{{product.price}}</strong><small
                  style="font-size:12px;font-weight: normal;margin-left: 2px;">起</small><span
                  style="margin-left: 5px;white-space: nowrap">1人{{product.dayCount>=365 ? '1年' : product.dayCount + '天'}}</span></span>
              <span class="price" *ngIf="product.productCategoryId=='4'"><strong>￥{{product.price}}</strong><small
                  style="font-size:12px;font-weight: normal;margin-left: 2px;">/年 起</small></span>
              <span style="color:#4a4a4a;font-weight:lighter;white-space: nowrap">{{product.feedbackCount}}条评价</span>
            </div>
            <div><span style="font-size: 16px;padding-right: 18px;color:#4a4a4a" class="iconfont icon-ar-r"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr style="border-top: 1px solid #ddd;border-left: none;border-right: none;border-bottom: none;" />
    <div class="health_wrapper">
      <h3>医疗服务</h3>
      <img style="border-radius: 10px;width: 48%;margin-right: 10px;" src="assets/images/yindunvipmember.jpg"
        (click)="jumpUrl()">
      <!-- <img style="border-radius: 10px;width: 48%;" src="assets/images/yindunvipmember.jpg" (click)="jumpUrl()"> -->

    </div>


  </div>

  <div class="footer" style="font-size: 12px;padding-top: 10px;text-align: center;background: #f6f7f2;">
    <p>上海银盾保险经纪有限公司</p>
    <p>保险业务经营许可证：269615000000800</p>
    <p>版权所有©2020银盾保险在线 &nbsp;沪ICP备18000565号</p>
  </div>
</div>

<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>