<style scoped>
  .ExpectedCommission-form{
    padding: 10px 20px 0 20px;
  }
  .groupTourOrder{
    display: flex;
    flex-wrap: nowrap;
    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 span{
    color: red;
  }
  .CommissionLadder-form{
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px;
    /* margin-bottom: 10px; */
  }
  .CommissionLadder{
    flex: 1;
    padding: 16px 20px 20px 20px;

    background: #ffffff;
  }
  .CommissionLadder.Line{
    margin: 0 0 10px 0;

  }
  .border-bottom{
    border-bottom: 1px dashed #BDBDBD;
  }
  .CommissionLadder .title{
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 5px 0;
    display: flex;
    justify-content: space-between;
  }
  .CommissionLadder p {
    padding: 5px 0 0px 0;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
  }
  .CommissionLadder p span:last-child{
    color: red;
  }
  .CommissionInfor{
    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;
  }
  .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{
    display: flex;
  }
  .headerTitle p{
    font-weight: bold;
  }
  .headerTitle span{
    font-weight: 100;
    color: red;
    margin-right: 20px;
  }
  /deep/.ExpectedCommission-table .cell{
    padding: 0 !important;
    text-indent: 10px;
  }
  /deep/.ExpectedCommission-table .el-table .el-table__cell{
    padding: 0 !important;
  }
  /deep/.ExpectedCommission-table .has-gutter .el-table__cell{
    padding: 7px 0 !important;
  }

  .tableTd{
    line-height: 30px;
    border-bottom: 1px solid #DEE1E6;
  }
  .tableTd+ div{
    line-height: 30px;
  }
  .BonusY{
    width: 80px;
  }
  /deep/.BonusY .el-input .el-input__inner {
    border: 0px !important;
  }
</style>
<template>
  <div style="height: 92vh;overflow-y: scroll;">
    <div style="display: flex;align-items: center; justify-content: space-between;background: #fff;
    height: 40px;padding: 0 20px;">
      <div class="headerTitle">
        <template v-if="CommissionInfor">
        <!-- <p>{{$t('objFill.zongticeng')}}：<span>{{CommissionInfor.TotalCMoney}}</span></p> -->
        <p>{{$t('objFill.v101.activity.zongdindans')}}：<span>{{CommissionInfor.OtherOrderNum+CommissionInfor.SalesOrderNum+CommissionInfor.JapanOrderNum+CommissionInfor.EuropeOrderNum+GNOrderNum}}</span></p>
        <p>{{$t('objFill.v101.Rest.zongrntous')}}：<span>{{CommissionInfor.OtherPeopleNum+CommissionInfor.OtherPNum+CommissionInfor.PeopleNum+CommissionInfor.EuropePNum+CommissionInfor.SalesPeopleNum+CommissionInfor.JapanPeopleNum+CommissionInfor.EuropePeopleNum+GNEopleNum}}</span></p>
        <p>{{$t('objFill.v101.Rest.zongyuqijianj')}}：<span>{{CommissionJJ}}</span></p>
        <p>{{$t('objFill.v101.Rest.zongyuqitic')}}：<span>{{CommissionTC}}</span></p>
        </template>
      </div>
      <div style="display: flex;align-items: center;">
        <!-- <i class="el-icon-chat-dot-square"
        style="cursor: pointer;color: #33B3FF;font-size: 31px;margin-right: 10px;"
        @click="rightOpen=true"></i> -->
        <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>

    <div class="CommissionLadder-form">
      <div style="display: flex;justify-content: space-between; width: 100%;">
        <div style="display: flex;flex-direction: column;flex-grow: 2;">
          <div class="CommissionLadder-form" style="margin: 20px 0 10px 0;">
            <div class="CommissionLadder" style="padding: 15px 20px 20px 0;">
              <div style="display: flex;align-items: center;justify-content: space-between; padding: 0 0 10px 20px;
              ">
              <span style="font-size: 16px;font-weight: bold;">{{$t('objFill.v101.FinancialModule.gongssygnxds')}}</span>
                <div>
                  <detailsButtom :type="1" :obj="commissionMsg" :Month="Month"/>
                </div>
              </div>
              <div class="groupTourOrder">
                  <span>{{$t('objFill.xiaosoue')}}：<span>{{CommissionInfor.SalesMoney}}</span></span>
                  <span>{{$t('objFill.v101.FinancialModule.dindanshu')}}：<span>{{CommissionInfor.SalesOrderNum}}</span></span>
                  <span>{{$t('fnc.retoushu')}}：<span>{{CommissionInfor.SalesPeopleNum}}</span></span>
                  <span>{{$t('objFill.v101.FinancialModule.tichengbil')}}：<span>{{CommissionInfor.SalesRate}}%</span></span>
                  <span>{{$t('objFill.v101.Rest.yuqitic')}}：<span>{{CommissionInfor.SalesCommission}}</span></span>
              </div>
            </div>
            <div v-if="CommissionInfor.TaskNum>0">&nbsp;&nbsp;&nbsp;</div>
            <div v-if="CommissionInfor.TaskNum>0">
              <div class="CommissionLadder" style="padding: 15px 20px 20px 0;">
              <div style="display: flex;align-items: center;justify-content: space-between; padding: 0 0 10px 20px;
              ">
              <span style="font-size: 16px;font-weight: bold;"><span style="color: #E95252;">*New</span> {{$t('objFill.v101.Rest.chengdxltkoz')}} {{CommissionInfor.TaskNum}}{{$t('objFill.v101.Rest.renshaozan')}} {{CommissionInfor.TaskUintMoney}}{{$t('objFill.v101.Rest.yuanfakuan')}}  &nbsp;&nbsp;&nbsp;&nbsp;</span>
              </div>
              <div class="groupTourOrder">
                  <span>{{$t('active.cl_sxriqi')}}：<span>{{CommissionInfor.EnableDate}}</span></span>
                  <span>{{$t('objFill.v101.administrative.shoukerenshu')}}：<span>{{CommissionInfor.FinishNum}}</span></span>
                  <span>{{$t('objFill.v101.Rest.fakuanjine')}}：<span>{{CommissionInfor.DonationsMoney}}</span></span>
              </div>
            </div>
            </div>
          </div>
          <div style="padding: 5px 0 5px 0;text-align: right;color: red;">
            {{$t('objFill.v101.Rest.zhuysyyrhjtde')}}
          </div>
          <div style="display: flex;">
            <div class="CommissionLadder Line border-bottom" style="margin: 0 0 0 0;">
              <div class="title">
                <span>{{$t('objFill.v101.Rest.ribenxxbtdxtc')}}</span>
              </div>
              <p>{{$t('objFill.v101.Rest.dangyuegrmlr')}}</p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.FinancialModule.dindanshul')}}：<span>{{CommissionInfor.JapanOrderNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.JapanPeopleNum}}</span>
                </span>
                <span>
                  {{$t('objFill.yuqilirun')}}：<span>{{CommissionInfor.JapanProfit}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqibili')}}：<span>{{CommissionInfor.JapanRate}}%</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqitic')}}：<span>{{CommissionInfor.JapanCommission}}</span>
                </span>
                <span v-if="CommissionInfor.JapanReissueCommission && CommissionInfor.JapanReissueCommission!=0">
                  {{$t('objFill.v101.Rest.bufawanqitc')}}：<span>{{CommissionInfor.JapanReissueCommission}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="JapaneseProfit"></progressComm>
              </div>
            </div>
            <div class="CommissionLadder Line border-bottom" style="margin: 0 10px 0 10px;">
              <div class="title">
                <span>{{$t('objFill.v101.Rest.ouzhouxxbtdxtc')}}</span>
              </div>
              <p>{{$t('objFill.v101.Rest.dangyuegrmlr')}}</p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.FinancialModule.dindanshul')}}：<span>{{CommissionInfor.EuropeOrderNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.EuropePeopleNum}}</span>
                </span>
                <span>
                  {{$t('objFill.yuqilirun')}}：<span>{{CommissionInfor.EuropeProfit}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqibili')}}：<span>{{CommissionInfor.EuropeRate}}%</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqitic')}}：<span>{{CommissionInfor.EuropeCommission}}</span>
                </span>
                <span v-if="CommissionInfor.EuropeReissueCommission && CommissionInfor.EuropeReissueCommission!=0">
                  {{$t('objFill.v101.Rest.bufawanqitc')}}：<span>{{CommissionInfor.EuropeReissueCommission}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="EuropeProfit"></progressComm>
              </div>
            </div>
            <div class="CommissionLadder Line border-bottom" style="margin: 0 0 0 0;">
              <div class="title">
                <span>{{$t('objFill.v101.Rest.qitxxblddxtic')}}</span>
              </div>
              <p>{{$t('objFill.v101.Rest.dangyuegrmlr')}}</p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.FinancialModule.dindanshul')}}：<span>{{CommissionInfor.OtherOrderNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.OtherPeopleNum}}</span>
                </span>
                <span>
                  {{$t('objFill.yuqilirun')}}：<span>{{CommissionInfor.OtherProfit}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqibili')}}：<span>{{CommissionInfor.OtherRate}}%</span>
                </span>
                <span>
                  {{$t('objFill.v101.Rest.yuqitic')}}：<span>{{CommissionInfor.OtherCommission}}</span>
                </span>
                <span v-if="CommissionInfor.OtherReissueCommission && CommissionInfor.OtherReissueCommission!=0">
                  {{$t('objFill.v101.Rest.bufawanqitc')}}：<span>{{CommissionInfor.OtherReissueCommission}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="OtherProfit"></progressComm>
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <div class="CommissionLadder Line" style="margin: 0 0 10px 0;">
              <p><span>{{$t('objFill.v101.Rest.dangyuertjlbhmp')}}</span><span></span></p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.PeopleNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.FinancialModule.jiangli')}}：<span>{{CommissionInfor.PeopleMoney}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="JapaneseLine"></progressComm>
              </div>
            </div>
            <div class="CommissionLadder Line" style="margin: 0 0 10px 10px;">
              <p><span>{{$t('objFill.v101.Rest.dangyuertjlbhmp')}}</span><span></span></p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.EuropePNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.FinancialModule.jiangli')}}：<span>{{CommissionInfor.EuropeMoney}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="EuropeLine"></progressComm>
              </div>
            </div>
            <div class="CommissionLadder Line" style="margin: 0 0 10px 10px;">
              <p><span>{{$t('objFill.v101.Rest.dangyuertjlbhmp')}}</span><span></span></p>
              <div class="CommissionInfor">
                <span>
                  {{$t('objFill.v101.Rest.rentouslian')}}：<span>{{CommissionInfor.OtherPNum}}</span>
                </span>
                <span>
                  {{$t('objFill.v101.FinancialModule.jiangli')}}：<span>{{CommissionInfor.OtherMoney}}</span>
                </span>
              </div>
              <div>
                <progressComm :commissionratioList="OtherLine"></progressComm>
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <div class="CommissionLadder Line" style="margin: 0;" v-if="isAnnualBonus">
              <div style="display: flex;justify-content: space-between;">
               <span>{{CommissionInfor.BonusDate}}{{$t('objFill.v101.Rest.nianzjbhmp')}}</span>
               <div>
                <el-select class="BonusY" v-model="msg.BonusYear" :placeholder="$t('pub.pleaseSel')" @change="getList()">
                  <el-option key="2024" label="2024" value="2024"></el-option>
                  <el-option key="2025" label="2025" value="2025"></el-option>
                </el-select>
                </div>
              </div>
              <p style="padding: 0 0 10px 0;text-align: left;"><span style="font-size: 13px;color: red;">{{$t('objFill.v101.Rest.zhunianzmnsyyqi')}}</span></p>
              <div class="CommissionInfor">
                <span @click="IsYearBonus=true" style="cursor: pointer;">{{$t('objFill.v101.Rest.daibiao')}} <span style="margin-left: 5px;margin-right: 5px;">{{CommissionInfor.BonusNum}}</span>{{$t('objFill.v101.Rest.geyuedcckan')}}</span>
                <span><span>{{$t('objFill.v101.Rest.meiyuerens')}}{{CommissionInfor.BonusMinPNum}}{{$t('objFill.v101.FinancialModule.renyishang')}}</span><span v-if="CommissionInfor.TaskNum>0">,{{$t('objFill.v101.Rest.bingqie')}} {{CommissionInfor.EnableDate}}{{$t('objFill.v101.Rest.qiozcpskxdad')}}  {{CommissionInfor.TaskNum}}{{$t('hotel.hotel_people')}}*New</span></span>
              </div>
              <div>
                <progressComm :commissionratioList="AnnualBonus"></progressComm>
              </div>
            </div>
            <div class="CommissionLadder Line" style="margin: 0 0 0 10px;padding: 16px 20px 0 20px;">
              <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('scen.sc_temStatu')">
                  <template slot-scope="scope">
                    <div class="tableTd">{{$t('objFill.yijietuan')}}</div>
                    <div>
                      {{$t('objFill.weijietuan')}}
                    </div>
                  </template>
                  </el-table-column>
                  <el-table-column width="70" prop="OrderNum"
                  :label="$t('objFill.v101.FinancialModule.dindanshu')">
                  <template slot-scope="scope">
                    <div class="tableTd">{{scope.row.OrderNum?scope.row.OrderNum:scope.row.OrderNum}}</div>
                    <div>
                      {{scope.row.WaitOrderNum?scope.row.WaitOrderNum:scope.row.WaitOrderNum}}
                    </div>
                  </template>
                  </el-table-column>
                  <el-table-column width="70" prop="PeopleNum"
                  :label="$t('objFill.baomingshu')">
                  <template slot-scope="scope">
                    <div class="tableTd">{{scope.row.PeopleNum?scope.row.PeopleNum:scope.row.PeopleNum}}</div>
                    <div>
                      {{scope.row.WaitPeopleNum?scope.row.WaitPeopleNum:scope.row.WaitPeopleNum}}
                    </div>
                  </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>
                      <!-- <p v-if="scope.row.Way == 2" style="font-size: 12px;color: #999999;white-space: wrap;">
                        利润比{{scope.row.ProfitRate}}%
                        利润<={{$t('objFill.v101.FinancialModule.shi')}} {{scope.row.Money}}{{$t('objFill.v101.FinancialModule.yuanren')}}</p> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="Profit"
                  :label="$t('objFill.yuqilirun')" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <div class="tableTd">{{scope.row.Way==2&&scope.row.Profit?scope.row.Profit:'-'}}</div>
                      <div>
                        {{scope.row.Way==2&&scope.row.WaitProfit?scope.row.WaitProfit:'-'}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="Commission"
                  :label="$t('objFill.v101.Rest.yuqitic')" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div class="tableTd">{{scope.row.Commission}}</div>
                    <div>
                      {{scope.row.WaitCommission}}
                    </div>
                  </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>

      </div>
    </div>
    <div class="ExpectedCommission-form">
      <!-- 未平账单 -->
      <div class="OpenOrder">
        <div class="OpenOrderMore">
          <div>{{$t('objFill.v101.Rest.zhangweipdd')}}</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('objFill.v101.Rest.chujticts')}}：</p>
          <span>{{$t('objFill.zhuyi')}}：{{$t('objFill.v101.Rest.chongsyyyrhjt')}}</span></br>
          1.{{$t('objFill.v101.Rest.xiaosoutcguiz')[0]}}</br>
          2.{{$t('objFill.v101.Rest.xiaosoutcguiz')[1]}}</br>
          3.{{$t('objFill.v101.Rest.xiaosoutcguiz')[2]}}</br>
          4.{{$t('objFill.v101.Rest.xiaosoutcguiz')[3]}}</br>
          5.{{$t('objFill.v101.Rest.xiaosoutcguiz')[4]}}</br>
          6.{{$t('objFill.v101.Rest.xiaosoutcguiz')[5]}}</br>
          7.{{$t('objFill.v101.Rest.xiaosoutcguiz')[6]}}</br>
          8.{{$t('objFill.v101.Rest.xiaosoutcguiz')[7]}}</br>
          9.{{$t('objFill.v101.Rest.xiaosoutcguiz')[8]}}</br>
          10.{{$t('objFill.v101.Rest.xiaosoutcguiz')[9]}}</br>
          11.{{$t('objFill.v101.Rest.xiaosoutcguiz')[10]}}</br>
          12.{{$t('objFill.v101.Rest.xiaosoutcguiz')[11]}}</br>
          13.{{$t('objFill.v101.Rest.xiaosoutcguiz')[12]}}</br>
          14.{{$t('objFill.v101.Rest.xiaosoutcguiz')[13]}}</br>
          15.{{$t('objFill.v101.Rest.xiaosoutcguiz')[14]}}</br>
          16.{{$t('objFill.v101.Rest.xiaosoutcguiz')[15]}}</br>



        </div>
        <div style="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.Rest.ticanffsgs')}}：</p>
          1.{{$t('objFill.v101.Rest.fafangtcbcgz')[0]}}</br>
          2.{{$t('objFill.v101.Rest.fafangtcbcgz')[1]}}</br>
          3.{{$t('objFill.v101.Rest.fafangtcbcgz')[2]}}</br>
          4.{{$t('objFill.v101.Rest.fafangtcbcgz')[3]}}</br>
          5.{{$t('objFill.v101.Rest.fafangtcbcgz')[4]}}</br>
          6.{{$t('objFill.v101.Rest.fafangtcbcgz')[5]}}</br>
        </div>
      </div>



    </div>

    <el-dialog :visible.sync="IsYearBonus" width="686px" :title="$t('objFill.v101.FinancialModule.nianzmx')">
      <div style="height:320px;">
        <table style=" border: 1px solid black;border-collapse: collapse; text-align: center; width: 100%;">
                <tr style="border: 1px solid black">
                  <th style="border: 1px solid black">{{$t('ground.yuefen')}}</th>
                  <th style="border: 1px solid black">{{$t('objFill.v101.FinancialModule.huizrs')}}</th>
                  <th style="border: 1px solid black">{{$t('visa.v_teamnum')}}</th>
                  <th style="border: 1px solid black">{{$t('objFill.v101.FinancialModule.danxiangrs')}}</th>
                  <th style="border: 1px solid black">{{$t('objFill.v101.Rest.ouzhourshu')}}</th>
                </tr>
                  <tr v-for="item in CommissionInfor.BonusPeriods" style="border: 1px solid black">
                    <td style="border: 1px solid black">{{item.TradeDate}}</td>
                    <td style="border: 1px solid black"><span :style="item.GuestNum>=35?'color:red':'color:black'">{{item.GuestNum}}</span></td>
                    <td style="border: 1px solid black">{{item.TravelNum}}</td>
                    <td style="border: 1px solid black">{{item.VisaNum}}</td>
                    <td style="border: 1px solid black">{{item.EuNum}}</td>
                  </tr>
          </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import OrderList from './components/OrderList'
  import detailsButtom from './components/details'
  // import OrderList from '../myOrdersAllType/components/OrderList'
  import progressComm from './components/progressComm'
  export default {
    components: {
      OrderList,
      progressComm,
      detailsButtom
    },
    data() {
      return {
        jianjinNum: 0,
        isExpansion: false,
        CommissionJJ:0,
        CommissionTC:0,
        GNOrderNum:0,
        GNEopleNum:0,
        GNCommission:0,
        newRlist:[],
        newRlistAll:[],
        DomesticLine:{},
        IsYearBonus:false,
        AnnualBonus:{//年终奖
          type:3,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        OtherProfit:{//其他毛利润
          type:2,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        OtherLine:{//其他人头奖励
          type:1,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        EuropeProfit:{//欧洲毛利润
          type:2,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        EuropeLine:{//欧洲人头奖励
          type:1,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        JapaneseProfit:{//日本毛利润
          type:2,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        JapaneseLine:{//日本人头奖励
          type:1,
          AvgLureNum:0,
          AvfOrderNum:0,
          CommissionRate:0,
          Commission: 0,
          CommissionProfit: 0,
          CommissionRateList:[]
        },
        dataRuleList:[],
        rightOpen: false,
        msg:{
          Month: '',
          BonusYear:'2024'
        },
        Month: 1,
        MonthList:[
          {Name: this.$t('objFill.v101.activity.shangyue'),Id:'0'},
          {Name: this.$t('objFill.v101.activity.dangyue'),Id:'1'},
        ],
        CommissionInfor:{},
        OrderList: [],
        loading: true,
        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,// 年终奖权限
      };
    },
    mounted() {
      this.getList()
    },
    created() {
      let userInfo = this.getLocalStorage();
      // 年终奖权限 销售，  引流， 市场， 票务 ， 票務，总经理，总经理
      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.MonthList[1].Name = this.MonthList[1].Name+'('+this.MonthTime+'月)'

      //this.Year+'-'+(this.MonthTime>=10?this.MonthTime:'0'+this.MonthTime)+'-01'//出发开始
      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.GetOrderPageList()
    },
    methods: {
      goMore(){
        this.$router.push({
          name: 'erpMyCustomerOrder',
          query: {
            blank: 'y',
            Q_IsCollect: "2",
            DepartSTime: this.commissionMsg.DepartSTime,
            DepartETime: this.commissionMsg.DepartETime
          }
        });
      },
      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()
        // this.getData()
      },
      // 获取规则列表数据
      getList() {
        this.apipost("sellcommission_GetTYSaleCommissionRuleList", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataRuleList = res.data.data[0];
            this.JapaneseLine.CommissionRateList = this.dataRuleList.AwardRuleList
            this.JapaneseProfit.CommissionRateList = this.dataRuleList.ProfitRuleList
            this.EuropeLine.CommissionRateList = this.dataRuleList.EuropeAwardRuleList
            this.EuropeProfit.CommissionRateList = this.dataRuleList.EuropeProfitRuleList
            this.OtherLine.CommissionRateList = this.dataRuleList.OtherAwardRuleList
            this.OtherProfit.CommissionRateList = this.dataRuleList.OtherProfitRuleList
            this.AnnualBonus.CommissionRateList = this.dataRuleList.BonusRuleList
            this.getData()
          }else{
            this.Error(res.data.message)
          }
        });
      },
      // 获取预期数据
      getData(){
        // 日本欧洲提成
        this.apipost('sellcommission_GetTYSaleExpectCommission', this.msg,
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data
              this.CommissionInfor = data;

              // 日本及其他人头奖励
              this.JapaneseLine.AvgLureNum = this.CommissionInfor.PeopleNum?this.CommissionInfor.PeopleNum:0
              this.JapaneseLine.Commission = this.CommissionInfor.PeopleMoney?this.CommissionInfor.PeopleMoney:0
              // 日本及其他提成比例
              this.JapaneseProfit.AvgLureNum = this.CommissionInfor.JapanCommission?this.CommissionInfor.JapanCommission:0
              this.JapaneseProfit.AvfOrderNum = this.CommissionInfor.JapanOrderNum?this.CommissionInfor.JapanOrderNum:0
              this.JapaneseProfit.CommissionRate = this.CommissionInfor.JapanRate?this.CommissionInfor.JapanRate:0
              this.JapaneseProfit.Commission = this.CommissionInfor.JapanCommission?this.CommissionInfor.JapanCommission:0
              this.JapaneseProfit.CommissionProfit = this.CommissionInfor.JapanProfit?this.CommissionInfor.JapanProfit:0
              // 欧洲人头奖励
              this.EuropeLine.AvgLureNum = this.CommissionInfor.EuropePNum?this.CommissionInfor.EuropePNum:0
              this.EuropeLine.Commission = this.CommissionInfor.EuropeMoney?this.CommissionInfor.EuropeMoney:0
              // 欧洲及其他提成比例
              this.EuropeProfit.AvgLureNum = this.CommissionInfor.EuropeCommission?this.CommissionInfor.EuropeCommission:0
              this.EuropeProfit.AvfOrderNum = this.CommissionInfor.EuropeOrderNum?this.CommissionInfor.EuropeOrderNum:0
              this.EuropeProfit.CommissionRate = this.CommissionInfor.EuropeRate?this.CommissionInfor.EuropeRate:0
              this.EuropeProfit.Commission = this.CommissionInfor.EuropeCommission?this.CommissionInfor.EuropeCommission:0
              this.EuropeProfit.CommissionProfit = this.CommissionInfor.EuropeProfit?this.CommissionInfor.EuropeProfit:0
              // 其他人头奖励
              this.OtherLine.AvgLureNum = this.CommissionInfor.OtherPNum?this.CommissionInfor.OtherPNum:0
              this.OtherLine.Commission = this.CommissionInfor.OtherMoney?this.CommissionInfor.OtherMoney:0
              // 其他提成比例
              this.OtherProfit.AvgLureNum = this.CommissionInfor.OtherCommission?this.CommissionInfor.OtherCommission:0
              this.OtherProfit.AvfOrderNum = this.CommissionInfor.OtherOrderNum?this.CommissionInfor.OtherOrderNum:0
              this.OtherProfit.CommissionRate = this.CommissionInfor.OtherRate?this.CommissionInfor.OtherRate:0
              this.OtherProfit.Commission = this.CommissionInfor.OtherCommission?this.CommissionInfor.OtherCommission:0
              this.OtherProfit.CommissionProfit = this.CommissionInfor.OtherProfit?this.CommissionInfor.OtherProfit:0
              // 年终奖
              this.AnnualBonus.AvgLureNum = this.CommissionInfor.BonusNum?this.CommissionInfor.BonusNum:0
              this.AnnualBonus.AvfOrderNum = this.CommissionInfor.BonusNum?this.CommissionInfor.BonusNum:0

              this.GetGNSaleExpectCommission()
            }else {
              this.Error(res.data.message);
            }
            this.loading = false
          },
          err => {this.loading = false}
        );

      },
      GetGNSaleExpectCommission(){
          // 国内提成
          this.apipost('sellcommission_Post_GetGNSaleExpectCommission', 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.CommissionInfor.OtherMoney,this.CommissionInfor.PeopleMoney,this.CommissionInfor.EuropeMoney]
              let arr2 =[this.CommissionInfor.OtherCommission,this.CommissionInfor.SalesCommission,this.CommissionInfor.JapanCommission,this.CommissionInfor.EuropeCommission,this.GNCommission,this.CommissionInfor.JapanReissueCommission,,this.CommissionInfor.EuropeReissueCommission,,this.CommissionInfor.OtherReissueCommission]
              this.CommissionJJ = this.CalculatePrice(arr1,0)
              this.CommissionTC = this.CalculatePrice(arr2,2)
            }
          })
      },
      GetOrderPageList(){
        this.commissionMsg.IsMyOrder = '1'
        this.apipost('CarSingle_post_GetGuestOrderStatisticsPageList', this.commissionMsg,
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data.pageData
              if(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);
            }
            this.loading = false
          },
          err => {this.loading = false}
        )

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

    }
  };

</script>
