<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 filled stack-label input-debounce="0" option-value="TId" @input="getList"
                        option-label="TeacherName" v-model="msg.TeacherId" :options="TeacherList" label="老师"
                        :dense="false" 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>
    <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='150' label="校区"></el-table-column>
        <el-table-column prop="DeptName" label="部门"></el-table-column>
        <el-table-column prop="TeacherName" label="教师"></el-table-column>
        <el-table-column prop="ContributeType" label="投稿类型"> </el-table-column>
        <el-table-column width='80' prop="ContributeId" label="投稿编码">
          <template slot-scope="scope">
            <div style="cursor: pointer;text-decoration: underline;" @click="showXQ(scope.row.ContributeId)">
              {{scope.row.ContributeId}}</div>
          </template>
        </el-table-column>
        <el-table-column width='250' prop="ContributeTitle" label="投稿标题"> </el-table-column>
        <el-table-column prop="CommissionMoney" label="提成金额"> </el-table-column>
        <el-table-column width='90' prop="Periods" label="期数"> </el-table-column>
        <el-table-column prop="Remark" width='160' label="备注"> </el-table-column>
      </el-table>
    </template>
    <div v-if="isDetails==true">
      <contributionXQ :ContributeId="ContributeId" @close='isDetails=false'></contributionXQ>
    </div>
  </div>
</template>
<script>
  import contributionXQ from './contributionXQ'

  import {
    GetClassTypePageList,
  } from '../../../api/system/index';
  import {
    getTeaConCommissionUserDetailList,
  } from '../../../api/finance/index'
  import {
    getClassDropDownList,
    getTeacherDropDownList
  } from "../../../api/school/index";

  export default {
    meta: {
      title: "用户提成明细"
    },
    props: {},
    components: {
      contributionXQ
    },
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          PeriodId: 0,
          TeacherId: 0,
          TeacherIds: ''
        },
        pageCount: 0,
        persistent: false,
        listData: {},
        tableData: [],
        company: [],
        department: [],
        ClassList: [],
        allClassList: [],
        TeacherList: [],
        allTeacherList: [],
        ContributeId: 0,
        isDetails: false,
      }
    },
    created() {},
    mounted() {

      if (this.$route.query && this.$route.query.userId) {
        this.msg.TeacherId = 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.TeacherIds) {
        this.msg.TeacherIds = this.$route.query.TeacherIds
      }
      this.getList()
      this.GetTeacherList()
    },
    methods: {

      getList() {
        if (this.msg)
          this.loading = true;
        getTeaConCommissionUserDetailList(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: '合计',
          CommissionMoney: 0,
        }
        this.tableData.forEach((x) => {
          if (x.CommissionMoney) {
            obj.CommissionMoney = this.accAdd(x.CommissionMoney, obj.CommissionMoney)
          };
        })
        this.tableData.push(obj)
      },
      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;
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            jsonData.unshift({
              TeacherName: '不限',
              TId: 0
            })
            this.TeacherList = JSON.parse(JSON.stringify(jsonData));
          }
        })
      },
      //选择班级
      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.TeacherList = JSON.parse(JSON.stringify(this.allTeacherList))
          } else {
            const needle = val.toLowerCase()
            this.TeacherList = this.allTeacherList.filter(v => v.TeacherName.toLowerCase().indexOf(needle) > -1)
          }
          this.$forceUpdate();
        })
      },
      goreturn() {
        this.$router.go(-1);
      },
      showXQ(ContributeId) { //弹出显示详情
        this.ContributeId = ContributeId;
        this.isDetails = true
      }
    },
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>