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

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

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

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

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

  .userCommissionDetails .el-table td,
  .el-table th {
    padding: 5px 0;
  }

</style>
<template>
  <div class="page-body userCommissionDetails">
    <div class="page-search row items-center">
      <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">
          <q-select @input="getList" filled stack-label option-value="Id" option-label="EmployeeName" use-input
            input-debounce="0" v-model="msg.UserId" :options="PersionList" label="销售" :dense="false" 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>
        <div class="col-3">
          <q-input filled v-model="msg.OrderId" @keyup.enter.native="getList()" label="订单号" />
        </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" width="130" label="校区"></el-table-column>
                <el-table-column prop="DeptName" width="100" label="部门"></el-table-column>
         <el-table-column prop="AccountName" width="100"  label="销售"></el-table-column>
               <el-table-column prop="OrderId" width="80" 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 prop="OrderGuestNum" width="80" label="订单人数"></el-table-column>
                <el-table-column prop="OrderIncom" width="85" label="订单实收"></el-table-column>
        <el-table-column prop="OrderMoney" width="85" label="提成金额">
          <template slot-scope="scope">
            <div style="color: rgb(233, 82, 82);">{{ scope.row.OrderMoney }}</div>
          </template>
        </el-table-column>
          <el-table-column prop="ClassName" width="180" label="班级"></el-table-column>
                <el-table-column prop="ClassGuestNum" width="80" label="班级人数"></el-table-column>
        <el-table-column prop="Periods" width="80" label="期数"></el-table-column>
        <el-table-column prop="Remarks" width="" label="备注"></el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
  import {
    date
  } from 'quasar'
  import {
    GetClassTypePageList,
  } from '../../../api/system/index';
  import {
    GetLanguagePeriodDetails,
    getSellAchievementsChangeLog
  } from '../../../api/finance/index'
  import {
    queryEmployee
  } from '../../../api/users/user'
  import {
    getClassDropDownList,
  } from "../../../api/school/index";
  export default {
    meta: {
      title: "员工提成明细列表"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          PeriodId: 0,
          UserId: 0,
          ClassId: 0,
          OrderId: '',
          UserIds: '',
        },
        pageCount: 0,
        persistent: false,
        listData: {},
        tableData: [],
        company: [],
        department: [],
        ClassList: [],
        allClassList: [],
        ChangeLog: '',
        PersionList: [], //员工列表
        AllemployeeList: [], //所有员工
      }
    },
    created() {},
    mounted() {
      if (this.$route.query && this.$route.query.userId) {
        this.msg.UserId = Number(this.$route.query.userId)
      }
      if (this.$route.query && this.$route.query.preriodId) {
        this.msg.PeriodId = this.$route.query.preriodId
      }
      if (this.$route.query && this.$route.query.UserIds) {
        this.msg.UserIds = this.$route.query.UserIds
      }
      this.getList()
      this.setClass()
      this.getEmployee()
    },
    methods: {

      getList() {
        if (this.msg)
          this.loading = true;
        GetLanguagePeriodDetails(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            this.tableData = res.Data
            if (this.tableData.length > 0) {
              this.getAskfor()
            }
          }
        })
      },
      getAskfor() { //求值
        let obj = {
          SchoolName: '合计',
          OrderMoney: 0,
        }
        this.tableData.forEach((x) => {
          obj.OrderMoney += x.OrderMoney
        })
        this.tableData.push(obj)
      },
      //选择班级
      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)
          }
        })
      },
      //获取员工列表
      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));;
            }
          }
        })
      },
      //筛选员工
      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)
          }
        })
      },
      goUrl(path, id) {
        this.$router.push({
          path: '/financial/' + path,
          query: {
            "id": id,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      StudentCount(a, b) {
        return a.StudentCount - b.StudentCount;
      },
      goorderUrl(row) {
        this.$router.push({
          path: '/financial/market/AchievementsForOrderList',
          query: {
            OrderId: row.OrderId,
            UserId: row.UserId,
            blank: 'y',
          }
        })
      },
      goreturn() {
        this.$router.go(-1);
      },
      goUrlorderList(path, row) { //订单跳转
        if (row.OrderId != -1) {
          this.OpenNewUrl(path, {
            OrderId: row.OrderId,
            // EnterID:row.UserId
          });
        } 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
          });
        }

      },
      goUrlclass(path, Names) { //班级
        let Name = encodeURI(Names)
        this.OpenNewUrl(path, {
          ClassName: Name,
        });
      },
      goUrlkehao(path, row) { //跳转到学生课耗
        let StartMonth = ''
        let EndMonth = ''
        if (row.IsFirstCommission == 1) {
          EndMonth = row.Periods
        } else {
          if (row.Periods.indexOf('~') != -1) {
            StartMonth = row.Periods.split('~')[0];
            EndMonth = row.Periods.split('~')[1];
          } else {
            StartMonth = row.Periods;
            EndMonth = row.Periods

          }

        }
        this.OpenNewUrl(path, {
          OrderId: row.OrderId,
          StartMonth: StartMonth,
          EndMonth: EndMonth,
          comefrom: 1,
        });
      },
      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>
