<style lang="less" scoped>
  @import "../../assets/css/main.less";
  @import "../../assets/css/home/Saleshomepage_1920.css";

  .saleChartCont {
    width: 100%;
    height: 95%;
    box-sizing: border-box;
  }

  .personal {
    width: 100%;
    height: 100%;
  }

  .l_title {
    width: 100%;
    height: 30px
  }

  .Sale_Share {
    color: #83ACFF;
    cursor: pointer;
    font-size: 12px;
    margin-left: 10px;
  }

  .ShareDisClick {
    color: gray;
  }

  .Sale_UnlessWords {
    display: inline-block;
    margin: 25px 0 0 80px;
    color: #E95252;
  }

</style>

<template>
  <div>
    <leftNav></leftNav>
    <div class="sale_cont" v-if="CurrentUserInfo.RB_Group_id==2 || EditBtn">
      <div class="Sale_menu">
        <ul>
          <li :class="{active:type==1}" @click="type=1">个人工作台</li>
          <li :class="{active:type==2}" @click="type=2">小组战绩</li>
        </ul>
      </div>
      <div class="saleChartCont" :style="{zoom:zoom}">
        <div v-show="type==1" class="personal">
          <div class="PersonalData">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="el-col-div ownScrollbarStyle PersonalData_l">
                  <div class="l_top" style="position: relative;">
                    <img v-if="data.icon !=null && data.icon !='' " :src="data.icon" alt="" class="tx_img"
                      :onerror='defaultHeadImg'>
                    <img v-else src="../../assets/img/default_head_img.jpg" alt="" alt="" class="tx_img">
                    <div class="p_name">
                      <span>{{data.emName}}</span>
                      <span>{{data.postName}}</span>
                      <div style="padding: 5px 0 0 0;font-size: 14px;color: #333333;" v-if="rankingNum">
                        第<a style="color: #FF8C00;margin-left: 3px;margin-right: 3px;font-size: 18px;font-weight: bold;">{{rankingNum}}</a>名
                      </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                    <!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(1)"> -->
                    <div class="royalty" style="cursor: pointer;" @click="goAnticipate(1)">
                      <div class="tc">
                        <p>
                          <span>￥</span>
                          <span>{{data.totalCommission}}</span>
                        </p>
                        <p >
                          <span v-if="data.peopelBonus" style="margin-right: 10px;">人头奖励：+{{data.peopelBonus}}</span>
                          <span style="color: #BDBDBD;font-size: 13px;
                          padding: 0 0 5px 0;">{{data.periodsName}}期</span>
                        </p>
                      </div>
                      <!--                      <span>￥<p class="tc">{{data.totalCommission}}</p></span>-->
                      <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                        <span>出境提成</span>

                        <template v-if="data.comissionGeneralId>0">
                          <span v-if="data.share==1" class="Sale_Share" style="color:#333;cursor:default;">已确认</span>
                          <span v-if="data.share==0" @click="tichengDialog=true" class="Sale_Share"
                            :class="{'ShareDisClick':!isSubmit}">分享并确认</span>
                        </template>
                      </div>
                    </div>
                    <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
                    <!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(2)"> -->
                    <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(2)">
                      <div class="tc">
                        <p>
                          <span>￥</span>
                          <span>{{data.gnSaleCommission}}</span>
                        </p>
                        <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.gnPeriodsName}}期</p>
                      </div>
                      <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                        <span>国内提成</span>
                      </div>
                    </div>
                    <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
                    <!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(3)"> -->
                    <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(3)">
                      <div class="tc">
                        <p>
                          <span>￥</span>
                          <span>{{data.dxSaleCommission}}</span>
                        </p>
                        <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.dxPeriodsName}}期</p>
                      </div>
                      <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                        <span>历史单项提成</span>
                      </div>
                    </div>
                    <el-tooltip class="item" effect="dark" content="预期提成" placement="top">
                      <img src="../../assets/img/xiaosouYQ.png" @click="goAnticipate(4)"
                      style="width: 15px;height: auto; position: absolute;right: -0;top: -10px;cursor: pointer;color: #33B3FF;"></img>
                    </el-tooltip>
                    </div>
                  </div>

                  <div class="order">
                    <div class="l_title">
                      <span style="font-size: 14px;color: #333333;float: left">近十日发团订单</span>
                      <span style="font-size: 14px;color: #BABABA;float: right;cursor: pointer"
                        @click="goUrl('/groupTourOrder')">···</span>
                    </div>
                    <div class="table_t">
                      <span>订单号</span>
                      <span>团号</span>
                      <span>出团时间</span>
                      <span>未收金额</span>
                    </div>
                    <div class="table_c">
                      <div class="table_cont" v-for="item in data.orderInfo">
                        <span style="font-size: 12px;color:#333333;">{{item.orderId}}</span>
                        <span style="font-size: 12px;color:#333333;">{{item.tcnum}}</span>
                        <span style="font-size: 12px;color:#999999;">{{item.startDate}}</span>
                        <span style="font-size: 12px;color:#F36C5E;">￥{{item.dueInMoney}}</span>
                      </div>
                      <div style="width: 100%;margin-top: 20px;text-align: center"
                        v-show="data.orderInfo ==null || data.orderInfo.length == 0">暂无数据</div>

                    </div>


                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="el-col-div ownScrollbarStyle PersonalData_r">
                  <div class="l_title jryj">
                    <span style="font-size: 14px;color: #333333;float: left;margin-left: 35px">今日业绩</span>
                  </div>
                  <div class="r_box">
                    <div class="r_box_t">
                      <div class="c_view view_t">
                        <div class="semicircle_t"></div>
                        <div class="view_c">
                          <span>今日收客数</span>
                          <div class="view-f">
                            <span>{{data.totalGuestNum}}</span>
                            <span>人</span>
                          </div>
                        </div>
                        <i class="iconfont icon-tuoyuan" />
                      </div>

                      <div class="c_view view_t">
                        <div class="semicircle_t"></div>
                        <div class="view_c">
                          <span>今日报名单数</span>
                          <div class="view-f">
                            <span>{{data.toDayOrderCount}}</span>
                            <span>单</span>
                          </div>
                        </div>
                        <i class="iconfont icon-xingzhuang2" />
                      </div>

                      <div class="c_view view_t">
                        <div class="semicircle_t"></div>
                        <div class="view_c">
                          <span>今日涨幅</span>
                          <div class="view-tf">
                            <span>{{data.priceRate}}%</span>
                          </div>
                        </div>
                        <i class="iconfont icon-xingzhuang4" id="xzts" />
                      </div>
                    </div>

                    <div class="r_box_b">
                      <div class="c_view view_b">
                        <div class="semicircle_b"></div>
                        <div class="view_c">
                          <span>新增客户</span>
                          <div class="view-f">
                            <span>{{data.addCustomerCount}}</span>
                            <span>人</span>
                          </div>
                        </div>
                        <i class="iconfont icon-xingzhuang5" />
                      </div>
                      <div class="c_view view_b">
                        <div class="semicircle_b"></div>
                        <div class="view_c">
                          <span>广告发送</span>
                          <div class="view-f">
                            <span>{{data.advertising}}</span>
                            <span>条</span>
                          </div>
                        </div>
                        <i class="iconfont icon-xingzhuang1" />
                      </div>
                      <div class="c_view view_b">
                        <div class="semicircle_b"></div>

                        <div class="view_c">
                          <span>今日询单</span>
                          <div class="view-f">
                            <span>{{data.inquiryCount}}</span>
                          </div>
                        </div>
                        <i class="iconfont icon-xingzhuang3" id="xzts" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="dataanalysis">
            <el-row :gutter="20">
              <el-col :span="7">
                <div class="el-col-div ownScrollbarStyle data_l">
                  <div class="l_title">
                    <span style="font-size: 14px;color: #333333;float: left">我的评价</span>
                  </div>
                  <div id="evaluate" v-show="data.taskCapacityList !=null && data.taskCapacityList.length != 0"
                    :style="{width:'350px', height: '310px'}" style="margin-left: 9%"></div>
                  <div v-if="data.taskCapacityList == null || data.taskCapacityList.length == 0"
                    style="width: 100%;text-align: center;margin-top: 20px">暂无数据</div>
                </div>
              </el-col>
              <el-col :span="13">
                <div class="el-col-div ownScrollbarStyle data_c">
                  <div class="l_title" style="margin-top: 20px">
                    <span style="font-size: 14px;color: #333333;float: left;">本周业绩</span>
                  </div>
                  <div class="data_title">
                    <span style="margin-left: 100px">{{data.rankCount==0 ? '未上榜！':'上周排名！'}}</span>
                    <span style="color: #00B26F" v-show="data.rankCount>0">No.{{data.rankCount}}</span>
                    <span>，{{data.rankCount==1 ? '继续保持！':'继续努力！'}}</span>
                    <div class="tagging">
                      <div class="yuan_o"></div>
                      <span>需努力</span>
                      <div class="yuan_t"></div>
                      <span>加油！</span>
                      <div class="yuan_tr"></div>
                      <span>超棒哦！</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">拜访客户</span>
                    <div class="Progress">
                      <div
                        :style="{width:(data.lastWeekaddVisitCount > 0 ? (data.lastWeekaddVisitCount/data.lastWeekVisitAve)*100 +'%' : 0)}"
                        :class="data.lastWeekaddVisitCount < data.lastWeekVisitAve ? 'bugou' : (data.lastWeekaddVisitCount == data.lastWeekVisitAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>{{data.lastWeekaddVisitCount}}</span>
                      <span>/人均 {{data.lastWeekVisitAve}}人</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">新增客户</span>
                    <div class="Progress">
                      <div
                        :style="{width:(data.lastWeekaddCustomerCount > 0 ? (data.lastWeekaddCustomerCount/data.lastWeekaddCustomerAve)*100 +'%' : 0)}"
                        :class="data.lastWeekaddCustomerCount < data.lastWeekaddCustomerAve ? 'bugou' : (data.lastWeekaddCustomerCount == data.lastWeekaddCustomerAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>{{data.lastWeekaddCustomerCount}}</span>
                      <span>/人均 {{data.lastWeekaddCustomerAve}}人</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">报名单</span>
                    <div class="Progress">
                      <div
                        :style="{width:(data.myTotalOrderCount > 0 ? (data.myTotalOrderCount/data.myTotalOrderAve)*100 +'%' : 0)}"
                        :class="data.myTotalOrderCount < data.myTotalOrderAve ? 'bugou' : (data.myTotalOrderCount == data.myTotalOrderAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>{{data.myTotalOrderCount}}</span>
                      <span>/人均 {{data.myTotalOrderAve}}单</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">报名人数</span>
                    <div class="Progress">
                      <div
                        :style="{width:(data.totalGuestCount > 0 ? (data.totalGuestCount/data.totalGuestAve)*100 +'%' : 0)}"
                        :class="data.totalGuestCount < data.totalGuestAve ? 'bugou' : (data.totalGuestCount == data.totalGuestAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>{{data.totalGuestCount}}</span>
                      <span>/人均 {{data.totalGuestAve}}人</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">销售金额</span>
                    <div class="Progress">
                      <div
                        :style="{width:(data.totalOrderPrice > 0 ? (data.totalOrderPrice/data.totalOrderPriceAve)*100 +'%' : 0)}"
                        :class="data.totalOrderPrice < data.totalOrderPriceAve ? 'bugou' : (data.totalOrderPrice == data.totalOrderPriceAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>￥{{data.totalOrderPrice}}</span>
                      <span>/人均 ￥{{data.totalOrderPriceAve}}</span>
                    </div>
                  </div>
                  <div class="D_data">
                    <span class="zname">开发需求</span>
                    <div class="Progress">
                      <div :style="{width:(data.exploitCount > 0 ? (data.exploitCount/data.exploitAve)*100 +'%' : 0)}"
                        :class="data.exploitCount < data.exploitAve ? 'bugou' : (data.exploitCount == data.exploitAve) ? 'jiayou' :'chaobang'">
                      </div>
                    </div>
                    <div class="mean">
                      <span>{{data.exploitCount}}</span>
                      <span>/人均 {{data.exploitAve}}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="4" class="qxleft">
                <div class="el-col-div ownScrollbarStyle  data_r">
                  <div class="l_title">
                    <span style="font-size: 14px;color: #333333;float: left">快速通道</span>
                  </div>
                  <div class="r_box" @click="goUrlT('FinancialDocuments',3,'财务单据')">
                    <div style="background: #FFE6E4" class="icon_f">
                      <i class="iconfont icon-Compose" style="color: #F89291" />
                    </div>
                    <div class="r_name">
                      <span>待处理财务单据</span>
                      <el-badge class="tishi" :value="NotDealCount?NotDealCount:'0'" />
                    </div>
                  </div>
                  <div class="r_box" @click="goUrl('/salesVolumeRank')">
                    <div style="background: #FFD6BF;" class="icon_f">
                      <i class="iconfont icon-Heart" style="color: #F4A469" />
                    </div>
                    <div class="r_name">
                      <span>销售排行</span>
                    </div>
                  </div>
                  <div class="r_box">
                    <div style="background: #D5D0F4" class="icon_f">
                      <i class="iconfont icon-Newspaper" style="color: #9E8DE3" />
                    </div>
                    <div class="r_name">
                      <span>待处理发票</span>

                      <el-badge class="tishi" :value="data.invoiceApplyCount?data.invoiceApplyCount:'0'" />
                    </div>
                  </div>
                  <div class="r_box">
                    <div style="background: #C0EBD1;" class="icon_f">
                      <i class="iconfont icon-Sound" style="color: #5CC790;" />
                    </div>
                    <div class="r_name">
                      <span>公告</span>

                      <el-badge class="tishi" :value="data.noticeCount?data.noticeCount:'0'" />

                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-show="type==2" class="paneldata">
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="el-col-div ownScrollbarStyle paneldata_l">
                <div class="groupmembers">
                  <div class="grouptiday">
                    <div class="g_icon g_sks">
                      <i class="iconfont icon-user" style="color: #6C7AE0"></i>
                    </div>
                    <div class="receive">
                      <span>今日总收客人数</span>
                      <span>{{groupdata.toDayGuestCount}}<span class="p_dw">人</span></span>
                    </div>

                    <div class="g_icon g_bms">
                      <i class="iconfont icon-clipboard" style="color: #00B26F"></i>
                    </div>
                    <div class="receive">
                      <span>今日总报名单数</span>
                      <span>{{groupdata.toDayOrderCount}}<span class="p_dw">单</span></span>
                    </div>

                    <div class="g_icon g_skuan">
                      <i class="iconfont icon-graph" style="color: #FF7B8A"></i>
                    </div>
                    <div class="receive">
                      <span>今日收款</span>
                      <span>{{groupdata.toDayInPrice}}</span>
                    </div>
                    <div class="gain">
                      <span>涨幅</span>
                      <div class="sj">
                        <i :class="groupdata.toDayInPriceRate<0 ? 'bottomsanjiao':'topsanjiao' "></i>
                        <span
                          :style="groupdata.toDayInPriceRate<0 ? 'color:#F36C5E':'color:#00B26F'">{{groupdata.toDayInPriceRate}}%</span>
                      </div>
                    </div>
                    <div class="weekdata">
                      <div class="weekdata_box">
                        <span>本周总收客</span>
                        <span class="w_da">{{groupdata.nowWeekGuestCount}}</span>
                        <div class="w_d">
                          <i :class="groupdata.guestRate<0 ? 'bottomsanjiao':'topsanjiao' "></i><span
                            :style="groupdata.guestRate<0 ? 'color:#F36C5E':'color:#00B26F'">{{groupdata.guestRate}}%</span>
                        </div>
                      </div>
                      <div class="weekdata_box">
                        <span>本周报名单数</span>
                        <span class="w_da">{{groupdata.orderCount}}</span>
                        <div class="w_d">
                          <i :class="groupdata.orderRate<0 ? 'bottomsanjiao':'topsanjiao' "></i><span
                            :style="groupdata.orderRate<0 ? 'color:#F36C5E':'color:#00B26F'">{{groupdata.orderRate}}%</span>
                        </div>
                      </div>
                      <div class="weekdata_box2">
                        <span>本周未收金额</span>
                        <span class="w_da" style="margin-top: 5px">￥{{groupdata.dueInMoney}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="line">
                    <div class="line_title">
                      <span>小组成员业绩</span>
                    </div>
                  </div>
                  <div class="ranking">
                    <div class="rankbox" v-for="(item,index) in groupdata.departmentUserOrderList" :key="index">
                      <div class="xz_tx">
                        <img v-if="item.icon!=null && item.icon !='' " :src="item.icon" alt=""
                          :onerror='defaultHeadImg'>
                        <img v-else src="../../assets/img/default_head_img.jpg" alt="">
                        <i :class="index==0? 'iconfont icon-juxing-1':'' "
                          style="position: absolute;top: -20px;left: -10px;color: #FFC71E" />
                        <i :class="index==1? 'iconfont icon-juxing-1':'' "
                          style="position: absolute;top: -20px;left: -10px;color: #C7C7C7" />
                        <i :class="index==2? 'iconfont icon-juxing-1':'' "
                          style="position: absolute;top: -20px;left: -10px;color: #B6794C" />
                      </div>
                      <div style="width: 100%;text-align: center">
                        <span style="font-size: 14px;color: #333333;margin-top: 10px;">{{item.userName}}</span>
                      </div>
                      <div style="width: 100%;height: 2px;background: #E7E7E7;margin: 10px 0"></div>
                      <div class="rankbox_b">
                        <div class="today">
                          <span>
                            今日收客
                          </span>
                          <span>
                            {{item.toDayOrderGuestCount}}
                          </span>
                        </div>
                        <div class="today">
                          <span>
                            总收客
                          </span>
                          <span>
                            {{item.allOrderGuestCount}}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tubiao">
                  <div class="l_title" style="position: relative">
                    <span style="font-size: 14px;color: #333333;float: left">本周收客排行</span>
                  </div>
                  <div class="tb_box">
                    <div v-show="OrderList !=null && OrderList.length>0" id="myChart"
                      :style="{width: '1240px', height: '270px'}"></div>
                    <div v-if="OrderList == null || OrderList.length == 0"
                      style="width: 100%;text-align: center;;margin-top: 20px">暂无数据</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="el-col-div ownScrollbarStyle paneldata_r">
                <div class="paneldata_r_box">
                  <div class="l_title">
                    <span style="font-size: 14px;color: #333333;float: left">今日工作</span>
                  </div>
                  <div class="c_view gz1">
                    <div class="banyuan" style="background: #FBF7FF"></div>
                    <div class="view_g">
                      <span>今日收客数</span>
                      <div class="pr_s">
                        <span>{{groupdata.addCustomerCount}}</span>
                        <span>人</span>
                      </div>
                    </div>
                    <i class="iconfont icon-xingzhuang5" style="color: #A598EE" />
                  </div>
                  <div class="c_view gz2">
                    <div class="banyuan" style="background: #DBF1D1"></div>
                    <div class="view_g">
                      <span>拜访客户</span>
                      <div class="pr_s">
                        <span>{{groupdata.visitCustomerCount}}</span>
                        <span>人</span>
                      </div>
                    </div>
                    <i class="iconfont icon-xingzhuang8" style="color: #98D482" />
                  </div>
                  <div class="c_view gz3">
                    <div class="banyuan" style="background: #E3EFF6"></div>
                    <div class="view_g">
                      <span>客户活跃</span>
                      <div class="pr_s">
                        <span>{{groupdata.customerActive}}</span>
                        <span>人</span>
                      </div>
                    </div>
                    <i class="iconfont icon-xingzhuang6" style="color: #68A3C2" />
                  </div>
                  <div class="c_view gz4">
                    <div class="banyuan" style="background: #ECECFF"></div>
                    <div class="view_g">
                      <span>广告发送</span>
                      <div class="pr_s">
                        <span>{{groupdata.advertising}}</span>
                        <span>人</span>
                      </div>
                    </div>
                    <i class="iconfont icon-xingzhuang1" style="color: #8F96EB" />
                  </div>
                  <div class="c_view gz5">
                    <div class="banyuan" style="background: #F1F5FF"></div>
                    <div class="view_g">
                      <span>今日询单</span>
                      <div class="pr_s">
                        <span>{{groupdata.inquiryCount}}</span>
                        <span>人</span>
                      </div>
                    </div>
                    <i class="iconfont icon-xingzhuang3" />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 分享业绩 -->
    <el-dialog custom-class='w500' title="分享提成" :visible.sync="tichengDialog" center :before-close="resetCommission">
      <el-form :model="shareMsg" :rules="rules" ref="shareMsg" label-width="80px">
        <el-form-item label="个人宣言" style="margin-bottom:0;" prop="ShareContent">
          <el-input type="textarea" rows="6" resize="none" maxlength="100" v-model="shareMsg.ShareContent"
            placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <span class="Sale_UnlessWords">
        不能少于10个字
      </span>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="tichengDialog=false">取消</button>
        <button class="normalBtn" @click="shareCommission">确定</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import leftNav from '../public/leftNav.vue'
  import moment from 'moment'
  export default {
    data() {
      return {
        rankingNum: 0,
        type: 1,
        defaultHeadImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        style: {
          width: 0,
          background: "#FFFFFF"
        },
        data: [],
        groupdata: [],
        myScore: [],
        screenWidth: 0,
        NotDealCount: 0, //
        zoom: 1,
        OrderList: [],
        tichengDialog: false,
        shareMsg: {
          ShareContent: '',
          PeriodsId: 0,
          totalCommission: 0
        },
        rules: {
          ShareContent: [{
            required: true,
            message: '请填写个人宣言',
            trigger: 'blur'
          }]
        },
        //验证重复提交
        isSubmit: true,
        CurrentUserInfo: {},
        EditBtn: false,
        PMMsg: {
        RB_Branch_Id: -1,
        RB_Department_Id: 0,
        EnterID: 0,
        tStartDates: [],
        qStartDates: [],
        GroupBy: "EnterID",
        QueryType: 0,
      },
      }
    },
    components: {
      leftNav
    },

    watch: {
      screenWidth(val) {
        this.screenWidth = val;
        let Width = val - 350
        this.zoom = ((Width / (1920 - 350)) * 100).toFixed(0) + '%';
      }
    },
    methods: {
      settStartDates() {
        let date = moment().format('yyyy-MM-DD')
        let start = moment().subtract(1, 'months').format('yyyy-MM-DD')
        this.PMMsg.tStartDates = [start, date]
      },
      initData() {
        let userInfo = this.getLocalStorage();
          let param = {
            RB_Branch_Id:
              this.PMMsg.RB_Branch_Id == -1 ? null : this.PMMsg.RB_Branch_Id,
            RB_Department_Id:
              this.PMMsg.RB_Department_Id == 0 ? null : this.PMMsg.RB_Department_Id,
            EnterID: this.PMMsg.EnterID == 0 ? null : this.PMMsg.EnterID,//Number(userInfo.EmployeeId)
            QStartDate:
              this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2
                ? this.PMMsg.tStartDates[0]
                : null,
            QEndDate:
              this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2
                ? this.PMMsg.tStartDates[1]
                : null,
            CStartDate:
              this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2
                ? this.PMMsg.qStartDates[0]
                : null,
            CEndDate:
              this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2
                ? this.PMMsg.qStartDates[1]
                : null,
            GroupBy: this.PMMsg.GroupBy,
            QueryType: this.PMMsg.QueryType,
          };
          if (!param.QStartDate) {
            param.QStartDate = "2019-01-01";
          }
          let tableData = []
          this.apipost("sellorder_get_sellvolumerankNew", param, (r) => {
            r.data.data.forEach((x) => {
              x.incomeVal = parseFloat(x.income);
              x.avgPrice = parseFloat(x.avgPrice);
            });
            tableData = r.data.data;
            tableData.forEach((item,index)=>{
              if(item.EnterID==Number(userInfo.EmployeeId)){
                this.rankingNum = index+1
              }
            })
          });
        },

      // 销售预期提成
      goAnticipate(type){
        let userInfo = this.getLocalStorage();
        let name
        if(type==1){
          name = 'TradeTicketUserDetails'
        }else if(type==2){
          name = 'domesticCommissionUser'
        }else if(type==3){
          name = 'ServiceCommissionUser'
        }else if(type==4){
          name = 'saleExpectedCommission'
        }
        this.$router.push({
          name: name,
          query: {
            UserId: Number(userInfo.EmployeeId),
            isSale: 1,
            blank: 'y'
          }
        });
      },
      iWorkbench() {
        this.apipost('customerIndex_post_GetMySelfSellInfo', {}, res => {
          if (res.data.resultCode == 1) {
            this.data = res.data.data;
            this.myScore = res.data.data.taskCapacityList;
            this.myScore.forEach(item => {
              if (item.score < 60) {
                item['fen'] = 'D'
              } else if (item.score < 70 && item.score >= 60) {
                item['fen'] = 'C'
              } else if (item.score < 80 && item.score >= 70) {
                item['fen'] = 'B'
              } else if (item.score < 95 && item.score >= 80) {
                item['fen'] = 'A'
              } else {
                item['fen'] = 'S'
              }
            })
            let evaluate = this.$echarts.init(document.getElementById('evaluate'))
            evaluate.setOption({

              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              radar: [{
                name: {
                  formatter: function (value, indicator) {
                    return value + '\n' + indicator.fen
                  }
                },
                splitArea: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: ['#BCBFFF', '#BCBFFF']
                  }
                },
                indicator: [{
                    text: this.myScore[0].name,
                    max: 100,
                    fen: this.myScore[0].fen
                  },
                  {
                    text: this.myScore[1].name,
                    max: 100,
                    fen: this.myScore[1].fen
                  },
                  {
                    text: this.myScore[2].name,
                    max: 100,
                    fen: this.myScore[2].fen
                  },
                  {
                    text: this.myScore[3].name,
                    max: 100,
                    fen: this.myScore[3].fen
                  },
                  {
                    text: this.myScore[4].name,
                    max: 100,
                    fen: this.myScore[4].fen
                  },
                  {
                    text: this.myScore[5].name,
                    max: 100,
                    fen: this.myScore[5].fen
                  }
                ],
              }, ],
              series: [{
                type: 'radar',
                tooltip: {
                  trigger: 'item'
                },
                itemStyle: {
                  normal: {
                    areaStyle: {
                      type: 'default'
                    }
                  }
                },
                data: [{
                  value: [this.myScore[0].score, this.myScore[1].score, this.myScore[2].score, this
                    .myScore[3].score, this.myScore[4].score, this.myScore[5].score
                  ],
                  itemStyle: {
                    normal: {
                      color: '#487DE9'
                    }
                  },
                  name: '我的评价'
                }, ],
                radius: 60
              }, ]
            });
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      grouplist() {
        this.apipost('customerIndex_post_GetDepartmentSellInfo', {}, res => {
          if (res.data.resultCode == 1) {
            this.groupdata = res.data.data;
            let OrderList = res.data.data.reaultDepartmentOrderList;
            this.OrderList = OrderList;
            if (OrderList != null) {
              this.drawLine(OrderList); // echarts;
            }
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      drawLine(OrderList) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let dataname = [];
        let bzdata = [];
        let szdata = [];
        for (var i = 0; i < OrderList.length; i++) {
          if (i < 10) {
            dataname.push(OrderList[i].branchName + '\n' + OrderList[i].departmentName)
            bzdata.push(OrderList[i].nowWeekGuest)
            szdata.push(OrderList[i].nowLastWeekGuest)
          }
        }
        // 绘制图表
        myChart.setOption({
          title: '',
          tooltip: {},
          legend: {
            x: 'center',
            data: ['本周收客', '上周收客', ]
          },
          xAxis: {
            data: dataname,
            triggerEvent: true,
            axisLabel: {
              fontSize: 9, //设置x轴标签的字体大小
              interval: 0 //设置标签x的名称 0为显示所有  1为间隔一个显示
            },
            axisTick: {
              interval: 0
            },
            nameTextStyle: {}
          },
          yAxis: {
            name: '收客数',
            nameLocation: 'end', //坐标轴名称显示位置。
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [{
              type: 'bar',
              name: '本周收客',
              barGap: '-100%',
              data: bzdata,
              z: 11,
              itemStyle: {
                normal: {
                  color: '#1698FD',
                }
              },
              barWidth: 20
            },
            {
              type: 'bar',
              name: '上周收客',
              data: szdata,
              z: 10,
              itemStyle: {
                normal: {
                  color: '#7FEFEF'
                }
              },
              barWidth: 20
            }
          ]
        });
      },
      Financial_post_GetNotDealCount() {
        this.apipost(
          "Financial_post_GetNotDealCount", {},
          r => {
            if (r.data.resultCode == 1) {
              this.NotDealCount = r.data.data;
            }
          },
          null
        );
      },
      goUrlT(url, index, name) {
        let query = {
          Conditon: index
        }
        if (localStorage.openMode && localStorage.openMode == 1) {
          query.tab = name
          query.blank = 'y'
        }
        this.$router.push({
          path: url,
          query
        });
      },
      goUrl(path) {
        this.$router.push({
          path: path
        })
      },
      //锅炉除开标点符号的字数
      getFilteredNum(val) {
        //var pattern=new RegExp("[`~%!@#$^=''?~！@#￥……&——‘”“'？*()（），,。.、<>《》\\[\\]【】\\“\\”{}=+-|\/:;；：]");
        var pattern = new RegExp("[`~%!@#$^=''?~！@#￥……&——‘”“'？*()（），,。.、<>《》:;； +-=\\s]");
        //[]内输入你要过滤的字符，这里基本包含全部的标点符号，\\是转义字符
        var rs = "";
        for (var i = 0; i < val.length; i++) {
          rs += val.substr(i, 1).replace(pattern, '');
        }
        return rs
      },
      //确定分享业绩
      shareCommission() {
        if (this.shareMsg.ShareContent == '') {
          this.Error('请填写个人宣言');
          return;
        }
        let FilterNum = this.getFilteredNum(this.shareMsg.ShareContent);
        if (FilterNum.length < 10) {
          this.Error('字数太少了，再多说点吧！');
          return;
        } else {
          this.shareMsg.PeriodsId = this.data.comissionGeneralId;
          this.shareMsg.totalCommission = this.data.totalCommission;
          if (this.isSubmit) {
            this.isSubmit = false;
            this.apipost('customerIndex_post_SetSellComissionGeneralSure', this.shareMsg, res => {
              this.isSubmit = true;
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.iWorkbench();
                this.resetCommission();
                this.MsgBus.$emit('reSetMSG');
              } else {
                this.Error(res.data.message);
              }
            }, err => {})
          }
        }
      },
      //关闭重置输入框
      resetCommission() {
        this.tichengDialog = false;
        this.shareMsg.ShareContent = ''
      },
      GetAuth() {
        var actionCode = this.$AuthCode.V_PersonalCenter;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.EditBtn = true;
          }
        });
      },
    },
    mounted() {
      this.settStartDates()
      this.GetAuth();
      this.CurrentUserInfo = this.getLocalStorage();
      var w = document.documentElement.clientWidth || document.body.clientWidth;
      this.screenWidth = w;
      let Width = w - 350
      this.zoom = ((Width / (1920 - 350)) * 100).toFixed(0) + '%';
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          this.screenWidth = window.screenWidth
        })()
      }
      this.iWorkbench() //销售个人工作台接口
      this.grouplist() //销售首页小组工作台
      this.Financial_post_GetNotDealCount(); //待处理财务单据的个数
      // 排名
      this.initData()
    },
  }

</script>
