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

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

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

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

    .teacherclassfee ._icon_btn .icon-add {
        background-color: #47BF8C;
    }

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

    .teacherclassfee .el-table td,
    .el-table th {
        padding: 5px 0;
    }
    .teacherclassfee .el-input {
        width: 100%;
        border: none;
        background-color: transparent;
    }

    .teacherclassfee .items-center .el-input__inner {
        width: 100%;
        border: none;
        background-color: transparent;
    }
</style>
<template>
    <div class="page-body teacherclassfee">
        <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="handleCurrentChanges(1)" option-value="SId"
                        option-label="SName" v-model="msg.SchoolId" ref="SId" :options="CompanyList" label="校区"
                        :dense="false" emit-value map-options />
                </div>
                <div class="col-3">
                    <q-select filled stack-label @input="handleCurrentChanges(1)" option-value="TId"
                        option-label="TeacherName" v-model="msg.TeacherId" ref="TId" :options="TeacherList" 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" clearable @input="getList"
                        option-label="ClassName" v-model="msg.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 class="col-3">
                    <q-select filled stack-label @input="handleCurrentChanges(1)" option-value="Id" option-label="Name" v-model="datetype" ref="Id"
                        :options="datetypelist" label="日期类型" :dense="false" emit-value map-options />
                </div>
                <div class="col-3" v-if='datetype==1'>
                    <q-field filled>
                         <template v-slot:control>
                            <el-date-picker v-model="valueyear" type="year" placeholder="选择年份" value-format="yyyy" :clearable='false'
                                @change="handleCurrentChanges(1)">
                            </el-date-picker>    
                        </template>
                    </q-field>
                </div>
                <div class="col-3" v-if='datetype==2'>
                    <q-field filled>
                         <template v-slot:control>
                            
                            <el-date-picker v-model="msg.StartMonth" type="month" placeholder="开始月份" size="small" style="width:47%;" value-format="yyyy-MM" :clearable='false'
                                @change="choicemonth(1)" clear-icon="iconfont icon-guanbi">
                            </el-date-picker>至
                            <el-date-picker v-model="msg.EndMonth" type="month" placeholder="结束月份" size="small" style="width:47%;" value-format="yyyy-MM" :clearable='false'
                                @change="choicemonth(2)" clear-icon="iconfont icon-guanbi">
                            </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>
            <q-btn  color="primary" size="11px" label="导出" @click="txexport" style="margin-left:10px"/>
        </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="Date" label="上课日期"></el-table-column>
                <el-table-column prop="TimeBucket" label="上课时间段"> </el-table-column>
                <el-table-column prop="TeacherName" label="老师名称"></el-table-column>
                <el-table-column prop="ClassNo" label="班号"></el-table-column>
                <el-table-column prop="ClassName" label="上课班级" width='200' :filters='ClassNameList' :filter-method="filterHandler" :filtered-value="ClassName" >
                    <template slot="header">
                        <span>上课班级 <span style="font-size: 10px;color: #409EFF;">（筛选）</span> </span> 
                    </template>
                </el-table-column>
                <el-table-column prop="CourseName" label="课程" width='230'></el-table-column>
                <el-table-column prop="UnitPrice" label="课时单价"></el-table-column>
                <el-table-column prop="KSNum" label="上课课时"></el-table-column>
                <el-table-column prop="DKNum" label="基础课时"></el-table-column>
                <el-table-column prop="Hours" label="课时转换/小时"> </el-table-column>
                <el-table-column prop="HourMoney" label="课时费单价元/小时"></el-table-column>
                <el-table-column prop="KSMoney" label="老师课时费"></el-table-column>
            </el-table>
            <div style="margin-top: 10px;text-align: center;">
                <el-pagination background @current-change="handleCurrentChanges"
                    @size-change="handleSizeChange"
                    layout="total,sizes,prev, pager, next, jumper" :current-page.sync="msg.pageIndex"
                    :page-sizes="[15, 1000, 10000]"
                    :page-size="msg.pageSize" :total='total'>
                </el-pagination>
            </div>

        </template>

    </div>
</template>
<script>
  
    import {
        getSchoolDropdown,
        getClassDropDownList,
        getTeacherDropDownList
    } from '../../api/school/index'
    import {
        getTeacherConsumptionHoursDetialPageList,
    } from '../../api/finance/index'
    import {
        EduDownLoad,
    } from '../../api/common/common';
    export default {
        meta: {
            title: "老师课时消费明细列表"
        },
        props: {},
        components: {},
        data() {
            return {
                loading: false,
                valuemonth: '',
                valueyear: '',
                //列表数据参数
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    TeacherId: '-1',
                    SchoolId: '-1',
                    StartMonth: '',
                    EndMonth: '',
                    ClassId:0,
                },
                datetype: '2',
                pageCount: 0,
                listData: {},
                tableData: [],
                total: 0,
                CompanyList: [],
        
                TeacherList: [],
                datetypelist: [
                    { Id: '2', Name: '月份' },
                    { Id: '1', Name: '年份' },
                ],
                ClassList: [],
                allClassList: [],
                ClassNameList:[],
                ClassName:'',
            }
        },
        created() {
            let userinfo = this.getLocalStorage();
            var myDate = new Date();
            this.msg.StartMonth = myDate.getFullYear() + "-" + (myDate.getMonth() + 1)
            this.msg.EndMonth = myDate.getFullYear() + "-" + (myDate.getMonth() + 1)
            this.valueyear  = myDate.getFullYear().toString()
            if(this.$route.query && this.$route.query.id){
                this.msg.TeacherId = Number(this.$route.query.id)
            }
            if(this.$route.query && this.$route.query.datetype){
                this.datetype = this.$route.query.datetype
            }
            if(this.$route.query && this.$route.query.valueyear){
                this.valueyear = this.$route.query.valueyear
            }
            if(this.$route.query && this.$route.query.StartMonth){
                this.msg.StartMonth = this.$route.query.StartMonth
            }
            if(this.$route.query && this.$route.query.EndMonth){
                this.msg.EndMonth = this.$route.query.EndMonth
            }
            if(this.$route.query && this.$route.query.ClassName){
                let Name = decodeURI(this.$route.query.ClassName)
                this.ClassName = [Name]
                this.msg.pageSize = 1000
            }
        },
        mounted() {
            this.getList();//获取提成周期列表
            this.getBranchList()
            this.GetTeacherList();//老师下拉
            this.setClass()
        },
        methods: {
            getList() {
            
                if (this.datetype == 1) {
                    this.msg.StartMonth = this.valueyear + '-01';
                    this.msg.EndMonth = this.valueyear + '-12';
                } 
                this.loading = true;
                getTeacherConsumptionHoursDetialPageList(this.msg).then(res => {
                    if (res.Code == 1) {
                        this.loading = false;
                        this.tableData = res.Data.PageData
                        this.ClassNameList=[],
                        this.tableData.forEach(x => {
                            let obj = {
                                text: x.ClassName,
                                value: x.ClassName
                            }
                          
                            this.ClassNameList.push(obj)
                   
                        })
                        this.ClassNameList = this.unique(this.ClassNameList)
                       
                        this.total = res.Data.Count
                    
                    }
                })
            },
            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)
                }
                })
            },
            //获取教师下拉
            GetTeacherList() {
                getTeacherDropDownList({}).then(res => {
                    if (res.Code == 1) {
                        this.TeacherList = res.Data;
                        var obj = {
                            TeacherName: '全部',
                            TId: '-1'
                        }
                        this.TeacherList.unshift(obj);
                    }
                })
            },

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

                })
            },
            goUrl(path, id) {
                this.$router.push({
                    path: '/financial/' + path,
                    query: {
                        "id": id,
                        blank: 'y',
                    }
                })
            },
            handleCurrentChanges(val) {
                this.msg.pageIndex = val;
                this.getList()
            },
            handleSizeChange(val){
                this.msg.pageIndex = 1;
                this.msg.pageSize = val;
                this.getList()
            },
            txexport(){
          
                let text = '';
                if (this.datetype == 2) {
                    if(new Date(this.msg.StartMonth).getTime() == new Date(this.msg.EndMonth).getTime()){
                        text = this.msg.StartMonth+'课耗老师明细.xls'
                    }else{
                        text = this.msg.StartMonth+'-'+ this.msg.EndMonth +'课耗老师明细.xls'
                    }
                } else if (this.datetype == 1) {
                    text = this.valueyear+'年课耗老师明细.xls'
                }
                var msg = JSON.parse(JSON.stringify(this.msg));
                EduDownLoad("/finance/GetTeacherConsumptionHoursDetialPageListToExcel", msg, text)
            },
            choicemonth(val){
                let StartMonth = JSON.parse(JSON.stringify(this.msg.StartMonth))
                let EndMonth = JSON.parse(JSON.stringify(this.msg.EndMonth))
                if(val==1){//判断选择的时候开始时间大于结束时间的处理
                    if(new Date(StartMonth).getTime() > new Date(EndMonth).getTime()){
                        this.msg.EndMonth = this.msg.StartMonth
                    }
                }else{
                    if(new Date(this.msg.StartMonth).getTime() > new Date(this.msg.EndMonth).getTime()){
                        this.msg.StartMonth = this.msg.EndMonth
                    }
                }
                let diff =  this.dateMinus(this.msg.StartMonth,this.msg.EndMonth)
                if(diff >11){
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `月份不能超过12个月`
                    })
                    if(val==1){//如果超哥12过月的处理
                        this.msg.StartMonth = this.msg.EndMonth
                    }else{
                        this.msg.EndMonth = this.msg.StartMonth
                    }
                     return
                }
                setTimeout(()=>{
                    this.handleCurrentChanges(1)
                },10)
                
            },
            //两个日期相差几个月
            dateMinus(d1, d2) {
                var m1 = parseInt(d1.split("-")[1].replace(/^0+/, "")) + parseInt(d1.split("-")[0]) * 12;
                        var m2 = parseInt(d2.split("-")[1].replace(/^0+/, "")) + parseInt(d2.split("-")[0]) * 12;
                var diff = m2 - m1;
                
                return diff;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },


        },
    }

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