<style>
.baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
}
.cycleOrderList .border-bottom {
    /* border-bottom: 1px dashed #EEE; */
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.cycleOrderList .text-bottom {
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
}
.cycleOrderList ._icon_btn i.icon-sousuo {
    background-color: #47bf8c;
}
.cycleOrderList ._icon_btn i {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
}
.cycleOrderList .el-table td,
.el-table th {
    padding: 5px 0;
}
</style>
  <template>
    <div class="page-body cycleOrderList">
        <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="resetSearch()"
                        option-value="SId"
                        option-label="SName"
                        v-model="msg.SchoolId"
                        ref="SchoolId"
                        :options="schoolList"
                        label="校区"
                        dense
                        emit-value
                        map-options
                    />
                </div>

                <q-select
                    @input="resetSearch"
                    filled
                    stack-label
                    option-value="Id"
                    option-label="Name"
                    use-input
                    v-model="msg.Status"
                    :options="StatusList"
                    label="状态"
                    dense
                    class="col-3"
                    emit-value
                    map-options
                ></q-select>

                <div class="col-3" v-if="!isNormal">
                    <q-select
                        filled
                        stack-label
                        @input="resetSearch()"
                        option-value="Id"
                        option-label="BatchName"
                        v-model="msg.BatchId"
                        :options="PeriodsList"
                        label="周期"
                        dense
                        emit-value
                        map-options
                    />
                </div>
                <div class="col-3">
                    <q-select
                        filled
                        stack-label
                        use-input
                        input-debounce="0"
                        option-value="ClassId"
                        @input="getList"
                        option-label="ClassName"
                        v-model="msg.ClassId"
                        :options="ClassList"
                        label="班级"
                        dense
                        emit-value
                        map-options
                        @filter="filterFnbanji"
                    >
                        <template v-slot:no-option>
                            <q-item>
                                <q-item-section class="text-grey">未找到相关数据</q-item-section>
                            </q-item>
                        </template>
                    </q-select>
                </div>

                <q-select
                    v-if="!isNormal"
                    @input="resetSearch"
                    filled
                    stack-label
                    option-value="Id"
                    option-label="Name"
                    use-input
                    v-model="msg.CommissionType"
                    :options="CommissionList"
                    label="类型"
                    dense
                    class="col-3"
                    emit-value
                    map-options
                ></q-select>
                <q-select
                    @input="resetSearch"
                    filled
                    stack-label
                    option-value="Id"
                    option-label="Name"
                    use-input
                    v-model="msg.Q_SelectNormal"
                    :options="SelectNormal"
                    label="返佣情况"
                    dense
                    class="col-3"
                    emit-value
                    map-options
                ></q-select>
                <q-select
                    class="col-3"
                    filled
                    stack-label
                    input-debounce="0"
                    option-value="Id"
                    @input="getlaiyuan"
                    option-label="Name"
                    v-model="msg.OrderSourceType"
                    :options="customFromList"
                    label="来源"
                    dense
                    emit-value
                    map-options
                ></q-select>
                <div class="col-3" v-if="msg.OrderSourceType == 1 || msg.OrderSourceType == 3">
                    <q-select
                        filled
                        stack-label
                        v-model="msg.OrderSourceId"
                        dense
                        :options="myEmployeeList"
                        use-input
                        @input="getList"
                        label="人员"
                        @filter="filterEmployee"
                        option-label="EmployeeName"
                        option-value="Id"
                        emit-value
                        map-options
                    >
                        <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" v-if="msg.OrderSourceType == 2">
                    <q-select
                        filled
                        stack-label
                        v-model="msg.OrderSourceId"
                        dense
                        :options="customList"
                        use-input
                        @input="getList"
                        label="关联同行"
                        @filter="filterFn"
                        option-label="CustomerName"
                        option-value="CustomerId"
                        emit-value
                        map-options
                    >
                        <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" v-if="msg.OrderSourceType == 4">
                    <q-select
                        filled
                        stack-label
                        v-model="msg.OrderSourceId"
                        dense
                        :options="InvitationList"
                        use-input
                        @input="getList"
                        label="转介人"
                        @filter="filterFnStudent"
                        option-label="StuName"
                        option-value="StuId"
                        emit-value
                        map-options
                    >
                        <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-input
                        filled
                        dense
                        v-model="msg.OrderId"
                        @keyup.enter.native="resetSearch()"
                        label="订单号"
                    />
                </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;">（提成总计:{{ TotalCommission }}）</span>
            </span>
            <q-btn
                v-if="!isNormal"
                color="primary"
                size="11px"
                label="导出"
                @click="tcexport"
                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="校区" width="150"></el-table-column>
                <el-table-column prop="OrderSourceType" label="来源">
                    <template slot-scope="scope">
                        {{getOrderSourceType(scope.row.OrderSourceType)}}    
                    </template>
                </el-table-column>
                
                <el-table-column prop="UserName" label="人员"></el-table-column>
                
                <el-table-column prop="ClassNo" label="班号"></el-table-column>
                <el-table-column width="170" prop="ClassName" label="班级信息">
                    <template slot-scope="scope">
                        <div>
                            <span
                                style="cursor: pointer;text-decoration: underline;"
                                @click="goUrlclass('/course/classManage', scope.row.ClassName)"
                            >{{ scope.row.ClassName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="OrderId" label="订单号">
                    <template slot-scope="scope">
                        <div
                            style="cursor: pointer;text-decoration: underline;"
                            @click="goUrlorderList('/sale/orderStatistics', scope.row)"
                        >{{ scope.row.OrderId }}</div>
                    </template>
                </el-table-column>
                

                <el-table-column prop="StuName" label="学生"></el-table-column>
                <el-table-column prop="CommissionType" label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.CommissionType == 1">返佣</span>
                        <span v-if="scope.row.CommissionType == 2">幸福存折</span>
                    </template>
                </el-table-column>
                
                <el-table-column width="130" prop="CommissionMoeny" label="返佣/存折金额">
                    <template slot-scope="scope">
                        <div>{{ scope.row.CommissionMoeny ? scope.row.CommissionMoeny : '-' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="Status" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Status == -1">不返佣</span>
                        <span v-if="scope.row.Status == 0">待返佣</span>
                        <span v-if="scope.row.Status == 1">已返佣到账户</span>
                        <span v-if="scope.row.Status == 2">佣金已提现</span>
                    </template>
                </el-table-column>

                <el-table-column  prop="BatchName" label="期数"></el-table-column>
                <el-table-column prop="Remark" width="200" 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,
    getClassDropDownList,
    getStudentDorpDownList
} from '../../../api/school/index'
import {
    queryEmployee
} from '../../../api/users/user'
import {
    GetStudentList,
} from '../../../api/course/class';
import {

    CreateTypeList,
    GetCustomerList
} from '../../../api/sale/sale'
import {
    getCommissionStatistics,
    getCommissionPeriodsList,


} from '../../../api/finance/index'


import {
    EduDownLoad,
} from '../../../api/common/common';
export default {
    meta: {
        title: "业绩提成统计"
    },
    props: {},
    components: {

    },
    data() {
        return {
            loading: false,
            //列表数据参数
            msg: {
                PageIndex: 1,
                PageSize: 10,
                SchoolId: '-1',
                BatchId: '0',
                Status: '-2',
                OrderSourceType: '-1',
                OrderSourceId: 0,
                Q_SelectNormal: '-1',
                CommissionType: '-1',

                ClassId: 0,
                OrderId: '',

            },
            StatusList: [
                { Id: '-2', Name: '不限' }, { Id: '-1', Name: '不返佣' }, { Id: '0', Name: '待返佣' }, { Id: '1', Name: '已返佣到账户' }, { Id: '2', Name: '佣金已提现' },
            ],
            SelectNormal: [
                { Id: '-1', Name: '不限' }, { Id: '1', Name: '非不返佣的' }, { Id: '2', Name: '已返佣' },
            ],
            CommissionList: [
                { Id: '-1', Name: '不限' }, { Id: '1', Name: '返佣' }, { Id: '2', Name: '幸福存折' },
            ],
            pageCount: 0,
            listData: {},
            tableData: [],
            total: 0,
            company: [],
            department: [],
            ClassList: [],
            allClassList: [],
            returnString: [], //默认岗位
            see_tcdetailed: false,
            schoolList: [],
            DeptList: [], // 部门下拉
            PeriodsList: [],//周期列表
            TotalCommission: 0,
            ChangeLog: '',
            customFromList: [],

            TransListData: [], //转介人数据
            MyTransListData: [],
            customList: [], //同行列表
            allCustomList: [], //所有同行列表
            InvitationList: [], //学员下拉数据
            AllInvitationList: [],

            isNormal: false,
        }
    },
    created() {
        let userinfo = this.getLocalStorage();
        userinfo.ActionMenuList.map(x => {//判断权限
            if (x.FunctionCode == "see_tcdetailed") {//判断是否可以查看其他明细
                this.see_tcdetailed = true;
            }
        })
        if (this.see_tcdetailed == false) {
            this.msg.UserId = userinfo.Id
        }
    },
    mounted() {
        if (this.$route.query && this.$route.query.OrderId) {
            this.msg.OrderId = this.$route.query.OrderId
        }
        if (this.$route.query && this.$route.query.preriodId) {
            this.msg.BatchId = (this.$route.query.preriodId).toString()
        }
        if (this.$route.query && this.$route.query.CommissionType) {
            this.msg.CommissionType = this.$route.query.CommissionType
            this.isNormal = true
        }


        this.getList()
        this.setClass()
        this.getBranchList()
        this.getPeriodList()
        this.getCustomFrom()//来源
        this.getEmployeeList()
        this.getStudentDorpDown()
        this.GetCustomerList()
        this.getStudentList();//学员下拉

    },
    methods: {
        resetSearch() {
            this.msg.PageIndex = 1;
            this.getList()
        },
        getList() {

            this.loading = true;
            let msg = JSON.parse(JSON.stringify(this.msg))
            if (msg.OrderSourceId == '') {
                msg.OrderSourceId = 0
            }
            getCommissionStatistics(this.msg).then(res => {
                if (res.Code == 1) {
                    this.loading = false;

                    this.tableData = res.Data.PageData.List
                    this.TotalCommission = res.Data.PageData.TotalCommission
                    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)
            );
        },
        getlaiyuan() {
            if (this.msg.OrderSourceType == -1) {
                this.msg.OrderSourceId = 0
                this.getList()
            } else {
                this.msg.OrderSourceId = ''
            }
        },
        getOrderSourceType(Id){
            let Name = ''
            this.customFromList.forEach(x=>{
                if(x.Id == Id){
                    Name =  x.Name
                }
            })
            return Name
        },  
        //获取客户来源
        getCustomFrom() {
            CreateTypeList({}).then(res => {
                if (res.Code == 1) {
                    let obj = {
                        Name: '不限',
                        Id: '-1'
                    }
                    this.customFromList = res.Data;
                    this.customFromList.unshift(obj);

                }
            })
        },
        //筛选转介人
        filterStudent(val, update, abort) {
            update(() => {
                this.MyTransListData = this.TransListData.filter(
                    v => v.StuName.indexOf(val) > -1
                );
            });
        },

        //筛选员工
        filterEmployee(val, update, abort) {
            update(() => {
                this.myEmployeeList = this.employeeList.filter(
                    v => v.EmployeeName.indexOf(val) > -1
                );
            });
        },
        //获取员工列表
        getEmployeeList() {
            queryEmployee({
                IsLeave: 1
            }).then(res => {
                this.employeeList = res.Data;
                this.myEmployeeList = res.Data;
            })
        },
        //获取转介人下拉
        getStudentDorpDown() {
            getStudentDorpDownList().then(res => {
                if (res.Code == 1) {
                    this.TransListData = res.Data;
                    this.MyTransListData = res.Data;
                }
            })
        },
        //获取客户下拉数据
        GetCustomerList() {
            let msg = {
                QCreateBy: 0
            }
            GetCustomerList(msg).then(res => {
                if (res.Code == 1) {
                    this.customList = res.Data;
                    this.allCustomList = res.Data;
                }
            })
        },
        //筛选客户
        filterFn(val, update) {
            update(() => {
                if (val === "") {
                    this.customList = JSON.parse(JSON.stringify(this.allCustomList));
                } else {
                    const needle = val.toLowerCase();
                    this.customList = this.allCustomList.filter(
                        (v) => v.CustomerName.toLowerCase().indexOf(needle) > -1
                    );
                }
            });
        },
        handleCurrentChanges(val) {
            this.msg.PageIndex = val;
            this.getList()
        },
        //选择班级
        setClass(item) {
            this.isShowClass = true;
            getClassDropDownList({
                CourseId: 0,
                IsAddDefault: 1, //添加默认选项
            }).then(res => {
                if (res.Code == 1) {
                    var jsonData = res.Data;
                    let obj = {
                        ClassId: 0,
                        ClassName: '不限'
                    }
                    jsonData.unshift(obj)
                    if (jsonData && jsonData.length > 0) {
                        this.ClassList = JSON.parse(JSON.stringify(jsonData));
                        this.allClassList = JSON.parse(JSON.stringify(jsonData));;
                    }
                }
            });
        },
        //筛选班级
        filterFnbanji(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)
                }
            })
        },
        getBranchList() {//获取校区
            getSchoolDropdown({}).then(res => {
                this.schoolList = res.Data;
                var obj = {
                    SName: '全部',
                    SId: '-1'
                }
                this.schoolList.unshift(obj);
            }).catch(() => {

            })
        },


     
        //获取学员下拉信息
        getStudentList() {
            var qMsg = {
                SchoolId: this.msg.SchoolId
            };
            GetStudentList(qMsg).then(res => {
                if (res.Code == 1) {
                    var jsonData = res.Data;
                    if (jsonData && jsonData.length > 0) {
                        this.AllInvitationList = JSON.parse(JSON.stringify(jsonData));
                        this.InvitationList = JSON.parse(JSON.stringify(jsonData));
                    }
                }
            })
        },
        filterFnStudent(val, update) {
            update(() => {
                if (val === '') {
                    this.InvitationList = JSON.parse(JSON.stringify(this.AllInvitationList))
                } else {
                    const needle = val.toLowerCase()
                    this.InvitationList = this.AllInvitationList.filter(v => v.StuName.toLowerCase().indexOf(needle) > -1)
                }
            })
        },
    
        getPeriodList() {//获取周期下拉列表
            getCommissionPeriodsList({}).then(res => {
                if (res.Code == 1) {
                    this.PeriodsList = res.Data
                    let obj = {
                        BatchName: '不限',
                        Id: '0'
                    }
                    this.PeriodsList.unshift(obj)


                }
            })
        },
        tcexport() {//导出
            var msg = JSON.parse(JSON.stringify(this.msg));
            let text = '用户返佣/存折明细.xls'
            if(msg.CommissionType==1){
                text = '用户返佣.xls'
            }
            if(msg.CommissionType==2){
                text = '幸福存折明细.xls'
            }
            EduDownLoad("/CustomerCommission/GetCommissionStatisticsToExcel", msg, text)
        },
        goUrlclass(path, Names) {//班级
            let Name = encodeURI(Names)
            this.OpenNewUrl(path, {
                ClassName: Name,
            });
        },
        goUrlorderList(path, row) {//订单跳转
            this.OpenNewUrl(path, {
                OrderId: row.OrderId,
                // EnterID:row.UserId
            });
        },

    },
}

</script>
  <style lang="sass">

@import url('~assets/

@import url('~assets/css/table.sass')
