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

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

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

  .AchievementsForOrderList ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }

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

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

</style>
<template>
  <div class="page-body AchievementsForOrderList">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-btn  color="primary"  size="11px"  label="返回"  @click="goreturn"  style="margin-left:10px" />
        </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="校区" width='150' :filters='SchoolNamelist' :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="DeptName" label="部门" :filters='DeptNamelist' :filter-method="filterHandler">
        </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="人员" :filters='UserNamelist' :filter-method="filterHandler">
        </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 v-if="scope.row.StudentCount">学生数量:{{scope.row.StudentCount}}人</div>
            <div v-if="scope.row.ClassNo">班号:{{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 v-if="scope.row.TotalCommissionMoney" 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 v-if="scope.row.OtherMoney">额外奖励:{{scope.row.OtherMoney}}</div>
            <div v-if="scope.row.BackMoney">额外扣除:{{scope.row.BackMoney}}</div>
            <div v-if="scope.row.GiveOutMoney">累计已发:{{scope.row.GiveOutMoney}}</div>
          </template>

        </el-table-column>
        <el-table-column prop="IsFirstCommission" label="首次发放">
          <template slot-scope="scope">
            <div  v-if="scope.row.IsFirstCommission">{{scope.row.IsFirstCommission==1?'是':'否'}}</div>
          </template>
        </el-table-column>
         <el-table-column prop="TotalHours" label="课时统计" width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.TotalHours">总计课时:{{ scope.row.TotalHours }}</div>
            <div v-if="scope.row.TotalLearn">
              学习课时:<div
                style=" display: inline-block;cursor: pointer;text-decoration: underline;"
                @click="goUrlkehao('/financial/studentsClassfee', scope.row)"
              >{{ scope.row.TotalLearn }}</div>
            </div>
            <div
              v-if="scope.row.CurrentHours"
            >当期课时:{{ scope.row.CurrentHours >= 0 ? scope.row.CurrentHours : '-' }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="TotalHours" label="总课时"> </el-table-column>
        <el-table-column width='110' prop="TotalLearn" label="已学习课时"> </el-table-column>
        <el-table-column width='110' prop="CurrentHours" label="当期消费课时">
          <template slot-scope="scope">
            <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 v-if="scope.row.CurrentPeriodMoney" style="color: rgb(255, 156, 0);">应发:{{scope.row.CurrentPeriodMoney}}</div>
            <div v-if="scope.row.CurrentExtraMoney">额外奖励:{{scope.row.CurrentExtraMoney}}</div>
            <div v-if="scope.row.DeductionMoney">抵扣:{{scope.row.DeductionMoney}}</div>
            <div v-if="scope.row.DeductionExtraMoney">奖励抵扣:{{scope.row.DeductionExtraMoney}}</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>
    </template>

  </div>
</template>
<script>
  import {
    GetClassTypePageList,
  } from '../../../api/system/index';
  import {
    getSellAchievementsForOrderList,
    getSellAchievementsChangeLog
  } from '../../../api/finance/index'
  import {
    getClassDropDownList,
  } from "../../../api/school/index";
  export default {
    meta: {
      title: "订单提成查询"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          PeriodId: 0,
          UserId: 0,
          ClassId: 0,
          OrderId: '',
        },
        pageCount: 0,
        persistent: false,
        listData: {},
        tableData: [],
        company: [],
        department: [],
        ClassList: [],
        allClassList: [],

        SchoolNamelist: [],
        DeptNamelist: [],
        UserNamelist: [],
        see_tcdetailed: false,
        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
      }
      if (this.$route.query && this.$route.query.UserId) {
        this.msg.UserId = this.$route.query.UserId
      }
      

      this.getList()
      // this.setClass()
    },
    methods: {

      getList() {
        if (this.msg)
          this.loading = true;
        getSellAchievementsForOrderList(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;

            this.tableData = res.Data
            this.SchoolNamelist = [];
            this.DeptNamelist = [];
            this.UserNamelist = [];
            let obj_t = {
              SchoolName: '合计',
              YFMoney: 0,
            }
            this.tableData.forEach(x => {
              let obj = {
                text: x.SchoolName,
                value: x.SchoolName
              }
              let obj2 = {
                text: x.DeptName,
                value: x.DeptName
              }
              let obj3 = {
                text: x.UserName,
                value: x.UserName
              }
              this.SchoolNamelist.push(obj)
              this.DeptNamelist.push(obj2)
              this.UserNamelist.push(obj3)
              if (x.YFMoney) {
                obj_t.YFMoney = this.accAdd(x.YFMoney, obj_t.YFMoney)
              };
            })
            this.tableData.push(obj_t)

            this.SchoolNamelist = this.unique(this.SchoolNamelist)
            this.DeptNamelist = this.unique(this.DeptNamelist)
            this.UserNamelist = this.unique(this.UserNamelist)

          }
        })
      },
      accAdd(arg1, arg2) { //js 加法精确计算
        var r1, r2, m;
        try {
          r1 = arg1.toString().split(".")[1].length;

        } catch (e) {
          r1 = 0;
        }

        try {
          r2 = arg2.toString().split(".")[1].length;

        } catch (e) {
          r2 = 0;

        }
        m = Math.pow(10, Math.max(r1, r2));
        return (arg1 * m + arg2 * m) / m;

      },
      unique(arr, Name) { //数组去重
        const res = new Map();
        return arr.filter(
          (list) => !res.has(list.text) && res.set(list.text, 1)
        );
      },
      //选择班级
      setClass(item) {
        this.isShowClass = true;
        getClassDropDownList({
          CourseId: 0,
          IsAddDefault: 1, //添加默认选项
        }).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            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)
          }
        })
      },

      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;
      },
      goreturn() {
        this.$router.go(-1);
      },
      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>
