<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.IsDept" :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="IsDept" label="业绩方式" >
                  <template slot-scope="scope">
                    <span v-if="scope.row.IsDept==1">部门</span>
                    <span v-if="scope.row.IsDept==2">个人</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 style="cursor: pointer;text-decoration: underline;" @click="goUrlorderList('/sale/orderStatistics',scope.row)">{{scope.row.OrderId}} </div>
                    
                 </template>
            </el-table-column>
            <el-table-column width='130' 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>
                </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="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';
    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教师
            IsDept: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
        }
 
        this.getList()
        this.setClass()
        this.getBranchList()
        this.getDepartList(0);
        this.getEmployee();
        this.getPeriodList()


      },
      methods: {
        resetSearch() {
            this.msg.PageIndex = 1;
            this.getList()
        },
        getList(){
          if(this.msg)
            this.loading = true;
            getSellAchievementsStatistics(this.msg).then(res => {
            if (res.Code == 1) {
              this.loading = false;

              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)
                    

                }
            })
        },
        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){//订单跳转
          this.OpenNewUrl(path, {
            OrderId: row.OrderId,
            // EnterID: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>
  