<style>
  @import "../css/cssReset.css";

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

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

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

  .RecPayQueryTeam ._icon_btn .icon-xueyuan {
    background-color: #47BF8C;
  }

  .RecPayQueryTeam ._icon_btn .icon-jiaoshi {
    background-color: #47BF8C;
  }

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

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

  .RecPayQueryTeam .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .RecPayQueryTeam .el-date-editor .el-range-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .RecPayQueryTeam .items-center .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .RecPayQueryTeam .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

</style>
<template>
  <div class="page-body RecPayQueryTeam">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">

        <div class="col-3">
          <q-select filled stack-label @input="getList()" option-value="SId" option-label="SName" v-model="msg.SchoolId"
            ref="SId" :options="schoolList" label="校区" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-select filled stack-label use-input input-debounce="0" option-value="ClassId" @input="getclassName"
            option-label="ClassName" v-model="choiceClass" :options="ClassList" label="班级" :dense="false" emit-value
            map-options @filter="filterFn">
            <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-field filled>
             <template v-slot:control>
              <el-date-picker class="h34" @change="getList()" v-model="valuemonth" type="daterange" :clearable='false'
                value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
              </el-date-picker>
            </template>
          </q-field>
        </div>
      </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;"></span> </span>
      <!-- <q-btn  color="primary"  size="11px"  label="导出"  @click="txexport"  style="margin-left:10px" /> -->
    </div>

    <template>
      <div class="cm_content" style="width: 100%;">
        <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="1" cellpadding="1"
          v-loading="loading">
          <tr>
            <th rowspan="2">班号</th>
            <th rowspan="2">班级名称</th>
            <th rowspan="2">上课课时</th>
            <th rowspan="2">上课学生</th>
            <th rowspan="2">当期收入</th>
            <th colspan="3">学生列表</th>
            <th rowspan="2">老师课时费</th>
            <th rowspan="2">老师绩效金额</th>
            <th rowspan="2">销售提成</th>
            <th rowspan="2">其他收入</th>
            <th rowspan="2">其他成本</th>

          </tr>
          <tr>
            <th width="">学生名称</th>
            <th width="">学习课时</th>
            <th width="">耗费金额</th>
          </tr>

          <tr v-for=" ( item , index ) in tableData ">
            <td>
              <span v-if="item.ClassNo=='合计'">{{item.ClassNo}}</span>
              <span v-else style="cursor: pointer;text-decoration: underline;"
                @click="goUrlClassNo('/sale/japaneseTrain',item.ClassNo)">{{item.ClassNo}}</span>
            </td>
            <td>
              <span style="cursor: pointer;text-decoration: underline;"
                @click="goUrlclass('/course/classManage',item.ClassName)">{{item.ClassName}}</span>
              <span v-if="item.ClassType!=undefined && item.ClassType == 1" style="color: #409EFF;">(培)</span>
              <span v-if="item.ClassType!=undefined && item.ClassType == 2" style="color: #F56C6C;">(留)</span>
              <span v-if="item.ClassType!=undefined "
                style="cursor: pointer;text-decoration: underline;margin-left: 5px;"
                @click="lookshouzhi(item)">查看收支</span>
              <span v-if="!item.ClassType">-</span>
            </td>
            <td>
              <span v-if='item.THoursNum!=undefined'>{{item.THoursNum}}</span>
              <span v-else>-</span>
            </td>
            <td>
              <span v-if='item.TStuNum!=undefined'>{{item.TStuNum}}</span>
              <span v-else>-</span>
            </td>
            <td>
              <span v-if='item.TStuMoney!=undefined'>{{item.TStuMoney}}</span>
              <span v-else>-</span>
            </td>
            <td>
              <div v-if='item.StuList && item.StuList.length>0'>
                <span v-if='item.show == true'>
                  <p v-for="( son , sIndex ) in item.StuList"><span style="cursor: pointer;text-decoration: underline;"
                      @click="gourlteacher2('studentsClassfee',son,item)">{{son.StuName}}</span>
                  </p>
                </span>
                <span v-if='item.show == false'>
                  <p v-for="( son , sIndex ) in item.StuList"> <span v-if='sIndex<3'> <span
                        style="cursor: pointer;text-decoration: underline;"
                        @click="gourlteacher2('studentsClassfee',son,item)">{{son.StuName}}</span></span>
                  </p>
                </span>
              </div>
              <div v-else>-</div>

            </td>
            <td>
              <div v-if='item.StuList && item.StuList.length>0'>
                <span v-if='item.show == true'>
                  <p v-for="( son , sIndex ) in item.StuList">{{son.KSNum}}</p>
                </span>
                <span v-if='item.show == false'>
                  <p v-for="( son , sIndex ) in item.StuList"> <span v-if='sIndex<3'>{{son.KSNum}}</span></p>
                </span>
              </div>
              <div v-else>-</div>

            </td>
            <td style="position: relative;">
              <div v-if='item.StuList && item.StuList.length>0'>
                <span v-if='item.show == true'>
                  <p v-for="( son , sIndex ) in item.StuList"><span style="cursor: pointer;text-decoration: underline;"
                      @click="gourlteacher2('studentsClassfee',son,item)">{{son.Money}}</span>
                    <span
                      style="position: absolute;right: 5px;cursor: pointer;text-decoration: underline;color: #409EFF;"
                      v-if='(sIndex+1)==item.StuList.length && item.show == true && item.StuList.length>3'
                      @click="tableData[index].show = false,$forceUpdate()">
                      <i class="el-icon-top"></i>
                      收起
                    </span>
                  </p>
                </span>
                <span v-if='item.show == false'>
                  <p v-for="( son , sIndex ) in item.StuList"> <span v-if='sIndex<3'><span
                        style="cursor: pointer;text-decoration: underline;"
                        @click="gourlteacher2('studentsClassfee',son,item)">{{son.Money}}</span></span>
                    <span
                      style="position: absolute;right: 5px;cursor: pointer;text-decoration: underline;color: #409EFF;"
                      v-if='sIndex==2 && item.show == false' @click="tableData[index].show = true,$forceUpdate()">
                      <i class="el-icon-bottom"></i>
                      展开
                    </span>
                  </p>
                </span>
              </div>
              <div v-else>-</div>
            </td>
            <td><span v-if='item.BonusMoney!=undefined'>{{item.BonusMoney}}</span><span v-else>-</span></td>
            <td><span v-if='item.PerfMoney!=undefined'>{{item.PerfMoney}}</span><span v-else>-</span></td>
            <td><span v-if='item.SellMoney!=undefined'>{{item.SellMoney}}</span><span v-else>-</span></td>
            <td><span v-if='item.OtherIncome!=undefined'>{{item.OtherIncome}}</span><span v-else>-</span></td>
            <td><span v-if='item.OtherCost!=undefined'>{{item.OtherCost}}</span><span v-else>-</span></td>
          </tr>

        </table>
        <div v-if='tableData.length==0'
          style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;">
          暂无数据
        </div>
      </div>
    </template>

  </div>
</template>
<script>
  import {
    getClassDropDownList,
    getSchoolDropdown
  } from '../../../api/school/index'
  import {
    getAllClassNowMonthStatistics,
  } from '../../../api/finance/index'
  import {
    EduDownLoad,
  } from '../../../api/common/common';
  export default {
    meta: {
      title: "月度班级收支统计"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        valuemonth: '',
        //列表数据参数
        msg: {

          ClassId: 0,
          ClassNo: '',
          SchoolId: -1,
          StartTime: '',
          EndTime: '',
        },
        tableData: [],
        alltableData: [],
        schoolList: [],
        ClassList: [],
        allClassList: [],
        choiceClass: 0,

      }
    },
    created() {
      if (this.$route.query) {
        if (this.$route.query.StartTime && this.$route.query.EndTime) {
          this.valuemonth = [this.$route.query.StartTime, this.$route.query.EndTime]
        }
        if (this.$route.query.SchoolId) {
          this.msg.SchoolId = Number(this.$route.query.SchoolId)
        }
      }

    },
    mounted() {
      this.getList();
      // this.setClass()
      this.getBranchList()
    },
    methods: {
      getList() {
        if (this.valuemonth != '' && this.valuemonth.length > 0) {
          this.msg.StartTime = this.valuemonth[0]
          this.msg.EndTime = this.valuemonth[1]
        } else {
          this.msg.StartTime = ''
          this.msg.EndTime = ''
        }
        this.loading = true;
        getAllClassNowMonthStatistics(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            this.tableData = res.Data
            this.tableData.forEach(x => {
              if (x.StuList.length > 3) {
                x.show = false
              } else {
                x.show = true
              }
            });
            this.alltableData = JSON.parse(JSON.stringify(this.tableData))
            this.ClassList = [{
              ClassId: 0,
              ClassName: '全部'
            }]
            this.allClassList = [{
              ClassId: 0,
              ClassName: '全部'
            }]
            this.alltableData.forEach(x => {
              let obj = {
                ClassId: x.ClassId,
                ClassName: x.ClassName
              }
              this.ClassList.push(obj)
              this.allClassList.push(obj)
            })
            if (this.tableData.length > 0) {
              this.getAskfor()

            }
          }
        })
      },
      getAskfor() { //求值
        let obj = {
          ClassNo: '合计',
          THoursNum: 0,
          TStuNum: 0,
          TStuMoney: 0,
          BonusMoney: 0,
          PerfMoney: 0,
          SellMoney: 0,
          OtherIncome: 0,
          OtherCost: 0,
        }
        this.tableData.forEach((x) => {
          if (x.THoursNum) {
            obj.THoursNum = this.accAdd(x.THoursNum, obj.THoursNum)
          };
          if (x.TStuNum) {
            obj.TStuNum = this.accAdd(x.TStuNum, obj.TStuNum)
          };
          if (x.TStuMoney) {
            obj.TStuMoney = this.accAdd(x.TStuMoney, obj.TStuMoney)
          };
          if (x.BonusMoney) {
            obj.BonusMoney = this.accAdd(x.BonusMoney, obj.BonusMoney)
          };
          if (x.PerfMoney) {
            obj.PerfMoney = this.accAdd(x.PerfMoney, obj.PerfMoney)
          };
          if (x.SellMoney) {
            obj.SellMoney = this.accAdd(x.SellMoney, obj.SellMoney)
          };
          if (x.OtherIncome) {
            obj.OtherIncome = this.accAdd(x.OtherIncome, obj.OtherIncome)
          };
          if (x.OtherCost) {
            obj.OtherCost = this.accAdd(x.OtherCost, obj.OtherCost)
          };

        })
        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;

      },
      getclassName() {
        let data = []
        this.alltableData.forEach(x => {
          if (x.ClassId == this.choiceClass) {
            data.push(x)
          }
        })
        if (this.choiceClass == 0) {
          this.tableData = JSON.parse(JSON.stringify(this.alltableData))
        } else {
          this.tableData = data
        }
        if (this.tableData.length > 0) {
          this.getAskfor()
        }

      },
      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          this.schoolList = res.Data;
          var obj = {
            SName: '全部',
            SId: -1
          }
          this.schoolList.unshift(obj);
        }).catch(() => {

        })
      },

      //筛选员工
      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)
          }
        })
      },
      txexport() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/finance/GetTeacherConsumptionHoursStatisticsToExcel", msg, '课耗统计.xls')
      },
      gourlteacher2(path, row, item) {
        let StudentName = encodeURI(row.StuName)
        this.OpenNewUrl('/financial/' + path, {
          ClassId: item.ClassId,
          StudentName: StudentName,
          datetype: '2',
          StartMonth: this.msg.StartTime.split('-')[0] + '-' + this.msg.StartTime.split('-')[1],
          EndMonth: this.msg.EndTime.split('-')[0] + '-' + this.msg.EndTime.split('-')[1],
        });
      },
      goUrlclass(path, Names) { //班级跳转
        let Name = encodeURI(Names)
        this.OpenNewUrl(path, {
          ClassName: Name,
        });
      },
      goUrlClassNo(path, Names) {
        let Name = encodeURI(Names)
        this.OpenNewUrl(path, {
          ClassNo: Name,
        });
      },
      lookshouzhi(item) {
        let Name = encodeURI(item.ClassName)
        this.OpenNewUrl('/course/paymentDetail', {
          ClassId: item.ClassId,
          School_Id: this.msg.SchoolId,
          ClassName: Name,
        });
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
