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

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

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

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

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

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

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

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

    .lessonCostStatistics .items-center .el-input__inner {
        width: 100%;
        border: none;
        background-color: transparent;
    }
</style>
<template>
    <div class="page-body lessonCostStatistics">
        <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 @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="valuemonth" type="month" placeholder="选择月份" value-format="yyyy-MM"
                                @change="handleCurrentChanges(1)">
                            </el-date-picker>     -->
                            <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 style="font-size: 16px;"></span> </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="SchoolName" label="校区"></el-table-column>
                <el-table-column prop="LeaveStatus" label="职务"> </el-table-column>
                <el-table-column prop="EmployeeName" 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="KSMoney" label="课时费"> </el-table-column>
                <el-table-column prop="StuLearnMoney" label="学生上课金额"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="_icon_btn">
                            <el-tooltip class="item" effect="dark" content="查看老师" placement="top">
                                <i class="iconfont icon-jiaoshi"
                                    @click="goUrl('teacherclassfee',scope.row.AccountId)"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="查看学生" placement="top">
                                <i class="iconfont icon-xueyuan"
                                    @click="goUrl('studentsClassfee',scope.row.AccountId)"></i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
            <div style="margin-top: 10px;text-align: center;">
                <el-pagination background @current-change="handleCurrentChanges"
                    layout="total,prev, pager, next, jumper" :current-page.sync="msg.pageIndex"
                    :page-size="msg.pageSize" :total='total'>
                </el-pagination>
            </div>

        </template>

    </div>
</template>
<script>
    import {
        getSchoolDropdown,
        getTeacherDropDownList
    } from '../../api/school/index'
    import {
        getTeacherConsumptionHoursStatistics,
    } 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: '',
                },
                datetype: '2',
                pageCount: 0,
                listData: {},
                tableData: [],
                total: 0,
                CompanyList: [],
                TeacherList: [],
                datetypelist: [
                    { Id: '2', Name: '月份' },
                    { Id: '1', Name: '年份' },
                ]
            }
        },
        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()

        },
        mounted() {
            this.getList();//获取提成周期列表
            this.getBranchList()
            this.GetTeacherList();//老师下拉

        },
        methods: {
            getList() {
                if (this.datetype == 1) {
                    this.msg.StartMonth = this.valueyear + '-01';
                    this.msg.EndMonth = this.valueyear + '-12';
                } 
                this.loading = true;
                getTeacherConsumptionHoursStatistics(this.msg).then(res => {
                    if (res.Code == 1) {
                        this.loading = false;
                        this.tableData = res.Data.PageData
                        this.total = res.Data.Count
                    }
                })
            },
            //获取教师下拉
            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.OpenNewUrl('/financial/' + path, {
                    id: id,
                    datetype:this.datetype,
                    valueyear:this.valueyear,
                    StartMonth:this.msg.StartMonth,
                    EndMonth:this.msg.EndMonth,
                });
            },
            handleCurrentChanges(val) {
                this.msg.pageIndex = 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/GetTeacherConsumptionHoursStatisticsToExcel", 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;
            }


        },
    }

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