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

.cycleOrderList .border-bottom {
  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">
        <q-select
          v-if="!isNormal"
          @input="resetSearch"
          filled
          stack-label
          option-value="Id"
          option-label="Name"
          use-input
          v-model="msg.Status"
          :options="StatusList"
          label="状态"
          dense
          class="col-3"
          emit-value
          map-options
        >
        </q-select>
        <div class="col-3" v-if="!isNormal">
          <q-select
            filled
            stack-label
            @input="resetSearch()"
            option-value="Id"
            option-label="BatchName"
            v-model="msg.BatchId"
            :options="PeriodsList"
            label="周期"
            dense
            emit-value
            map-options
          />
        </div>
        <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
            emit-value
            map-options
            @filter="filterFnbanji"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"
                  >未找到相关数据</q-item-section
                >
              </q-item>
            </template>
          </q-select>
        </div>
        <template v-if="isReturnperiods">
          <q-select
            v-if="!isNormal"
            @input="resetSearch"
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            use-input
            v-model="msg.CommissionType"
            :options="CommissionList"
            label="类型"
            dense
            class="col-3"
            emit-value
            map-options
          ></q-select>
          <q-select
            v-if="!isNormal"
            @input="resetSearch"
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            use-input
            v-model="msg.Q_SelectNormal"
            :options="SelectNormal"
            label="返佣情况"
            dense
            class="col-3"
            emit-value
            map-options
          ></q-select>
          <q-select
            class="col-3"
            filled
            stack-label
            input-debounce="0"
            v-if="!isEdit"
            option-value="Id"
            @input="getlaiyuan"
            option-label="Name"
            v-model="msg.OrderSourceType"
            :options="customFromList"
            label="返佣类型"
            dense
            emit-value
            map-options
          ></q-select>

          <div
            class="col-3"
            v-if="msg.OrderSourceType == 1 || msg.OrderSourceType == 3"
          >
            <q-select
              filled
              clearable
              stack-label
              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
              clearable
              stack-label
              v-model="msg.OrderSourceId"
              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">
            <q-input
              filled
              dense
              v-model="msg.OrderId"
              @keyup.enter.native="resetSearch()"
              label="订单号"
            />
          </div>
        </template>
      </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
        v-if="!isNormal"
        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 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="UserName" label="人员"></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
              >
            </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.OrderType == 1"
              style="cursor: pointer;text-decoration: underline;"
              @click="goUrlorderList('/sale/orderStatistics', scope.row)"
            >
              {{ scope.row.OrderId }}
            </div>
            <div
              v-else-if="scope.row.OrderType == 2"
              style="cursor: pointer;text-decoration: underline;"
              @click="goUrlorderList('/sale/studyOrderStatistics', scope.row)"
            >
              {{ scope.row.OrderId }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="StuName" label="学生"></el-table-column>
        <el-table-column prop="CommissionType" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.CommissionType == 1">返佣</span>
            <span v-if="scope.row.CommissionType == 2">幸福存折</span>
          </template>
        </el-table-column>
        <el-table-column
          width="130"
          prop="CommissionMoeny"
          label="返佣/存折金额"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.CommissionMoeny ? scope.row.CommissionMoeny : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.Status == -1">不返佣</span>
            <span v-if="scope.row.Status == 0">待返佣</span>
            <span v-if="scope.row.Status == 1">已返佣到账户</span>
            <span v-if="scope.row.Status == 2">佣金已提现</span>
          </template>
        </el-table-column>
        <el-table-column prop="BatchName" label="期数"></el-table-column>
        <el-table-column
          prop="Remark"
          width="200"
          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,
  getClassDropDownList,
  getStudentDorpDownList
} from "../../../api/school/index";
import { queryEmployee } from "../../../api/users/user";
import { GetStudentList } from "../../../api/course/class";
import { CreateTypeList, GetCustomerList } from "../../../api/sale/sale";
import {
  getCommissionStatistics,
  getCommissionPeriodsList
} from "../../../api/finance/index";
import { EduDownLoad } from "../../../api/common/common";
import { mapState } from "vuex";
export default {
  meta: {
    title: "业绩提成统计"
  },
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      //列表数据参数
      msg: {
        PageIndex: 1,
        PageSize: 10,
        SchoolId: "-1",
        BatchId: "0",
        Status: "-2",
        OrderSourceType: "-1",
        OrderSourceId: 0,
        Q_SelectNormal: "-1",
        CommissionType: "-1",
        ClassId: 0,
        OrderId: "",
        UnionCashOutId: 0
      },
      StatusList: [
        {
          Id: "-2",
          Name: "不限"
        },
        {
          Id: "-1",
          Name: "不返佣"
        },
        {
          Id: "0",
          Name: "待返佣"
        },
        {
          Id: "1",
          Name: "已返佣到账户"
        },
        {
          Id: "2",
          Name: "佣金已提现"
        }
      ],
      SelectNormal: [
        {
          Id: "-1",
          Name: "不限"
        },
        {
          Id: "1",
          Name: "非不返佣的"
        },
        {
          Id: "2",
          Name: "已返佣"
        }
      ],
      CommissionList: [
        {
          Id: "-1",
          Name: "不限"
        },
        {
          Id: "1",
          Name: "返佣"
        },
        {
          Id: "2",
          Name: "幸福存折"
        }
      ],
      pageCount: 0,
      listData: {},
      tableData: [],
      total: 0,
      company: [],
      department: [],
      ClassList: [],
      allClassList: [],
      returnString: [], //默认岗位
      see_tcdetailed: false,
      schoolList: [],
      DeptList: [], // 部门下拉
      PeriodsList: [], //周期列表
      TotalCommission: 0,
      ChangeLog: "",
      customFromList: [],
      TransListData: [], //转介人数据
      MyTransListData: [],
      customList: [], //同行列表
      allCustomList: [], //所有同行列表
      InvitationList: [], //学员下拉数据
      AllInvitationList: [],
      isNormal: false,
      employeeList: [],
      myEmployeeList: [],
      isEdit: false
    };
  },
  computed: mapState({
    //是否有下载权限
    isReturnperiods(state) {
      if (
        state.user.userInfo &&
        state.user.userInfo.ActionMenuList &&
        state.user.userInfo.ActionMenuList.length > 0
      ) {
        let action = state.user.userInfo.ActionMenuList.find(x => {
          if (x.FunctionCode == "Edit_Returnperiods") {
            return x;
          }
        });
        return action && action.FunctionCode;
      }
      return false;
    }
  }),
  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() {
    this.getPeriodList(); //周期
    if (this.$route.query && this.$route.query.OrderId) {
      this.msg.OrderId = this.$route.query.OrderId;
    }
    if (this.$route.query && this.$route.query.preriodId) {
      this.msg.BatchId = this.$route.query.preriodId.toString();
    }
    if (this.$route.query && this.$route.query.UnionCashOutId) {
      //提现ID
      this.msg.UnionCashOutId = this.$route.query.UnionCashOutId;
    }
    if (this.$route.query && this.$route.query.OrderSourceType) {
      //来源
      this.msg.OrderSourceType = parseInt(this.$route.query.OrderSourceType);
    }
    if (this.$route.query && this.$route.query.OrderSourceId) {
      //人员ID
      this.msg.OrderSourceId = parseInt(this.$route.query.OrderSourceId);
    }
    if (this.$route.query && this.$route.query.CommissionType) {
      this.msg.CommissionType = parseInt(this.$route.query.CommissionType);
      this.msg.Q_SelectNormal = 2;
      this.isNormal = true;
    }
    if (this.$route.query && this.$route.query.iSFromDash == 1) {
      this.isEdit = true;
    }
    if (this.$route.query && this.$route.query.Status) {
      this.msg.Status = this.$route.query.Status;
      this.isNormal = false;
      this.msg.Q_SelectNormal = "-1";
    }
    if (this.$route.query && this.$route.query.UserId) {
      this.msg.OrderSourceId = this.$route.query.UserId - 0;
      this.msg.OrderSourceType = 1;
    }
    this.getList();
    this.setClass();
    this.getBranchList();

    this.getCustomFrom(); //来源
    this.getEmployeeList();
    this.getStudentDorpDown();
    this.GetCustomerList();
    this.getStudentList(); //学员下拉
  },
  methods: {
    resetSearch() {
      this.msg.PageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      let msg = JSON.parse(JSON.stringify(this.msg));
      if (msg.OrderSourceId == "" || msg.OrderSourceId == null) {
        msg.OrderSourceId = 0;
      }
      getCommissionStatistics(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));
    },
    getlaiyuan() {
      if (this.msg.OrderSourceType == -1) {
        this.msg.OrderSourceId = 0;
      } else {
        this.msg.OrderSourceId = "";
      }
      this.getList();
    },
    //获取客户来源
    getCustomFrom() {
      CreateTypeList({}).then(res => {
        if (res.Code == 1) {
          let obj = {
            Name: "不限",
            Id: "-1"
          };
          this.customFromList = res.Data;
          this.customFromList.unshift(obj);
          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
        );
      });
    },
    //筛选员工
    filterEmployee(val, update, abort) {
      update(() => {
        if (val === "") {
          this.myEmployeeList = this.employeeList;
        } else {
          const needle = val.toLowerCase();
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.toLowerCase().indexOf(needle) > -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
          );
        }
      });
    },
    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));
          }
        }
      });
    },
    //筛选班级
    filterFnbanji(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(() => {});
    },
    //获取学员下拉信息
    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
          );
        }
      });
    },
    getPeriodList() {
      //获取周期下拉列表
      getCommissionPeriodsList({}).then(res => {
        if (res.Code == 1) {
          this.PeriodsList = res.Data;
          let obj = {
            BatchName: "不限",
            Id: "0"
          };
          this.PeriodsList.unshift(obj);
          // 从业绩表跳转带参
          if (this.$route.query.Periods) {
            let dataTime =
              this.$route.query.Periods.slice(0, 4) +
              this.$route.query.Periods.slice(5, 7);
            this.PeriodsList.forEach(item => {
              if (item.BatchName.slice(0, 6) == dataTime) {
                this.msg.BatchId = item.Id;
              }
            });
          }
        }
      });
    },
    tcexport() {
      //导出
      var msg = JSON.parse(JSON.stringify(this.msg));
      let text = "用户返佣/存折明细.xls";
      if (msg.CommissionType == 1) {
        text = "用户返佣.xls";
      }
      if (msg.CommissionType == 2) {
        text = "幸福存折明细.xls";
      }
      EduDownLoad(
        "/CustomerCommission/GetCommissionStatisticsToExcel",
        msg,
        text
      );
    },
    goUrlclass(path, Names) {
      //班级
      let Name = encodeURI(Names);
      this.OpenNewUrl(path, {
        ClassName: Name
      });
    },
    goUrlorderList(path, row) {
      //订单跳转
      this.OpenNewUrl(path, {
        OrderId: row.OrderId
      });
    }
  }
};
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
