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

  .CommissionDetail .border-bottom {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

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

  .CommissionDetail ._icon_btn i.icon-sousuo {
    background-color: #47bf8c;
  }

  .CommissionDetail ._icon_btn i {
    width: 26px;
    height: 26px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }

  .CommissionDetail .el-table td,
  .el-table th {
    padding: 5px 0;
  }
</style>
<template>
  <div class="page-body CommissionDetail">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <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" v-if="isShowFrom">
            <q-select filled stack-label :disable="!isShowFrom" input-debounce="0" option-value="Id" @input="getlaiyuan" option-label="Name"
              v-model="msg.OrderSourceType" :options="customFromList" label="来源" dense emit-value map-options>
            </q-select>
          </div>
          <div class="col-3" v-if="msg.OrderSourceType == 1 || msg.OrderSourceType == 3">
            <q-select filled stack-label clearable v-model="msg.OrderSourceId" :dense="false" :options="myEmployeeList"
              use-input @input="getList" label="人员" @filter="filterEmployee" option-label="EmployeeName"
              option-value="Id" emit-value map-options>
              <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" v-if="msg.OrderSourceType == 2">
            <q-select filled stack-label v-model="msg.OrderSourceId" clearable :dense="false" :options="customList"
              use-input @input="getList" label="关联同行" @filter="filterFn" option-label="CustomerName"
              option-value="CustomerId" emit-value map-options>
              <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" v-if="msg.OrderSourceType == 4">
            <q-select filled clearable stack-label v-model="msg.OrderSourceId" :dense="false" :options="InvitationList"
              use-input @input="getList" label="转介人" @filter="filterFnStudent" option-label="StuName"
              option-value="StuId" emit-value map-options>
              <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>
    <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="校区"></el-table-column>
        <el-table-column prop="UserName" label="人员" :filters="UserNamelist" :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="OrderSourceType" label="类型">
          <template slot-scope="scope">
            {{getOrderSourceType(scope.row.OrderSourceType)}}
          </template>
        </el-table-column>
        <el-table-column prop="StudentCount" label="学生数量" sortable :sort-method="StudentCount"></el-table-column>
        <el-table-column prop="CommissionMoeny" label="提成金额" sortable :sort-method="CommissionMoeny"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="_icon_btn">
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <i class="iconfont icon-sousuo"
                  @click="goUrl('returnPassbook/returnpassbookStatistics', scope.row)"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
  import {
    GetClassTypePageList,
  } from '../../../api/system/index';
  import {
    GetStudentList,
  } from '../../../api/course/class';
  import {
    getCommissionUserList,
  } from '../../../api/finance/index'
  import {
    getSchoolDropdown,
    getStudentDorpDownList
  } from "../../../api/school/index";
  import {
    queryEmployee
  } from '../../../api/users/user'
  import {

    CreateTypeList,
    GetCustomerList
  } from '../../../api/sale/sale'
  export default {
    meta: {
      title: "销售提成详情"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          BatchId: 0,
          SchoolId: '-1',
          Status: '-2',
          OrderSourceType: '-1',
          OrderSourceId: 0,
          Q_SelectNormal: '2',
          UserDept: 0
        },
        pageCount: 0,
        persistent: false,
        tableData: [],
        CompanyList: [],
        StatusList: [{
          Id: '-2',
          Name: '不限'
        }, {
          Id: '-1',
          Name: '不返佣'
        }, {
          Id: '0',
          Name: '待返佣'
        }, {
          Id: '1',
          Name: '已返佣到账户'
        }, {
          Id: '2',
          Name: '佣金已提现'
        }, ],
        see_tcdetailed: false,
        customFromList: [],
        UserNamelist: [],
        employeeList: [],
        myEmployeeList: [],

        TransListData: [], //转介人数据
        MyTransListData: [],
        customList: [], //同行列表
        allCustomList: [], //所有同行列表
        InvitationList: [], //学员下拉数据
        AllInvitationList: [],
        isShowFrom:true
      }
    },
    created() {},
    mounted() {
      if (this.$route.query && this.$route.query.id) {
        this.msg.BatchId = this.$route.query.id
      }
      if (this.$route.query.ReFinanceId2) {
        this.msg.UserDept = this.$route.query.ReFinanceId2;
      }
      if (this.$route.query&&this.$route.query.ReFinanceId2==0){
        this.msg.OrderSourceType=4;
        this.isShowFrom=false;
      }
      this.getList()
      this.getBranchList()
      this.getCustomFrom()
      this.getEmployeeList()
      this.getStudentDorpDown()
      this.GetCustomerList()
      this.getStudentList(); //学员下拉

    },
    methods: {
      getList() {
        this.loading = true;
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderSourceId == '' || msg.OrderSourceId == null) {
          msg.OrderSourceId = 0
        }
        getCommissionUserList(msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            this.tableData = res.Data;
            this.UserNamelist = [];
            this.tableData.forEach(x => {
              let obj3 = {
                text: x.UserName,
                value: x.UserName
              }
              this.UserNamelist.push(obj3)
            })
            this.UserNamelist = this.unique(this.UserNamelist)
          }
        })
      },
      getlaiyuan() {
        if (this.msg.OrderSourceType == -1) {
          this.msg.OrderSourceId = 0
        } else {
          this.msg.OrderSourceId = ''
        }
        this.getList()
      },
      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          let obj = {
            SName: '不限',
            SId: '-1'
          }
          this.CompanyList = res.Data;
          this.CompanyList.unshift(obj);
        }).catch(() => {

        })
      },
      //获取客户来源
      getCustomFrom() {
        CreateTypeList({}).then(res => {
          if (res.Code == 1) {
            let obj = {
              Name: '不限',
              Id: '-1'
            }
            this.customFromList = res.Data;
            this.customFromList.unshift(obj);
          }
        })
      },
      getOrderSourceType(Id) {
        let Name = ''
        this.customFromList.forEach(x => {
          if (x.Id == Id) {
            Name = x.Name
          }
        })
        return Name
      },
      //筛选转介人
      filterStudent(val, update, abort) {
        update(() => {
          this.MyTransListData = this.TransListData.filter(
            v => v.StuName.indexOf(val) > -1
          );
        });
      },
      unique(arr, Name) { //数组去重
        const res = new Map();
        return arr.filter(
          (list) => !res.has(list.text) && res.set(list.text, 1)
        );
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //获取员工列表
      getEmployeeList() {
        queryEmployee({
          IsLeave: 1
        }).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        })
      },
      //获取转介人下拉
      getStudentDorpDown() {
        getStudentDorpDownList().then(res => {
          if (res.Code == 1) {
            this.TransListData = res.Data;
            this.MyTransListData = res.Data;
          }
        })
      },
      //获取客户下拉数据
      GetCustomerList() {
        let msg = {
          QCreateBy: 0
        }
        GetCustomerList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.allCustomList = res.Data;
          }
        })
      },
      //筛选客户
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.customList = JSON.parse(JSON.stringify(this.allCustomList));
          } else {
            const needle = val.toLowerCase();
            this.customList = this.allCustomList.filter(
              (v) => v.CustomerName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取学员下拉信息
      getStudentList() {
        var qMsg = {
          SchoolId: this.msg.SchoolId
        };
        GetStudentList(qMsg).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllInvitationList = JSON.parse(JSON.stringify(jsonData));
              this.InvitationList = JSON.parse(JSON.stringify(jsonData));
            }
          }
        })
      },
      filterFnStudent(val, update) {
        update(() => {
          if (val === '') {
            this.InvitationList = JSON.parse(JSON.stringify(this.AllInvitationList))
          } else {
            const needle = val.toLowerCase()
            this.InvitationList = this.AllInvitationList.filter(v => v.StuName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },
      goUrl(path, row) {
        this.$router.push({
          path: '/financial/' + path,
          query: {
            preriodId: this.$route.query.id,
            CommissionType: this.$route.query.CommissionType,
            OrderSourceType: row.OrderSourceType,
            OrderSourceId: row.OrderSourceId,
            blank: 'y',
          }
        })
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      StudentCount(a, b, c) {
        return a.StudentCount - b.StudentCount;
      },
      CommissionMoeny(a, b) {
        return a.CommissionMoeny - b.CommissionMoeny;
      },
      goreturn() {
        this.$router.go(-1);
      }
    },
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>