<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.UserDept" dense :options="DepartmentList" use-input
              @input="getList(), getEmployeeList()" label="部门" @filter="filterEmployee" option-label="DeptName"
              option-value="DeptId" 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 == 1 || msg.OrderSourceType == 3">
            <q-select filled stack-label clearable v-model="msg.OrderSourceId" dense :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 :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 :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 class="col-3" style="float:right;">
            <q-btn color="accent" class="q-mr-md" size="sm" icon="download" style="margin-top:6px;"
              @click="DownLoadCommissionUserList" label="下载" />
          </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="UserDeptName" label="部门"></el-table-column>
        <el-table-column prop="UserName" label="人员" :filters="UserNamelist" :filter-method="filterHandler">
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{
              scope.row.OrderSourceType == 1 || scope.row.OrderSourceType == 3
                ? "员工"
                : ""
            }}
            {{ scope.row.OrderSourceType == 2 ? "同业" : "" }}
            {{ scope.row.OrderSourceType == 4 ? "学员" : "" }}
          </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 {
    getStudentDorpDownList
  } from "../../../api/school/index";

  import {
    getDeptList
  } from "../../../api/system/dept";

  import {
    queryEmployee
  } from "../../../api/users/user";
  import {
    CreateTypeList,
    GetCustomerList
  } from "../../../api/sale/sale";
  import {
    EduDownLoad
  } from "../../../api/common/common";
  import {
    mapState
  } from "vuex";
  export default {
    meta: {
      title: "销售提成详情"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          BatchId: 0,
          SchoolId: "-1",
          Status: "-2",
          OrderSourceType: "-1",
          OrderSourceId: "",
          Q_SelectNormal: "2",
          UserDept: ""
        },
        pageCount: 0,
        persistent: false,
        tableData: [],
        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,
        DepartmentList: [] //部门列表
      };
    },
    computed: {
      //获取计算后的问题分类(读音选择题、汉字选择题等)
      isReturnperiods() {
        let UserInfo = this.getLocalStorage();
        let isAuth = false;
        if (UserInfo.ActionMenuList && UserInfo.ActionMenuList.length > 0) {
          UserInfo.ActionMenuList.forEach(x => {
            if (x.FunctionCode == "Edit_Returnperiods") {
              isAuth = true;
            }
          });
        }
        return isAuth;
      }
    },
    created() {
      this.getCustomFrom();
      this.queryDeptList();
      this.getEmployeeList();
      this.getStudentDorpDown();
      this.GetCustomerList();
      this.getStudentList(); //学员下拉
      if (!this.isReturnperiods) {
        this.msg.OrderSourceType = 2;
      }
    },
    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();
    },
    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);
          }
        });
      },
      //现在
      DownLoadCommissionUserList() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad(
          "/CustomerCommission/DownLoadCommissionUserList",
          msg,
          "用户返佣.xls",
          res => {
            this.loading = false;
          }
        );
      },
      getlaiyuan() {
        if (this.msg.OrderSourceType == -1) {
          this.msg.OrderSourceId = 0;
        } else {
          this.msg.OrderSourceId = "";
        }
        this.msg.UserDept = "";
        this.getList();
      },
      //获取部门列表
      queryDeptList() {
        var qMsg = {};
        getDeptList(qMsg).then(res => {
          if (res.Code == 1) {
            this.DepartmentList = res.Data;
          }
        });
      },
      //获取客户来源
      getCustomFrom() {
        CreateTypeList({}).then(res => {
          if (res.Code == 1) {
            let obj = {
              Name: "不限",
              Id: "-1"
            };
            if (this.isReturnperiods) {
              this.customFromList = res.Data;
              this.customFromList.unshift(obj);
            } else {
              res.Data.forEach(data => {
                if (data.Id == 2) {
                  this.customFromList.push(data);
                }
              });
            }
            this.customFromList.forEach(data => {
              if (data.Id == 1 || data.Id == 3) {
                data.Name = "员工";
              } else if (data.Id == 2) {
                data.Name = "同业";
              } else if (data.Id == 4) {
                data.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,
          Dept_Id: this.msg.UserDept
        }).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) {
        var newpath = "/financial/" + path;
        this.OpenNewUrl(newpath, {
          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>
