<div class="weui-panel">
  <div class="weui-panel__hd header">
    <!--头部经纪人信息START-->
    <div class="avatar" routerLink="setting">
      <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>
        <span i class="iconfont icon-ar-r" style="font-size:18px;" routerLink="setting"></span>
      </div>

      <div class="brokerTag">
        <div>
          <p>{{lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName ?
            lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName : '银盾保险'}}</p>
        </div>
        <div>·</div>
        <div>{{lifeCustomerInfo?.practitionerBasicInfo?.subordinateName}}</div>
        <div>·</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)="rank(item.time,1,2);rank(item.time,2,2)"
            [ngClass]="{selected:performanceSelectedFlag==item.time}">
            <div style="position: relative;">
              <h3>{{item.name}}
                <i class="line" *ngIf="performanceSelectedFlag==item.time" [ngStyle]="{'left':leftWidth}"></i>
              </h3>
            </div>
          </li>
        </ul>
        <div>
          <ul class="performance_list title">
            <li></li>
            <li>首年保费
              <!-- <span class="iconfont icon-xiangxia" style="font-size: 10px;margin-left: 3px;"></span> -->
            </li>
            <li>首年佣金</li>
            <li>件数</li>
            <li>完成率</li>
          </ul>
          <ul class="performance_list">
            <li>线上</li>
            <li class="markPrice" style="margin:0 7px;">
              ￥{{onlineInfo?.fyp | number: "1.0-0"}}
            </li>
            <li class="markPrice">
              ￥{{onlineInfo?.fyc | number: "1.0-0"}}
            </li>
            <li class="markPrice">{{onlineInfo?.count?onlineInfo.count:'-'}}</li>
            <li class="markPrice">
              {{onlineInfo?.completionRate?onlineInfo.completionRate + '%':'-'}}
            </li>
          </ul>
          <ul class="performance_list">
            <li>线下</li>
            <li class="markPrice" style="margin:0 7px;">
              ￥{{offlineInfo?.fyp | number: "1.0-0"}}
            </li>
            <li class="markPrice">
              ￥{{offlineInfo?.fyc | number: "1.0-0"}}
            </li>
            <li class="markPrice">{{offlineInfo?.count?offlineInfo.count:'-'}}</li>
            <li class="markPrice">
              {{offlineInfo?.completionRate?offlineInfo.completionRate + '%':'-'}}
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div class="performance_wrapper">
      <div class="content">
        <div class="activities_grade">
          <span>销售活动量分值</span>
          <span class="iconfont icon-ar-r" routerLink="scoreDeatil"></span>
        </div>
        <ul class="activities">
          <li>今天</li>
          <li>本周</li>
          <li>本月</li>
          <li>本周达成率</li>
          <li>本月达成率</li>
          <li>本周新增商机</li>
        </ul>
        <ul class="activities">
          <li class="markPrice">{{this.activities_grade?.scoreDay}}</li>
          <li class="markPrice">{{this.activities_grade?.scoreWeek}}</li>
          <li class="markPrice">{{this.activities_grade?.scoreMonth}}</li>
          <li class="markPrice">
            {{this.activities_grade?.achievementRateWeek!=null  ? lifeCommonService.toPercent(this.activities_grade?.achievementRateWeek) :'-'}}
          </li>
          <li class="markPrice">
            {{this.activities_grade?.achievementRateMonth!=null ? lifeCommonService.toPercent(this.activities_grade?.achievementRateMonth)  :'-'}}
          </li>
          <li class="markPrice">{{this.activities_grade?.addOpportunityNum}}</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" *ngFor="let menuItem of menuLists;">
      <div class="tool_item" *ngIf="menuItem.isShow">
        <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: 13px;">{{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 class="health_wrapper" style="padding: 12px 10px 12px 10px;">
      <h3 style="margin-bottom: 0;">我的设置
        <span i class="iconfont icon-ar-r" style="font-size:18px;float: right;" routerLink="setting"></span>
      </h3>
    </div>
    <div class="health_wrapper" style="padding: 12px 10px 12px 10px;">
      <h3 style="margin-bottom: 0;">我的消息
        <span i class="iconfont icon-ar-r" style="font-size:18px;float: right;" routerLink="news"></span></h3>
    </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>