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

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

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

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

    .monthLessonCost .singeRowTable tr th {
        border: 1px solid #d2d2d2;
    }
</style>
<template>
    <div class="page-body monthLessonCost">
        <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 use-input input-debounce="0" option-value="ClassId" @input="getList"
                        option-label="ClassName" v-model="ClassId" :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>
        </div>
        <template>
            <div class="cm_content" style="width: 100%;">
                <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0"
                    cellpadding="0" v-loading="loading">
                    <tr>
                        <th rowspan="2">月份</th>
                        <th colspan="4">老师列表</th>
                        <th rowspan="2">学生数量</th>
                        <th rowspan="2">学生总课时</th>
                        <th rowspan="2">学生消费总金额</th>
                        <th colspan="3">学生列表</th>
                    </tr>
                    <tr>
                        <th width="">老师名称</th>
                        <th width="">总课时</th>
                        <th width="">基础课时</th>
                        <th width="">课时费</th>
                        <th width="">学生名称</th>
                        <th width="">学习课时</th>
                        <th width="">耗费金额</th>

                    </tr>

                    <tr v-for=" ( item , index ) in dataList ">
                        <td>
                            <span>{{item.Month}}</span>
                        </td>
                        <td>
                            <p v-for="( son , sIndex ) in item.TeacherList"><span
                                    style="cursor: pointer;text-decoration: underline;"
                                    @click="gourlteacher('teacherclassfee',son,item)">{{son.TeacherName}}</span></p>
                        </td>
                        <td>
                            <p v-for="( son , sIndex ) in item.TeacherList">{{son.HoursNum}}</p>
                        </td>
                        <td>
                            <p v-for="( son , sIndex ) in item.TeacherList">{{son.BaseHoursNum}}</p>
                        </td>
                        <td>
                            <p v-for="( son , sIndex ) in item.TeacherList">{{son.HoursMoney}}</p>
                        </td>
                        <td>
                            <span>{{item.StuNum}}</span>
                        </td>
                        <td>
                            <span>{{item.StuSumHours}}</span>
                        </td>
                        <td>
                            <span>{{item.StuSumMoney}}</span>
                        </td>
                        <td>
                            <span v-if='item.show == true'>
                                <p v-for="( son , sIndex ) in item.StudentList"><span style="cursor: pointer;text-decoration: underline;" @click="gourlteacher2('studentsClassfee',son,item)">{{son.StudentName}}</span>
                                </p>
                            </span>
                            <span v-if='item.show == false'>
                                <p v-for="( son , sIndex ) in item.StudentList"> <span v-if='sIndex<3'> <span
                                            style="cursor: pointer;text-decoration: underline;" @click="gourlteacher2('studentsClassfee',son,item)">{{son.StudentName}}</span></span>
                                </p>
                            </span>
                        </td>
                        <td>
                            <span v-if='item.show == true'>
                                <p v-for="( son , sIndex ) in item.StudentList">{{son.HoursNum}}</p>
                            </span>
                            <span v-if='item.show == false'>
                                <p v-for="( son , sIndex ) in item.StudentList"> <span
                                        v-if='sIndex<3'>{{son.HoursNum}}</span></p>
                            </span>
                        </td>
                        <td style="position: relative;">
                            <span v-if='item.show == true'>
                                <p v-for="( son , sIndex ) in item.StudentList">{{son.HoursMoney}}
                                    <span
                                        style="position: absolute;right: 5px;cursor: pointer;text-decoration: underline;color: #409EFF;"
                                        v-if='(sIndex+1)==item.StudentList.length && item.show == true && item.StudentList.length>3'
                                        @click="dataList[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.StudentList"> <span
                                        v-if='sIndex<3'>{{son.HoursMoney}}</span>
                                    <span
                                        style="position: absolute;right: 5px;cursor: pointer;text-decoration: underline;color: #409EFF;"
                                        v-if='sIndex==2 && item.show == false'
                                        @click="dataList[index].show = true,$forceUpdate()">
                                        <i class="el-icon-bottom"></i>
                                        展开
                                    </span>
                                </p>
                            </span>
                        </td>

                    </tr>

                </table>
                <div v-if='dataList.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 {
        GetClassMonthStatistics,
    } from '../../api/teacher/index';
    import {
        getClassDropDownList
    } from '../../api/school/index'
    export default {
        meta: {
            title: "班级月度课耗"
        },
        props: {},
        components: {},
        data() {
            return {
                ClassId: 0,
                ClassName:'',
                loading: false,
                dataList: [], //列表数据
                ClassList: [],
                allClassList: [],
            }
        },
        created() {
            if (this.$route.query && this.$route.query.ClassId) {
                this.ClassId = Number(this.$route.query.ClassId)
                this.ClassName = this.$route.query.ClassName
            }
        },
        mounted() {
            this.getList(); //获取规则
            this.setClass()
        },
        methods: {
            getList() {
                this.loading = true;
                GetClassMonthStatistics({ ClassId: this.ClassId }).then(res => {
                    if (res.Code == 1) {
                        this.loading = false;
                        this.dataList = res.Data
                        this.dataList.forEach(x => {
                            if (x.StudentList.length > 3) {
                                x.show = false
                            } else {
                                x.show = true
                            }
                        });
                    }
                })
            },
            setClass(item) {//班级
                this.isShowClass = true;
                getClassDropDownList({
                    CourseId: 0,
                    IsAddDefault: 0, //添加默认选项
                }).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)
                    }
                })
            },
            gourlteacher(path,row,item) {
                this.OpenNewUrl('/financial/'+path, {
                    ClassName: this.ClassName,
                    id: row.TeacherId,
                    datetype:'2',
                    StartMonth:item.Month,
                    EndMonth:item.Month,
                });
            },
            gourlteacher2(path,row,item) {
                let StudentName = encodeURI(row.StudentName)
                this.OpenNewUrl('/financial/'+path, {
                    ClassId: this.ClassId,
                    StudentName:StudentName,
                    datetype:'2',
                    StartMonth:item.Month,
                    EndMonth:item.Month,
                });
            }

        },
    }

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