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

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

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

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

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

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

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

    .studentsClassfee .el-input__inner {
        width: 100%;
        border: none;
        background-color: transparent;
    }
</style>
<template>
    <div class="page-body studentsClassfee">
        <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-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.OrderId" label="订单号"
                        @clear="handleCurrentChanges(1)" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.StudentName" label="学生名称"
                        @clear="handleCurrentChanges(1)" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.ContractNo" label="合同编号"
                        @clear="handleCurrentChanges(1)" maxlength="20" />
                </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"
                                @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>    
                        </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="OrderId" label="订单号">
                    <template slot-scope="scope">
                        <div style="text-decoration: underline;cursor: pointer;" @click='gobaoming(scope.row.OrderId)'>
                           {{scope.row.OrderId}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ContractNo" width='150' label="合同号"></el-table-column>
                <el-table-column prop="ClassDate" label="上课日期"></el-table-column>
                <el-table-column prop="TimeBucket" label="上课时间段"> </el-table-column>
                <el-table-column prop="GuestName" label="学生名称"> </el-table-column>
                <el-table-column prop="ClassName" label="上课班级"> </el-table-column>
                <el-table-column prop="CourseName" label="课程"></el-table-column>
                <el-table-column prop="TeacherName" label="老师名称"></el-table-column>

                <el-table-column prop="CurrentDeductionHours" label="课时"></el-table-column>
                <el-table-column prop="UnitPrice"> 
                    <template slot="header">
                       <div>合同单价</div> 
                       <div>（元/课时）</div> 
                      </template>
                </el-table-column>
                <el-table-column prop="XHMoney" label="课耗（消耗合同金额）"> </el-table-column>
                <el-table-column prop="SaleName" label="提成销售"></el-table-column>
                <el-table-column prop="HelpEnterName" label="提成老师"></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 {
        getStudentConsumptionHoursDetialPageList,
    } 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: '',
                    StudentName:'',
                    OrderId:'',
                    ContractNo:'',
                },
                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.valuemonth = 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)
            }
        },
        mounted() {
            this.getList();//获取提成周期列表
            this.getBranchList()
            this.GetTeacherList();//老师下拉

        },
        methods: {
            getList() {
                if(this.valuemonth ==null || this.valueyear==null){
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `请选择日期`
                    })
                     return
                }
                if (this.datetype == 2) {
                    this.msg.StartMonth = this.valuemonth;
                    this.msg.EndMonth = this.valuemonth;
                } else if (this.datetype == 1) {
                    this.msg.StartMonth = this.valueyear + '-01';
                    this.msg.EndMonth = this.valueyear + '-12';
                }
                this.loading = true;
                getStudentConsumptionHoursDetialPageList(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.$router.push({
                    path: '/financial/' + path,
                    query: {
                        "id": id,
                        blank: 'y',
                    }
                })
            },
            handleCurrentChanges(val) {
                this.msg.pageIndex = val;
                this.getList()
            },
            txexport(){
                var msg = JSON.parse(JSON.stringify(this.msg));
                EduDownLoad("/finance/GetStudentConsumptionHoursDetialPageListToExcel", msg, "课耗学生明细.xls")
            },
            gobaoming(Id){
                this.OpenNewUrl('/sale/orderStatistics', {
                    OrderId: Id
                });
            }

        },
    }

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