<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 i.icon-sousuo {
        background-color: #47BF8C;
    }

    .lessonCostStatistics ._icon_btn .icon-add {
        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 .page-search .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="Id" use-input
                        option-label="EmployeeName" v-model="msg.SaleId" ref="TId" :options="EmployeeList" label="业务员"
                        :dense="false" emit-value map-options @filter="filterFn2" />
                </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="EnterName" label="业务员"></el-table-column>
                <el-table-column prop="PreferPrice" label="应收"> 
                    <template slot-scope="scope">
                        <span style="cursor: pointer;text-decoration: underline;" @click='gobaoming(scope.row)'>{{scope.row.PreferPrice}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Income" label="实收"></el-table-column>
                <el-table-column prop="PlatformTax" label="平台税金"> </el-table-column>
                <el-table-column prop="Refund" label="退款"></el-table-column>
                <el-table-column prop="RIncome" label="退后实收"> </el-table-column>
                <el-table-column prop="YSKMoney" label="已上课金额"> </el-table-column>
                <el-table-column prop="GuestNum" label="报名人数"> </el-table-column>
                <el-table-column prop="JKNum" label="结课人数"> </el-table-column>
                <el-table-column prop="OrderNum" 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 {
        getSaleAchievementsRankStatistics,
    } from '../../api/finance/index'
    import {
        EduDownLoad,
    } from '../../api/common/common';
    import { queryEmployee } from '../../api/users/user'

    export default {
        meta: {
            title: "课耗统计汇总表"
        },
        props: {},
        components: {},
        data() {
            return {
                loading: false,
                valuemonth: '',
                valueyear: '',
                //列表数据参数
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    SaleId: '-1',
                    SchoolId: '-1',
                    StartMonth: '',
                    EndMonth: '',
                },
                datetype: '2',
                pageCount: 0,
                listData: {},
                tableData: [],
                total: 0,
                CompanyList: [],
                TeacherList: [],
                EmployeeList: [],
                AllemployeeList: [],
                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();//老师下拉
            this.getEmployee(0);

        },
        methods: {
            getList() {
               
                if (this.datetype == 1) {
                    this.msg.StartMonth = this.valueyear + '-01';
                    this.msg.EndMonth = this.valueyear + '-12';
                } 
                this.loading = true;
                getSaleAchievementsRankStatistics(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(() => {

                })
            },
            //业务员
            getEmployee(id) {
                var qMsg = {
                    Dept_Id: 0
                }
                qMsg.Dept_Id = id;
                queryEmployee(qMsg).then(res => {
                    if (res.Code == 1) {
                        this.EmployeeList = res.Data;
                        let obj = {
                            Id: "-1",
                            EmployeeName: "不限"
                        }
                        this.EmployeeList.unshift(obj)
                        this.AllemployeeList = JSON.parse(JSON.stringify(this.EmployeeList));
                    }
                }).catch(() => {

                })
            },
            //筛选业务员
            filterFn2(val, update) {
                update(() => {
                    if (val === '') {
                        this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
                    } else {
                        const needle = val.toLowerCase()
                        this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
                    }
                })
            },
            goUrl(path, id) {
                this.OpenNewUrl('/financial/' + path, {
                    id: id
                });

            },
            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/GetSaleAchievementsRankStatisticsToExcel", 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;
            },
            gobaoming(row){//跳转到报名列表
                let EndTime = this.msg.EndMonth
                if(new Date(this.msg.StartMonth).getTime() == new Date(this.msg.EndMonth).getTime()){
                    var d1=new Date( this.msg.EndMonth);
                    d1.setMonth(d1.getMonth()+1);
                    var month = d1.getMonth()+1;
                    EndTime = d1.getFullYear()+'-'+month
                }
                this.OpenNewUrl('/sale/orderStatistics' , {
                    EnterID:row.EnterID,
                    StartTime:this.msg.StartMonth,
                    EndTime:EndTime,
                });
            }


        },
    }

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