<style lang="less" scoped>
  @import "../../assets/css/main.less";
  /* @import "../../assets/css/cssReset.css"; */
  @import "../../assets/css/home/Saleshomepage_1920.css";
  .HiddenNum{
    position: relative;
    top: 13px;
  }
  .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;
  }

  .title-Month {
    text-align: right;
  }

  .groupTourOrder {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
  }

  .groupTourOrder span {
    /* width: 50%; */
    white-space: nowrap;
    font-size: 14px;
    background: #DEE1E6;
    color: #333333;
    border-radius: 5px;
    padding: 5px 10px;
    margin-left: 20px;
    /* #333333 */
  }

  .groupTourOrder span:first-child {
    margin-left: 0;
  }

  .groupTourOrder span span {
    color: red;
  }

  .CommissionLadder-form {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    overflow: hidden;
  }

  .CommissionLadder {
    flex: 1;
    padding: 16px 20px 20px 20px;
    background: #ffffff;
  }

  .CommissionLadder.Line {
    margin: 0 0 10px 0;
  }

  .CommissionLadder .title {
    font-size: 19px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }

  .CommissionLadder p {
    padding: 5px 0 5px 0;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    color: #333333;
  }

  .CommissionLadder p span:last-child {
    color: red;
  }

  .CommissionInfor {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 10px 0;
  }

  .CommissionInfor span {
    margin-left: 5px;
    font-size: 13px;
  }

  .CommissionInfor span:first-child {
    margin-left: 0;
  }

  .CommissionInfor span span {
    color: red;
  }

  .CommissionLadder:last-child {
    margin-right: 0;
  }

  .commissionProject {
    padding: 0 0 10px 0;
    border-bottom: 1px dashed #BDBDBD;
  }

  .border-bottom {
    border-bottom: 1px dashed #BDBDBD;
  }

  .commissionProject>div {
    margin-right: 40px;
    margin-top: 10px;
  }

  .commissionProject>div:last-child {
    margin-right: 0;
  }

  .commissionProject>div>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 5px 0;
  }

  .commissionProjectZL {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 0 5px 0; */
  }

  .commissionProject>div>div {}

  .ProjectTitle {
    color: black;
    font-size: 16px;
    font-weight: bold;
  }

  .ProjectTitle>span {
    margin-left: 5px;
    font-size: 15px;
    font-weight: 100;
  }

  .OpenOrder {
    background: #ffffff;
    padding: 10px 20px 20px 20px;
  }

  .OpenOrderMore {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 0;
    cursor: 0;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }

  .OpenOrderMore span {
    color: #999999;
    font-size: 14px;
  }

  .headerTitle {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .headerTitle p {
    font-weight: bold;
    flex-wrap: nowrap;
  }

  .headerTitle span:last-child {
    font-weight: 100;
    color: red;
    margin-right: 20px;
  }

  .ladder-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .ladder-form-box {
    /* height: 72px; */
    padding: 0 0 10px 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .ladder-list {
    flex: 1;
    min-width: 460px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 40px;
    margin-bottom: 10px;
  }

  .ladder-list:nth-child(3n) {
    margin-right: 0;
  }

  .ladder-list:last-child {
    margin-right: 0;
  }

  .ladder-title {
    width: 100%;
    font-size: 15px;
    padding: 5px 0 0 0;
    color: black;
    font-weight: bold;
  }

</style>

<template>
  <div>
    <leftNav></leftNav>
    <div class="sale_cont" v-if="CurrentUserInfo.RB_Group_id==2 || EditBtn">
      <div class="saleChartCont" :style="{zoom:zoom}" style="overflow-y: scroll;" v-loading="loading">
        <div class="personal">
          <div class="PersonalData" style="height: auto;margin-top: 0;background: none;">
            <el-row :gutter="20" style="margin-right: 0;">
              <el-col :span="12" style="padding-right: 0;">
                <div class="el-col-div ownScrollbarStyle PersonalData_l" style="height: auto;background: #fff;">
                  <div class="l_top" style="position: relative;">
                    <img v-if="userInfo.Icon !=null && userInfo.Icon !='' " :src="userInfo.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" style="margin-top:20px">
                      <span>{{userInfo.emName}}</span>
                      <span>{{userInfo.PostName}}</span>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                      <div style="cursor: pointer;cursor: pointer;position: relative;" class="royalty"
                        @click="goAnticipate(1)">
                        <div class="tc">
                          <p>
                            <span>￥</span>
                            <span :class="[isView?'':'HiddenNum']">{{isView?data.OPCommission:'***'}}</span>
                            <div style="width: 20px;height: auto; position: absolute;right: -30px;top: -15px; cursor: pointer;color: #232323;"
                            @click.stop="isView=!isView">
                              <el-icon class="iconfont"
                              :class="[isView?'icon-chakan':'icon-yincang']"
                              ></el-icon>
                            </div>
                          </p>
                          <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.PeriodsName}}{{$t('objFill.qi')}}<el-tag
                              v-if="data.PeopelBonus" size="mini" type="danger" effect="dark"
                              style="color: #ffff;position: absolute;left: 70px;bottom: 23px;font-size: 11px;"
                              :class="[isView?'':'HiddenNum']">
                              {{$t('objFill.v101.Rest.jian')}}+{{isView?data.PeopelBonus:'***'}}</el-tag>
                          </p>
                        </div>
                        <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                          <span>{{$t('objFill.chujingtc')}}</span>
                        </div>
                      </div>
                      <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
                      <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(2)">
                        <div class="tc">
                          <p>
                            <span>￥</span>
                            <span :class="[isView?'':'HiddenNum']">{{isView?data.GNOPCommission:'***'}}</span>
                          </p>
                          <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.GNPeriodsName}}{{$t('objFill.qi')}}</p>
                        </div>
                        <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                          <span>{{$t('objFill.guoneitc')}}</span>
                        </div>
                      </div>
                      <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
                      <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(3)">
                        <div class="tc">
                          <p>
                            <span>￥</span>
                            <span :class="[isView?'':'HiddenNum']">{{isView?data.DXOPCommission:'***'}}</span>
                          </p>
                          <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.DXPeriodsName}}{{$t('objFill.qi')}}</p>
                        </div>
                        <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
                          <span>{{$t('objFill.v101.lishidxtic')}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" style="padding-right: 0;">
                <div class="el-col-div ownScrollbarStyle PersonalData_l"
                  style="height: 158px;background: #fff;position: relative;">
                  <div class="title-Month">
                    <template v-for="(item ,index) in MonthList">
                      <input type="button" :key="index"
                        :class="{'normalBtn':Month==item.Id,'hollowFixedBtn':Month!=item.Id}" :value="item.Name"
                        @click="clickActive(item)"></input>
                    </template>
                  </div>
                  <div style="display: flex;flex-direction: column; padding: 20px 20px 0 20px;">
                    <div class="headerTitle">
                      <!-- <p><span>总团队数：</span> <span>{{groupNum}}</span></p> -->
                      <p><span>{{$t('objFill.v101.activity.zongdindans')}}：</span> <span>{{OrderNum}}</span></p>
                      <p><span>{{$t('objFill.v101.Rest.zongrntous')}}：</span><span>{{EopleNum}}</span></p>
                      <p><span>{{$t('objFill.v101.Rest.zongyuqijianj')}}：</span><span>{{CommissionJJ}}</span></p>
                      <p><span>{{$t('objFill.v101.Rest.zongyuqitic')}}：</span><span>{{CommissionTC}}</span></p>
                    </div>
                    <p style="color: red;font-size: 14px;text-align: right;position: absolute;bottom: 10px;
                    right: 20px;">{{$t('objFill.v101.zhucztcxyjt')}}</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <template v-for="(item,index) in dataRlueList">
            <div class="CommissionLadder-form" style="flex-direction: column;">

              <div class="CommissionLadder Line" :style="{'margin': index>0?'10px 0 0 0':'0 0 0 0'}">
                <div class="title">
                  <span>{{item.RuleName}}{{item.RuleName.indexOf('线')==-1?$t('objFill.v101.xian'):''}}</span>
                  <div>
                    <!-- <detailsButtom :type="1" :obj="commissionMsg" :Month="Month"/> -->
                  </div>
                </div>
                <template v-if="isVisa">
                  <div class="commissionProject" style="display: flex;flex-wrap: wrap;padding: 0 0 15px 0;">
                    <div>
                      <div style="padding: 0 0 5px 0;">
                        <span class="ProjectTitle">{{$t('objFill.v101.gongssygncfxdtsp')}}
                          <span></span></span>
                      </div>
                      <div class="groupTourOrder">
                        <span>{{$t('objFill.v101.tuanduishu')}}：<span><template v-if="item.PeopleAward">
                              {{item.PeopleAward.TravelNum}}</template></span></span>
                        <span>{{$t('fnc.retoushu')}}：<span><template
                              v-if="item.PeopleAward">{{item.PeopleAward.PeopelNum}}</template></span></span>
                        <span>{{$t('objFill.tichengfanshi')}}：<span><template
                              v-if="item.PeopleAward">{{item.PeopleAward.Rate}}{{item.PeopleAward.Way==1?$t('objFill.v101.FinancialModule.yuanren'):'%'}}</template></span></span>
                        <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span><template
                              v-if="item.PeopleAward">{{item.PeopleAward.Commission}}</template></span></span>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="border-bottom" v-if="isVisa">
                  <p style="font-size: 16px;font-weight: bold;color: black;padding: 10px 0 0 0;"
                    v-if="item.BranchList&&item.BranchList.length>0&&item.BranchList[0].GradeRuleList&& item.BranchList[0].GradeRuleList && item.BranchList[0].GradeRuleList.length>0">
                    {{$t('objFill.xiaobaot')}}{{!isBranchCompany?'、'+$t('objFill.v101.myOrdersAllType.luodituan'):''}}{{$t('objFill.v101.yijidxtic')}}</p>
                  <div class="ladder-form" style="margin-top: 3px;">
                    <div class="ladder-form-box">
                      <template
                        v-if="item.BranchList&&item.BranchList.length>0&&item.BranchList[0].GradeRuleList&&item.BranchList[0].GradeRuleList.length>0">
                        <div class="ladder-list" v-for="(s,indexs) in item.BranchList">
                          <div class="ladder-title">{{s.BranchName}}</div>
                          <div class="CommissionInfor">
                            <span>
                              {{$t('objFill.v101.FinancialModule.tuanshu')}}：<span>{{s.TravelNum}}</span>
                            </span>
                            <span>
                              {{$t('objFill.v101.danxiandanshu')}}：<span>{{s.SingleOrderNum}}</span>
                            </span>
                            <span>
                              {{$t('objFill.yuqilirun')}}：<span>{{s.Profit}}</span>
                            </span>
                            <span>
                              {{$t('objFill.v101.Rest.yuqibili')}}：<span>{{s.Rate}}{{s.Way==1?$t('objFill.v101.FinancialModule.yuanren'):'%'}}</span>
                            </span>
                            <span>
                              {{$t('objFill.v101.Rest.yuqitic')}}：<span>{{s.Commission}}</span>
                            </span>
                          </div>
                          <progressComm :type="2" :CommissionRateList="s.GradeRuleList" :Profit="s.Profit">
                          </progressComm>
                        </div>
                      </template>
                      <div class="ladder-list">
                        <div class="ladder-title">{{$t('objFill.v101.ewaijlspdant')}}{{isBranchCompany?$t('objFill.v101.xuydlctbhldit'):''}}</div>
                        <div class="CommissionInfor">
                          <span>
                            {{$t('objFill.v101.FinancialModule.tuanshu')}}：<span>{{item.TravelAward.TravelNum}}</span>
                          </span>
                          <span>
                            {{$t('objFill.v101.FinancialModule.jiangli')}}：<span>{{item.TravelAward.AwardMoney}}</span>
                          </span>
                        </div>
                        <progressComm :type="1" :CommissionRateList="item.TravelAward.GradeRuleList"
                          :Profit="item.TravelAward.TravelNum"></progressComm>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="commissionProject" style="display: flex;flex-wrap: wrap;">
                  <div>
                    <div style="display: flex;">
                      <div>
                        <div class="commissionProjectZL">
                          <span class="ProjectTitle">{{$t('objFill.v101.qianzhengtc')}}</span>
                        </div>
                        <p>{{$t('objFill.v101.danxianqz')}}</p>
                        <div class="groupTourOrder">
                          <span>{{$t('objFill.v101.FinancialModule.dindanshu')}}：<span>{{item.SingleVisa.OrderNum}}</span></span>
                          <span v-if="item.SingleVisa.Way==1">{{$t('leader.leader_registraNum')}}：<span>{{item.SingleVisa.PeopleNum}}</span></span>
                          <span v-if="item.SingleVisa.Way==2">{{$t('objFill.yuqilirun')}}：<span>{{item.SingleVisa.Profit}}</span></span>
                          <span>{{$t('objFill.v101.FinancialModule.tichengbil')}}：<span>{{item.SingleVisa.Rate}}{{item.SingleVisa.Way==1?$t('objFill.v101.FinancialModule.yuanren'):'%'}}</span></span>
                          <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span>{{item.SingleVisa.Commission}}</span></span>
                        </div>
                      </div>
                      <div style="margin-left: 40px;">
                        <div class="commissionProjectZL">
                          <span class="ProjectTitle">
                            <span></span></span>
                        </div>
                        <p>{{$t('objFill.v101.Rest.tuanduiqianz')}}</p>
                        <div class="groupTourOrder">
                          <span>{{$t('objFill.v101.Rest.qianzhengrens')}}：<span>{{item.TravelVisa.VisaNum}}</span></span>
                          <span>{{$t('fnc.danjia')}}：<span>{{item.TravelVisa.Rate}}{{item.TravelVisa.Way==1?$t('objFill.v101.FinancialModule.yuanren'):'%'}}</span></span>
                          <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span>{{item.TravelVisa.Commission}}</span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="commissionProject" style="display: flex;flex-wrap: wrap;border: 0;"
                  v-if="(isVisa&&!isBranchCompany)&&!index">
                  <div>
                    <div style="display: flex;">
                      <div>
                        <div class="commissionProjectZL">
                          <span class="ProjectTitle">{{$t('objFill.v101.zhulijianli')}}
                          </span>
                        </div>
                        <p>{{$t('objFill.v101.xiltxbzlioprent')}}</p>
                        <div class="groupTourOrder">
                          <span>{{$t('visa.v_teamnum')}}：<span>{{ZLOPAward.TravelPeopleNum}}</span></span>
                          <span>{{$t('fnc.danjia')}}：<span>{{ZLOPAward.TravelUnitPrice}}{{$t('objFill.v101.FinancialModule.yuanren')}}</span></span>
                          <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span>{{ZLOPAward.TravelCommission}}</span></span>
                        </div>
                      </div>
                      <div style="margin-left: 40px;">
                        <div class="commissionProjectZL">
                          <span class="ProjectTitle">
                            <span></span></span>
                        </div>
                        <p>{{$t('objFill.v101.luodsdxrtjli')}}</p>
                        <div class="groupTourOrder">
                          <span>{{$t('objFill.v101.traveltrip.ddrenshu')}}：<span>{{ZLOPAward.SinglePeopleNum}}</span></span>
                          <span>{{$t('fnc.danjia')}}：<span>{{ZLOPAward.SingleUnitPrice}}{{$t('objFill.v101.FinancialModule.yuanren')}}</span></span>
                          <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span>{{ZLOPAward.SingleCommission}}</span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div style="display: flex;margin: 10px 0 10px 0;" v-if="isVisa">
            <div class="CommissionLadder Line"
              style="width: 100%;margin: 0 0 0 0;padding: 16px 20px 0 20px;flex-shrink: 0;">
              <div style="display: flex;justify-content: space-between;">
                <span style="font-weight: bold;font-size: 16px;">{{$t('objFill.guoneitc')}}
                  <span style="font-size: 13px;color: red;margin-left: 20px;">
                    {{$t('objFill.v101.Rest.zhugntcxjth')}}</span>
                </span>
                <div>
                  <!-- <detailsButtom :type="2" :obj="commissionMsg" :Month="Month"/> -->
                </div>
              </div>
              <p style="padding: 0 0 10px 0;text-align: left;"></p>
              <div class="ExpectedCommission-table">
                <el-table border ref="multipleTable" :data="isExpansion?newRlistAll:newRlist">
                  <el-table-column width="80" prop="RuleName" :label="$t('objFill.v101.commissonBill.col.t3')" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.RuleName}}
                    </template>
                  </el-table-column>
                  <el-table-column width="70" prop="OrderNum" :label="$t('objFill.v101.FinancialModule.dindanshu')">
                    <template slot-scope="scope">
                      {{scope.row.OrderNum?scope.row.OrderNum:scope.row.OrderNum}}
                    </template>
                  </el-table-column>
                  <el-table-column width="70" prop="PeopleNum" :label="$t('objFill.baomingshu')">
                    <template slot-scope="scope">
                      {{scope.row.PeopleNum?scope.row.PeopleNum:scope.row.PeopleNum}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="Way" :label="$t('objFill.tichengfanshi')">
                    <template slot-scope="scope">
                      {{scope.row.Way==2?$t('objFill.v101.Rest.liruntic'):$t('objFill.rentoujianli')}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="ProfitRate" :label="$t('salesModule.Commission')" width="60">
                    <template slot-scope="scope">
                      <template v-if="scope.row.Way==1">
                        {{scope.row.Money+'/'+$t('hotel.hotel_people')}}
                      </template>
                      <template v-if="scope.row.Way==2">
                        {{scope.row.ProfitRate+'%'}}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column prop="Profit" :label="$t('objFill.yuqilirun')" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.Way==2&&scope.row.Profit?scope.row.Profit:'-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="Commission" :label="$t('objFill.v101.Rest.yuqitic')" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.Commission}}
                    </template>
                  </el-table-column>
                </el-table>
                <div style="color: red;font-size: 12px;text-align: right;padding: 0;">
                  <span style="cursor: pointer;display: inline-block;padding: 10px 5px;"
                    @click="isExpansion=!isExpansion">
                    {{isExpansion?$t('fnc.shouqi'):$t('fnc.zhankai')}}
                    <i :class="[isExpansion?'el-icon-arrow-up':'el-icon-arrow-down']"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="ExpectedCommission-form">
            <!-- 未平账单 -->
            <div class="OpenOrder">
              <div class="OpenOrderMore">
                <div>{{$t('objFill.v101.FinancialModule.weiwangjt')}}</div>
                <span @click="goMore" style="cursor: pointer;">{{$t('pub.more')}}<i class="el-icon-d-arrow-right"></i> </span>
              </div>
              <OrderList :OrderList="OrderList"></OrderList>
            </div>
            <div style="display: flex;justify-content: space-between;">
              <div style="padding: 10px 0 0 0;color: #E95252;line-height: 30px;width: 50%;white-space: wrap;">
                <p style="font-weight: bold;">{{$t('pub.pubRemark')}}:</p>
                1.{{$t('objFill.v101.zhangwpbeiz')[0]}}</br>
                2.{{$t('objFill.v101.zhangwpbeiz')[1]}}</br>
                3.{{$t('objFill.v101.zhangwpbeiz')[2]}}</br>
                4.{{$t('objFill.v101.zhangwpbeiz')[3]}}</br>
                5.{{$t('objFill.v101.zhangwpbeiz')[4]}}</br>
                6.{{$t('objFill.v101.zhangwpbeiz')[5]}}</br>
                7.{{$t('objFill.v101.zhangwpbeiz')[6]}}</br>
                8.{{$t('objFill.v101.zhangwpbeiz')[7]}}</br>
              </div>
              <div
                style="display: none; padding: 10px 0 0 0;color: #E95252;line-height: 30px;width: 50%;white-space: wrap;">
                <p style="font-weight: bold;">{{$t('objFill.v101.Rest.guanyutcfflcbctz')}}：</p>
                <p>{{$t('objFill.v101.tichengasfa')}}：</p>
                1.{{$t('objFill.v101.guanyutcfflcguizbz')[0]}}</br>
                2.{{$t('objFill.v101.guanyutcfflcguizbz')[1]}}</br>
                3.{{$t('objFill.v101.guanyutcfflcguizbz')[2]}}</br>
                4.{{$t('objFill.v101.guanyutcfflcguizbz')[3]}}</br>
                5.{{$t('objFill.v101.guanyutcfflcguizbz')[4]}}</br>
              </div>
            </div>



          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import leftNav from '../public/leftNav.vue'
  import progressComm from './components/progressComm'
  import OrderList from './components/OrderList'
  import detailsButtom from './components/details'
  export default {
    data() {
      return {
        isView: false,
        userInfo: {},
        isBranchCompany: false,
        isVisa: false,
        jianjin: 0,
        yuqiticheng: 0,
        groupNum: 0,
        OrderNum: 0,
        EopleNum: 0,
        defaultHeadImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        data: {},
        loading: true,
        ZLOPAward: {},
        dataRlueList: [],
        EditBtn: false,
        CurrentUserInfo: {},
        zoom: 1,
        isExpansion: false,
        CommissionJJ: 0,
        CommissionTC: 0,
        GNOrderNum: 0,
        GNEopleNum: 0,
        GNCommission: 0,
        newRlist: [],
        newRlistAll: [],
        DomesticLine: {},
        msg: {
          Month: ''
        },
        Month: 1,
        MonthList: [{
            Name: this.$t('objFill.v101.activity.shangyue'),
            Id: '0'
          },
          {
            Name: this.$t('objFill.v101.activity.dangyue'),
            Id: '1'
          },
        ],
        CommissionInfor: {},
        OrderList: [],
        Year: "",
        Year2: "",
        YearTime: '',
        LastMonthTime: '',
        MonthTime: '',
        commissionMsg: {
          pageIndex: 1,
          pageSize: 6,
          OrderId: "", //订单id
          GuestId: 0, //客人id
          EnterId: 0, //业务员id
          OrderState: '1', //订单状态
          Q_IsCollect: "2", //收款状态
          StartTime: "", //报名开始日期
          EndTime: "", //报名结束日期
          FinishSTime: "", //完结开始时间
          FinishETime: "", //完结结束时间
          DepartSTime: "", //出发开始
          DepartETime: "", //出发结束
          TCNUM: "", //团号
          ProductName: "", //商品名称
          CustomerName: "", //客户名称
          LureEmpId: 0, //引流人员
          LineId: 0, //线路
          TravelType: 0, //跟团类型 1跟团 2当地游
          OrderType: "0", //订单类型
          IsSelectCRM: 0, //1来源crm
          IsMyOrder: 1, //1我的订单
        },
        isAnnualBonus: false, // 年终奖权限
      }
    },
    components: {
      leftNav,
      progressComm,
      OrderList,
      detailsButtom
    },
    methods: {
      // 销售预期提成
      goAnticipate(type) {
        let userInfo = this.getLocalStorage();
        let name
        if (type == 1) { //出境
          name = 'OPCommissionDetail'
        } else if (type == 2) { //国内
          name = 'OPsalesCommissionUser'
        } else if (type == 3) { //历史单项
          name = 'ServiceCommissionUser'
        }
        this.$router.push({
          name: name,
          query: {
            UserId: Number(userInfo.EmployeeId),
            Type: 2,
            blank: 'y'
          }
        });
      },

      goMore() {
        this.$router.push({
          name: 'TravelControlList',
          query: {
            blank: 'y',
          }
        });
      },
      clickActive(item) {
        this.Month = item.Id
        if (item.Id == 1) {
          this.msg.Month = this.Year + '-' + (this.MonthTime >= 10 ? this.MonthTime : '0' + this.MonthTime)
        } else {
          if (this.LastMonthTime == 12) this.msg.Month = this.Year2 + '-' + (this.LastMonthTime >= 10 ? this
            .LastMonthTime : '0' + this.LastMonthTime)
          else this.msg.Month = this.Year + '-' + (this.LastMonthTime >= 10 ? this.LastMonthTime : '0' + this
            .LastMonthTime)
        }
        this.getList()
      },
      // 获取提成列表数据
      getList() {
        this.loading = true
        this.apipost("opcommission_GetOPExpectCommission", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.OrderNum = 0
            this.groupNum = 0
            this.EopleNum = 0
            this.jianjin = 0
            this.yuqiticheng = 0
            this.dataRlueList = res.data.data.RlueList
            this.dataRlueList.forEach(item => {
              this.groupNum += item.TravelAward.TravelNum;
              if (item.PeopleAward && item.PeopleAward.TravelNum) {
                this.groupNum += item.PeopleAward.TravelNum;
              }

              if (item.SingleVisa.Way == 1) {
                this.EopleNum += item.SingleVisa.PeopleNum
              }
              if (item.SingleVisa.Way == 1) {
                this.OrderNum += item.SingleVisa.OrderNum
              }

              this.jianjin += (item.TravelAward.AwardMoney * 100)
              this.yuqiticheng += (item.SingleVisa.Commission * 100)
              this.yuqiticheng += (item.TravelVisa.Commission * 100);
              if (item.PeopleAward && item.PeopleAward.Commission) {
                this.yuqiticheng += (item.PeopleAward.Commission * 100);
              }
              item.BranchList.forEach(s => {
                this.groupNum += s.TravelNum
                this.OrderNum += s.SingleOrderNum
                this.yuqiticheng += (s.Commission * 100)
              })
              if (item.PeopleAward && item.PeopleAward.PeopelNum) {
                this.EopleNum += item.PeopleAward.PeopelNum
              }
            })
            this.ZLOPAward = res.data.data.ZLOPAward
            this.EopleNum += this.ZLOPAward.TravelPeopleNum
            this.EopleNum += this.ZLOPAward.SinglePeopleNum
            this.yuqiticheng += (this.ZLOPAward.TravelCommission * 100)
            this.yuqiticheng += (this.ZLOPAward.SingleCommission * 10)
            this.yuqiticheng = this.yuqiticheng / 100
            this.jianjin = this.jianjin / 100
            this.GetGNSaleExpectCommission()
          } else {
            this.Error(res.data.message)
          }

        })
      },
      GetGNSaleExpectCommission() {
        // 国内提成
        this.apipost('opcommission_Post_GetGNOPExpectCommission', this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.DomesticLine = res.data.data
              // this.GNOrderNum = 0
              // this.GNEopleNum = 0
              this.GNCommission = 0
              this.DomesticLine.Rlist.forEach(item => {
                // this.GNOrderNum+=Number(item.OrderNum)
                // this.GNEopleNum+=Number(item.PeopleNum)
                this.GNCommission += Number(item.Commission)
              })

              this.newRlistAll = [
                this.DomesticLine.Rlist[2],
                this.DomesticLine.Rlist[3],
                this.DomesticLine.Rlist[4],
                this.DomesticLine.Rlist[0],
                this.DomesticLine.Rlist[1]
              ]
              this.newRlist = [this.DomesticLine.Rlist[2]]
              let arr1 = [this.jianjin]
              let arr2 = [this.GNCommission, this.yuqiticheng]
              this.CommissionJJ = this.CalculatePrice(arr1, 0)
              this.CommissionTC = this.CalculatePrice(arr2, 2)
              this.loading = false;
            } else {
              this.loading = false;
            }
          }, err => {
            this.loading = false
          })
      },
      // 未结团数据
      GetOrderPageList() {
        this.apipost('opcommission_GetOPNotGroupOutTravelList', {},
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data ? res.data.data : []
              if (data && data.length > 5) {
                for (let i = 0; i < 5; i++) {
                  this.OrderList.push(data[i])
                }
              } else {
                this.OrderList = data
              }
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        )

      },
      // 近期提成
      iWorkbench() {
        this.apipost('opcommission_GetLatelyOPCommission', {}, res => {
          if (res.data.resultCode == 1) {
            this.data = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})

      },
      //计算总成本
      CalculatePrice(arr1, num) {
        var CoastPrice = this.$commonUtils.CaluJsonArraySum2(
          arr1,
          num
        );
        return CoastPrice > 0 ? CoastPrice : 0
      },
      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.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
        })()
      }

      let userInfo = this.getLocalStorage();
      this.userInfo = userInfo
      if (userInfo.PostName.indexOf('签证') == -1) {
        this.isVisa = true
      }
      if (userInfo.RB_Branch_id > 0) {
        this.isBranchCompany = true
      }
      // 年终奖权限 销售，  引流， 市场， 票务 ， 票務，总经理，总经理
      if (userInfo.PostName.indexOf('销售') || userInfo.PostName.indexOf('引流') ||
        userInfo.PostName.indexOf('市场，') || userInfo.PostName.indexOf('票务') ||
        userInfo.PostName.indexOf('票務') || userInfo.PostName.indexOf('总经理') ||
        userInfo.PostName.indexOf('总经理')) {
        this.isAnnualBonus = true
      }
      let nowdays = new Date()
      this.Year = new Date().getFullYear()
      this.Year2 = new Date().getFullYear() - 1
      this.LastMonthTime = new Date().getMonth()
      this.LastMonthTime = this.LastMonthTime == 0 ? 12 : this.LastMonthTime
      this.MonthTime = new Date().getMonth() + 1
      this.msg.Month = this.Year + '-' + (this.MonthTime >= 10 ? this.MonthTime : '0' + this.MonthTime)
      this.MonthList[0].Name = this.MonthList[0].Name + '(' + this.LastMonthTime + this.$t('pub.month')+')'
      this.MonthList[1].Name = this.MonthList[1].Name + '(' + this.MonthTime + this.$t('pub.month')+')'

      this.commissionMsg.DepartSTime = this.getBeforeDate(93, this.getBeforeDate(0, new Date().Format("yyyy-MM-dd")))
      var MonthDayNum = new Date(this.Year, this.MonthTime, 0).getDate(); //计算当月的天数
      this.commissionMsg.DepartETime = this.Year + '-' + (this.MonthTime >= 10 ? this.MonthTime : '0' + this
          .MonthTime) +
        '-' + (MonthDayNum > 10 ? MonthDayNum : '0' + MonthDayNum) //出发结束
      this.iWorkbench()
      this.GetOrderPageList()
      this.getList()
    },

  }

</script>