<style>
    .baseSet_Title {
      width: 120px !important;
      padding: 18px 0 0 16px;
      text-align: right;
    }
  
    .userCommissionDetails .border-bottom {
      /* border-bottom: 1px dashed #EEE; */
      padding-bottom: 5px;
      margin-bottom: 5px;
    }
  
    .userCommissionDetails .text-bottom {
      height: 32px;
      line-height: 32px;
      margin-bottom: 10px;
    }
  
    .userCommissionDetails ._icon_btn i.icon-sousuo {
      background-color: #47BF8C;
    }
  
    .userCommissionDetails ._icon_btn i {
      width: 30px;
      height: 30px;
      display: inline-block;
      color: white !important;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      margin-right: 10px;
      cursor: pointer;
      outline: none;
    }
  
    .userCommissionDetails .el-table td,
    .el-table th {
      padding: 5px 0;
    }
  
  </style>
  <template>
    <div class="page-body userCommissionDetails">
      <div class="page-search row items-center">
        <div style="margin-right: 10px;">
          <q-btn color="primary"  size="11px"  label="返回"  @click="goreturn"  style="margin-left:10px" />
        </div>
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-select filled stack-label use-input input-debounce="0" option-value="Id" clearable @input="getList"
              option-label="Name" v-model="msg.SourceId" :options="StudyAbroadList" label="留学/就业" :dense="false" emit-value
              map-options @filter="filterFn">
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    未找到相关数据
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-3">
            <q-input filled v-model="msg.OrderId" @keyup.enter.native="getList()" label="订单号" />
          </div>
        </div>
      </div>
      <template>
        <el-table ref="filterTable" :data="tableData" v-loading='loading'
          :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}" border style="width: 100%">
          <el-table-column prop="SchoolName" width='150' label="校区"></el-table-column>
          <el-table-column prop="DeptName" label="部门"></el-table-column>
          <el-table-column prop="UserName" label="销售"> </el-table-column>
          <el-table-column prop="SourceName" label="项目名称"> </el-table-column>
          <el-table-column width='170' prop="ClassName" label="客人信息">
            <template slot-scope="scope">
              <div v-if="scope.row.SourceType">类型: {{scope.row.SourceType==1?'留学':'就业'}}</div>
              <div v-if="scope.row.StudentCount">客人数量:{{scope.row.StudentCount}}人</div>
            </template>
          </el-table-column>
          <el-table-column prop="OrderId" label="订单号">
            <template slot-scope="scope">
              <div v-if="scope.row.OrderId" style="cursor: pointer;text-decoration: underline;" @click="goUrlorderList('/sale/studyOrderStatistics',scope.row)">
                {{scope.row.OrderId}} 
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CommissionMoney" label="订单提成"></el-table-column>
          <el-table-column prop="OtherMoney" label="额外奖励"></el-table-column>
          <el-table-column prop="BackMoney" label="额外扣除"></el-table-column>
          <el-table-column prop="YFMoney" label="最终发放">
            <template slot-scope="scope">
              <div style="color: rgb(233, 82, 82);">{{scope.row.YFMoney}}</div>
            </template>
          </el-table-column>
          <el-table-column width='90' prop="Periods" label="期数"> </el-table-column>
          <el-table-column prop="Remark" width='160' label="备注"> </el-table-column>
        </el-table>
      </template>
  
    </div>
  </template>
  <script>
    import {
      GetClassTypePageList,
    } from '../../../api/system/index';
    import {
      getSellStudyAbroadUserDetailList,
    } from '../../../api/finance/index'
    import {
      getClassDropDownList,
    } from "../../../api/school/index";
    import {
    queryStudyAbroadPage
  } from '../../../api/studyabroad/index'
    export default {
      meta: {
        title: "留学提成明细"
      },
      props: {},
      components: {},
      data() {
        return {
          loading: false,
          //列表数据参数
          msg: {
            PeriodId: 0,
            UserId: 0,
            SourceId: '-1',
            OrderId: '',
            UserIds:'',
          },
          pageCount: 0,
          persistent: false,
          listData: {},
          tableData: [],
          company: [],
          department: [],
          StudyAbroadList: [],
          allStudyAbroadList: [],
        }
      },
      created() {},
      mounted() {
        if (this.$route.query && this.$route.query.userId) {
          this.msg.UserId = this.$route.query.userId
        }
        if (this.$route.query && this.$route.query.preriodId) {
          this.msg.PeriodId = this.$route.query.preriodId
        }
        if (this.$route.query && this.$route.query.UserIds) {
          this.msg.UserIds = this.$route.query.UserIds
        }
        this.getList()
        this.getStudyAbroad()
      },
      methods: {
  
        getList() {
          if (this.msg)
            this.loading = true;
            if(this.msg.SourceId==''|| this.msg.SourceId==null){
              this.msg.SourceId='-1'
            }
          getSellStudyAbroadUserDetailList(this.msg).then(res => {
            if (res.Code == 1) {
              this.loading = false;
              this.tableData = res.Data
              if (this.tableData.length > 0) {
                this.getAskfor()
  
              }
            }
          })
        },
        getAskfor() { //求值
          let obj = {
            SchoolName: '合计',
            YFMoney: 0,
          }
          this.tableData.forEach((x) => {
            if (x.YFMoney) {
              obj.YFMoney = this.accAdd(x.YFMoney, obj.YFMoney)
            };
           
  
          })
          this.tableData.push(obj)
  
        },
        accAdd(arg1, arg2) { //js 加法精确计算
          var r1, r2, m;
          try {
            r1 = arg1.toString().split(".")[1].length;
  
          } catch (e) {
            r1 = 0;
          }
  
          try {
            r2 = arg2.toString().split(".")[1].length;
  
          } catch (e) {
            r2 = 0;
  
          }
          m = Math.pow(10, Math.max(r1, r2));
          return (arg1 * m + arg2 * m) / m;
  
        },
    
        getStudyAbroad() {
          let msg  ={
            pageIndex: 0,
            pageSize: 9000,
            Name: "",
            IsQPrice: 1,
            Type: -1, //项目类型
            SaleState: 3, //已上架
          }
          queryStudyAbroadPage(msg).then(res => {
              let data = res.Data.PageData
              let obj = {
                Name:'不限',
                Id:'-1'
              }
              data.unshift(obj)

              this.StudyAbroadList = data;
              this.allStudyAbroadList = JSON.parse(JSON.stringify(data))
            })
            .catch(() => {
            });
        },
        //筛选员工
        filterFn(val, update) {
          update(() => {
            if (val === '') {
              this.StudyAbroadList = JSON.parse(JSON.stringify(this.allStudyAbroadList))
            } else {
              const needle = val.toLowerCase()
              this.StudyAbroadList = this.allStudyAbroadList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1)
            }
          })
        },
  
        goUrl(path, id) {
          this.$router.push({
            path: '/financial/' + path,
            query: {
              "id": id,
              blank: 'y',
              tab: '单据详情'
            }
          })
        },
        filterHandler(value, row, column) {
          const property = column['property'];
          return row[property] === value;
        },
        StudentCount(a, b) {
          return a.StudentCount - b.StudentCount;
        },
        goorderUrl(row) {
          this.$router.push({
            path: '/financial/cycleOrderList',
            query: {
              OrderId: row.OrderId,
              UserId:row.UserId,
              blank: 'y',
            }
          })
        },
        goreturn() {
          this.$router.go(-1);
        },
        goUrlorderList(path,row){//订单跳转
          this.OpenNewUrl(path, {
            OrderId: row.OrderId,
            // EnterID:row.UserId
          });
        },
        goUrlclass(path,Names){//班级
          let Name = encodeURI(Names)
          this.OpenNewUrl(path, {
            ClassName: Name,
          });
        },
        goUrlkehao(path,row){//跳转到学生课耗
          let StartMonth = ''
          let EndMonth = ''
          if(row.IsFirstCommission == 1){
            EndMonth = row.Periods
          }else{
            if(row.Periods.indexOf('~')!=-1){
              StartMonth  = row.Periods.split('~')[0];
              EndMonth  = row.Periods.split('~')[1];
            }else{
              StartMonth = row.Periods;
              EndMonth = row.Periods
  
            }
           
          }
          this.OpenNewUrl(path, {
            OrderId: row.OrderId,
            StartMonth:StartMonth,
            EndMonth:EndMonth,
            comefrom:1,
          });
        }
      },
    }
  </script>
  <style lang="sass">
    @import url('~assets/css/table.sass')
  
  </style>
  