<style>
  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .cycleOrderList .border-bottom {
    /* border-bottom: 1px dashed #EEE; */
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .cycleOrderList .text-bottom {
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
  }

  .cycleOrderList ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }

  .cycleOrderList ._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;
  }

  .cycleOrderList .el-table td,
  .el-table th {
    padding: 5px 0;
  }
</style>
<template>
  <div class="page-body cycleOrderList">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled stack-label @input="getDepartList(msg.School_Id),resetSearch()" option-value="SId"
            option-label="SName" v-model="msg.School_Id" ref="School_Id" :options="schoolList" label="校区" :dense="false"
            emit-value map-options />
        </div>
        <div class="col-3">
          <selectTree :treeData='DeptList' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
            labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"></selectTree>
        </div>
        <q-select @input="resetSearch" filled stack-label option-value="Id" option-label="EmployeeName" use-input
          v-model="msg.UserId" ref="DeptTier" :options="PersionList" label="销售" :dense="false" class="col-3 " 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 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>
    </div>
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled stack-label @input="resetSearch()" option-value="Id" option-label="Name"
            v-model="msg.PeriodId" :options="PeriodsList" label="周期" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-input filled v-model="msg.OrderId" @keyup.enter.native="resetSearch()" label="订单号" />
        </div>
        <div class="col-3">
          <q-select filled stack-label input-debounce="0" option-value="Id" @input="resetSearch()" 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="resetSearch()" option-label="Name"
            v-model="msg.IsCommonDept" :options="IsDeptList" label="业绩方式" :dense="false" emit-value map-options>
          </q-select>
        </div>
      </div>
    </div>
    <div class="page-search row items-center" style="justify-content: space-between;">
      <span style="font-size: 20px;font-weight: 400;">提成统计 <span
          style="font-size: 16px;">（提成总计:{{TotalCommission}}）</span> </span>
      <q-btn  color="primary"  size="11px"  label="导出"  @click="tcexport"  style="margin-left:10px" />
    </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" label="校区" width='150'></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='170' 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>学生数量:{{scope.row.StudentCount}}人</div>
            <div>班号:{{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 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>累计已发:{{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>{{scope.row.IsFirstCommission==1?'是':'否'}}</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="TotalHours" label="课时统计" width='160'>
          <template slot-scope="scope">
            <div>总计课时:{{scope.row.TotalHours}}</div>
            <div>学习课时:{{scope.row.TotalLearn}}</div>
            <div>当期课时:{{scope.row.CurrentHours>=0 ?scope.row.CurrentHours:'-'}}</div>
          </template>
        </el-table-column>
        <el-table-column width='160' prop="CurrentPeriodMoney" label="当期发放信息">
          <template slot-scope="scope">
            <div style="color: rgb(255, 156, 0);">应发:{{scope.row.CurrentPeriodMoney}}</div>
            <div>抵扣:{{scope.row.DeductionMoney}}</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='85' prop="PeopleNumMoney" label="人头奖励"> </el-table-column>
        <el-table-column width='85' prop="Periods" label="期数"> </el-table-column>
        <el-table-column prop="Remark" width='160' label="备注"> </el-table-column>
      </el-table>
      <div style="margin-top: 10px;text-align: center;">
        <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
          :current-page.sync="msg.PageIndex" :page-size="msg.PageSize" :total='total'>
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
  import {
    getSchoolDropdown
  } from '../../../api/school/index'
  import {
    queryEmployee
  } from '../../../api/users/user'
  import {
    getDeptTree
  } from '../../../api/system/dept.js'

  import {
    getSellAchievementsStatistics,
    getSellAchievementsPeriodsList,
    getSellAchievementsChangeLog
  } from '../../../api/finance/index'
  import {
    getClassDropDownList,
  } from "../../../api/school/index";
  import selectTree from '../../../components/common/select-tree'
  import {
    EduDownLoad,
  } from '../../../api/common/common';
  import {
    number
  } from 'echarts'
  export default {
    meta: {
      title: "业绩提成统计"
    },
    props: {},
    components: {
      selectTree
    },
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          PageIndex: 1,
          PageSize: 10,
          School_Id: '-1',
          Depart_Id: 0,
          PeriodId: 0,
          UserId: 0,
          ClassId: 0,
          OrderId: '',
          UserType: 0, //类型 1市场、2顾问、3教师
          IsCommonDept: 0, //业绩方式 1部门 2个人
        },
        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: [],
        total: 0,
        company: [],
        department: [],
        ClassList: [],
        allClassList: [],
        returnString: [], //默认岗位
        see_tcdetailed: false,
        schoolList: [],
        DeptList: [], // 部门下拉
        PersionList: [], //员工列表
        AllemployeeList: [], //所有员工
        PeriodsList: [], //周期列表
        TotalCommission: 0,
        ChangeLog: '',
      }
    },
    created() {
      let userinfo = this.getLocalStorage();
      userinfo.ActionMenuList.map(x => { //判断权限
        if (x.FunctionCode == "see_tcdetailed") { //判断是否可以查看其他明细
          this.see_tcdetailed = true;
        }
      })
      if (this.see_tcdetailed == false) {
        this.msg.UserId = userinfo.Id
      }
    },
    mounted() {
      if (this.$route.query && this.$route.query.OrderId) {
        this.msg.OrderId = this.$route.query.OrderId
      }
      // 从业绩表跳转带参
      if (this.$route.query && this.$route.query.UserId) {
        this.PersionList = JSON.parse(JSON.stringify(this.AllemployeeList))
        this.msg.UserId = this.$route.query.UserId - 0
      }
      this.getList()
      this.getEmployee(); //销售
      this.getPeriodList() //周期
      this.setClass() //班级
      this.getBranchList() //校区
      this.getDepartList(0);
    },
    methods: {
      resetSearch() {
        this.msg.PageIndex = 1;
        this.getList()
      },
      getList() {
        if (this.msg)
          this.loading = true;
        getSellAchievementsStatistics(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.tableData = res.Data.PageData.List
            this.TotalCommission = res.Data.PageData.TotalCommission
            this.total = res.Data.Count
          }
        })
      },
      unique(arr, Name) { //数组去重
        const res = new Map();
        return arr.filter(
          (list) => !res.has(list.text) && res.set(list.text, 1)
        );
      },
      handleCurrentChanges(val) {
        this.msg.PageIndex = val;
        this.getList()
      },
      //选择班级
      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)
          }
        })
      },
      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          this.schoolList = res.Data;
          var obj = {
            SName: '全部',
            SId: '-1'
          }
          this.schoolList.unshift(obj);
        }).catch(() => {

        })
      },
      //获取部门下拉数据
      getDepartList(id) {
        if (id == -1) {
          id = 0
        }
        let msg = {
          School_Id: id
        }
        getDeptTree(msg).then(res => {
          if (res.Code == 1) {
            this.DeptList = res.Data;
          }
        })
      },
      getChild(deptArray) {
        var tempStr = "";
        if (deptArray && deptArray != '') {
          tempStr = deptArray;
        }
        if (tempStr) {
          this.msg.Depart_Id = tempStr;
        } else {
          this.msg.Depart_Id = 0;
        }
        this.resetSearch();
      },
      //筛选员工
      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)
          }
        })
      },
      //获取员工列表
      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));;
            }
          }
        })
      },
      getPeriodList() { //获取周期下拉列表
        getSellAchievementsPeriodsList({}).then(res => {
          if (res.Code == 1) {
            this.PeriodsList = res.Data
            let obj = {
              Name: '不限',
              Id: 0
            }
            this.PeriodsList.unshift(obj)
            // 从业绩表跳转带参
            if (this.$route.query.Periods) {
              this.PeriodsList.forEach(item => {
                if (item.Periods == this.$route.query.Periods) {
                  this.msg.PeriodId = item.Id
                }
              })
            }
          }
        })
      },
      tcexport() { //导出
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/SellAchievements/GetSellAchievementsStatisticsToExcel", msg, "业绩提成统计.xls")
      },
      goUrlclass(path, Names) { //班级
        let Name = encodeURI(Names)
        this.OpenNewUrl(path, {
          ClassName: Name,
        });
      },
      goUrlorderList(path, row) { //订单跳转
        if(row.OrderId!=-1){
          this.OpenNewUrl(path, {
            OrderId: row.OrderId,
          });
        }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
          });
        }
      },
      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>
