<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="ClassId"
            @input="getList"
            option-label="ClassName"
            v-model="msg.ClassId"
            :options="ClassList"
            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-select
            filled
            stack-label
            input-debounce="0"
            option-value="Id"
            @input="getList"
            option-label="Name"
            v-model="msg.UserType"
            :options="UserTypeList"
            label="类型"
            :dense="false"
            emit-value
            map-options
          ></q-select>
        </div>
        <div class="col-3">
          <q-select
            filled
            stack-label
            input-debounce="0"
            option-value="Id"
            @input="getList"
            option-label="Name"
            v-model="msg.IsCommonDept"
            :options="IsDeptList"
            label="业绩方式"
            :dense="false"
            emit-value
            map-options
          ></q-select>
        </div>
        <div class="col-3">
        <q-select @input="getList" filled stack-label option-value="Id" option-label="EmployeeName" use-input input-debounce="0"
                    v-model="msg.UserId" :options="PersionList" label="销售" :dense="false"
                    emit-value map-options @filter="filterFn2">
                    <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="140" label="校区"></el-table-column>
        <el-table-column prop="DeptName" label="部门"></el-table-column>
        <el-table-column prop="UserType" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.UserType == 1">市场</span>
            <span v-if="scope.row.UserType == 2">顾问</span>
            <span v-if="scope.row.UserType == 3">教师</span>
          </template>
        </el-table-column>
        <el-table-column prop="UserName" label="销售"></el-table-column>
        <el-table-column prop="IsCommonDept" label="业绩方式">
          <template slot-scope="scope">
            <span v-if="scope.row.IsCommonDept == 1">部门</span>
            <span v-if="scope.row.IsCommonDept == 0">个人</span>
          </template>
        </el-table-column>
        <el-table-column width="130" prop="ClassName" label="班级信息">
          <template slot-scope="scope">
            <div>
              <span
                style="cursor: pointer;text-decoration: underline;"
                @click="goUrlclass('/course/classManage', scope.row.ClassName)"
              >{{ scope.row.ClassName }}</span>
              {{ scope.row.ClassTypeName }}
              <span
                style="color: #409EFF;"
                v-if="scope.row.IsContinueClass == 1"
              >(续)</span>
            </div>
            <div v-if="scope.row.StudentCount">学生数量:{{ scope.row.StudentCount }}人</div>
            <div v-if="scope.row.ClassNo">班号:{{scope.row.ClassNo}}</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(scope.row.OrderId==-1?'/school/student'
              :scope.row.OrderId!=-1&&scope.row.ClassType == -1 ?'/sale/studyOrderStatistics'
              :scope.row.OrderId!=-1?'/sale/orderStatistics':'',
               scope.row)"
            >{{ scope.row.OrderId!=-1?scope.row.OrderId:'有效到访奖励' }}</div>
          </template>
        </el-table-column>

        <el-table-column width="150" prop="TotalCommissionMoney" label="订单发放信息">
          <template slot-scope="scope">

             <div v-if="scope.row.TotalCommissionMoney" style="color: rgb(255, 156, 0);cursor: pointer;text-decoration: underline;" @click="getmingxi(scope.row)">
              应发:{{scope.row.TotalCommissionMoney}}
              <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
                  <div style="padding: 10px;border-radius: 4px;background: #FFF;max-width: 500px;">
                    {{ChangeLog}}
                  </div>
                </q-popup-proxy>
            </div>
            <div v-if="scope.row.OtherMoney">额外奖励:{{ scope.row.OtherMoney }}</div>
            <div v-if="scope.row.BackMoney">额外扣除:{{ scope.row.BackMoney }}</div>
            <div v-if="scope.row.GiveOutMoney">累计已发:{{ scope.row.GiveOutMoney }}</div>

            <div v-if="scope.row.OrderSaleMoney">订单业绩:{{ scope.row.OrderSaleMoney }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="IsFirstCommission" label="首次发放">
          <template slot-scope="scope">
            <div
              v-if="scope.row.IsFirstCommission"
            >{{ scope.row.IsFirstCommission == 1 ? '是' : '否' }}</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="TotalHours" label="课时统计" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.TotalHours">总计课时:{{ scope.row.TotalHours }}</div>
            <div v-if="scope.row.TotalLearn">
              学习课时:<div
                style=" display: inline-block;cursor: pointer;text-decoration: underline;"
                @click="goUrlkehao('/financial/studentsClassfee', scope.row)"
              >{{ scope.row.TotalLearn }}</div>
            </div>
            <div
              v-if="scope.row.CurrentHours"
            >当期课时:{{ scope.row.CurrentHours >= 0 ? scope.row.CurrentHours : '-' }}</div>
          </template>
        </el-table-column>

        <el-table-column width="120" prop="CurrentPeriodMoney" label="当期发放信息">
          <template slot-scope="scope">
            <div
              v-if="scope.row.CurrentPeriodMoney"
              style="color: rgb(255, 156, 0);"
            >应发:{{ scope.row.CurrentPeriodMoney }}</div>
            <div v-if="scope.row.CurrentExtraMoney">额外奖励:{{ scope.row.CurrentExtraMoney }}</div>
            <div v-if="scope.row.DeductionMoney">抵扣:{{ scope.row.DeductionMoney }}</div>
            <div v-if="scope.row.DeductionExtraMoney">奖励抵扣:{{ scope.row.DeductionExtraMoney }}</div>
          </template>
        </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="PeopleNumMoney" label="人头奖励"></el-table-column>
        <el-table-column prop="IssueNum" label="发放次数" width="94">
          <template slot-scope="scope">
            <div
              v-if="scope.row.IssueNum"
              style="cursor: pointer;text-decoration: underline;"
              @click="goorderUrl(scope.row)"
            >发放第{{ scope.row.IssueNum }}次</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 { date } from 'quasar'
import {
  GetClassTypePageList,
} from '../../../api/system/index';
import {
  getSellAchievementsUserDetailList,
  getSellAchievementsChangeLog
} from '../../../api/finance/index'
import {
        queryEmployee
} from '../../../api/users/user'
import {
  getClassDropDownList,
} from "../../../api/school/index";
export default {
  meta: {
    title: "员工提成明细列表"
  },
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      //列表数据参数
      msg: {
        PeriodId: 0,
        UserId: 0,
        ClassId: 0,
        OrderId: '',
        UserType: 0,//类型 1市场、2顾问、3教师
        IsCommonDept: '0',//业绩方式 1部门 2个人
        UserIds: '',
      },
      UserTypeList: [{ Id: 0, Name: '不限' }, { Id: 1, Name: '市场' }, { Id: 2, Name: '顾问' }, { Id: 3, Name: '教师' },],
      IsDeptList: [{ Id: '0', Name: '不限' }, { Id: '1', Name: '部门' }, { Id: '2', Name: '个人' }],
      pageCount: 0,
      persistent: false,
      listData: {},
      tableData: [],
      company: [],
      department: [],
      ClassList: [],
      allClassList: [],
      ChangeLog:'',
      PersionList: [], //员工列表
      AllemployeeList: [], //所有员工
    }
  },
  created() { },
  mounted() {
    if (this.$route.query && this.$route.query.userId) {
      this.msg.UserId = Number(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
    }
    if(this.$route.query && this.$route.query.IsCommonDept){
      this.msg.IsCommonDept = this.$route.query.IsCommonDept
    }
    this.getList()
    this.setClass()
    this.getEmployee()
  },
  methods: {

    getList() {
      if (this.msg)
        this.loading = true;
      getSellAchievementsUserDetailList(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,
        PeopleNumMoney: 0,
        IsCommonDept:-1
      }
      this.tableData.forEach((x) => {
        if (x.YFMoney) {
          obj.YFMoney = this.accAdd(obj.YFMoney,x.YFMoney)
        };
        if(x.PeopleNumMoney){
          obj.PeopleNumMoney =this.accAdd(obj.PeopleNumMoney,x.PeopleNumMoney)
        }
      })
      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;

    // },
    //选择班级
    setClass(item) {
      this.isShowClass = true;
      getClassDropDownList({
        CourseId: 0,
        IsAddDefault: 1, //添加默认选项
      }).then(res => {
        if (res.Code == 1) {
          var jsonData = res.Data;
          let obj = {
            ClassId: 0,
            ClassName: '不限'
          }
          jsonData.unshift(obj)

          if (jsonData && jsonData.length > 0) {
            this.ClassList = JSON.parse(JSON.stringify(jsonData));
            this.allClassList = JSON.parse(JSON.stringify(jsonData));;
          }
        }
      });
    },
    //筛选员工
    filterFn(val, update) {
      update(() => {
        if (val === '') {
          this.ClassList = JSON.parse(JSON.stringify(this.allClassList))
        } else {
          const needle = val.toLowerCase()
          this.ClassList = this.allClassList.filter(v => v.ClassName.toLowerCase().indexOf(needle) > -1)
        }
      })
    },
    //获取员工列表
    getEmployee() {
        var qMsg = {
            EmployeeName: ""
        }
        queryEmployee(qMsg).then(res => {
            if (res.Code == 1) {
                let obj = {
                EmployeeName: '不限',
                Id: 0
                }
                res.Data.unshift(obj)
                var jsonData = res.Data;
                if (jsonData && jsonData.length > 0) {
                  this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
                  this.PersionList = JSON.parse(JSON.stringify(jsonData));;
                }
            }
        })
    },
     //筛选员工
    filterFn2(val, update) {
        update(() => {
        if (val === '') {
            this.PersionList = JSON.parse(JSON.stringify(this.AllemployeeList))
        } else {
            const needle = val.toLowerCase()
            this.PersionList = this.AllemployeeList.filter(v => v.EmployeeName.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/market/AchievementsForOrderList',
        query: {
          OrderId: row.OrderId,
          UserId: row.UserId,
          blank: 'y',
        }
      })
    },
    goreturn() {
      this.$router.go(-1);
    },
    goUrlorderList(path, row) {//订单跳转
      if(row.OrderId!=-1){
        this.OpenNewUrl(path, {
          OrderId: row.OrderId,
          // EnterID:row.UserId
        });
      }else{
        // row.IsDept==2
        let newDate = row.Periods.split('-')
        let MonthDayNum = new Date(newDate[0], newDate[1], 0).getDate(); //计算当月的天数
        this.OpenNewUrl(path, {
          OrderId: row.OrderId,
          startTime: row.Periods+'-01',
          endTime: row.Periods+'-'+MonthDayNum,
          createBy: 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,
      });
    },
    getmingxi(row){//明细
        getSellAchievementsChangeLog({
          OrderId: row.OrderId,
          UserId: row.UserId,
          UserType: row.UserType,
          IsDept: row.IsDept,
        }).then(res => {
          if (res.Code == 1) {
            this.ChangeLog = res.Data
          }
        });
      }

  },
}
</script>
<style lang="sass">

@import url('~assets/css/table.sass')
</style>
