<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">{{son.Money}}
                                        <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'>{{son.Money}}</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){
                console.log(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>