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

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

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

.CommissionDetail ._icon_btn i.icon-sousuo {
    background-color: #47bf8c;
}

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

.CommissionDetail .el-table td,
.el-table th {
    padding: 5px 0;
}
</style>
  <template>
    <div class="page-body CommissionDetail">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div style="margin-right: 10px;">
                    <q-btn
                        color="primary"
                        size="11px"
                        label="返回"
                        @click="goreturn"
                        style="margin-left:10px"
                    />
                </div>
                <div class="col row wrap q-mr-lg q-col-gutter-md">
                    <div class="col-3">
                        <q-select
                            filled
                            stack-label
                            use-input
                            input-debounce="0"
                            option-value="SId"
                            @input="getList"
                            option-label="SName"
                            v-model="msg.SchoolId"
                            :options="CompanyList"
                            label="校区"
                            :dense="false"
                            emit-value
                            map-options
                        ></q-select>
                    </div>
                    <div class="col-3">
                        <q-select
                            filled
                            stack-label
                            input-debounce="0"
                            option-value="Id"
                            @input="getList"
                            option-label="Name"
                            v-model="msg.Status"
                            :options="StatusList"
                            label="状态"
                            :dense="false"
                            emit-value
                            map-options
                        ></q-select>
                    </div>
                    <div class="col-3">
                        <q-select
                            filled
                            stack-label
                            input-debounce="0"
                            option-value="Id"
                            @input="getlaiyuan"
                            option-label="Name"
                            v-model="msg.OrderSourceType"
                            :options="customFromList"
                            label="来源"
                            :dense="false"
                            emit-value
                            map-options
                        ></q-select>
                    </div>
                    <div class="col-3" v-if="msg.OrderSourceType == 1 || msg.OrderSourceType == 3">
                        <q-select
                            filled
                            stack-label
                            v-model="msg.OrderSourceId"
                            :dense="false"
                            :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="false"
                            :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="false"
                            :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>
            </div>
        </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="UserName"
                    label="人员"
                    :filters="UserNamelist"
                    :filter-method="filterHandler"
                ></el-table-column>
                <el-table-column prop="OrderSourceType" label="类型"></el-table-column>
                <el-table-column
                    prop="StudentCount"
                    label="学生数量"
                    sortable
                    :sort-method="StudentCount"
                ></el-table-column>
                <el-table-column
                    prop="CommissionMoeny"
                    label="提成金额"
                    sortable
                    :sort-method="CommissionMoeny"
                ></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-sousuo"
                                    @click="goUrl('returnPassbook/returnpassbookStatistics', scope.row)"
                                ></i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
  <script>
import {
    GetClassTypePageList,
} from '../../../api/system/index';
import {
    GetStudentList,
} from '../../../api/course/class';
import {
    getCommissionUserList,
} from '../../../api/finance/index'
import {
    getSchoolDropdown,
    getStudentDorpDownList
} from "../../../api/school/index";
import {
    queryEmployee
} from '../../../api/users/user'
import {

    CreateTypeList,
    GetCustomerList
} from '../../../api/sale/sale'
export default {
    meta: {
        title: "销售提成详情"
    },
    props: {},
    components: {},
    data() {
        return {
            loading: false,
            //列表数据参数
            msg: {
                BatchId: 0,
                SchoolId: '-1',
                Status: '-2',
                OrderSourceType: '-1',
                OrderSourceId: 0,
                Q_SelectNormal: '0'
            },
            pageCount: 0,
            persistent: false,
            tableData: [],
            CompanyList: [],
            StatusList: [
                { Id: '-2', Name: '不限' }, { Id: '-1', Name: '不返佣' }, { Id: '0', Name: '待返佣' }, { Id: '1', Name: '已返佣到账户' }, { Id: '2', Name: '佣金已提现' },
            ],
            see_tcdetailed: false,
            customFromList: [],
            UserNamelist: [],
            employeeList: [],
            myEmployeeList: [],

            TransListData: [], //转介人数据
            MyTransListData: [],
            customList: [], //同行列表
            allCustomList: [], //所有同行列表
            InvitationList: [], //学员下拉数据
            AllInvitationList: [],
        }
    },
    created() {
    },
    mounted() {
        if (this.$route.query && this.$route.query.id) {
            this.msg.BatchId = this.$route.query.id
        }
        this.getList()
        this.getBranchList()
        this.getCustomFrom()
        this.getEmployeeList()
        this.getStudentDorpDown()
        this.GetCustomerList()
        this.getStudentList();//学员下拉

    },
    methods: {
        getList() {
            this.loading = true;
            let msg = JSON.parse(JSON.stringify(this.msg))
            if (msg.OrderSourceId == '') {
                msg.OrderSourceId = 0
            }
            getCommissionUserList(msg).then(res => {
                if (res.Code == 1) {
                    this.loading = false;
                    this.tableData = res.Data;

                    this.UserNamelist = [];
                    this.tableData.forEach(x => {
                        let obj3 = {
                            text: x.UserName,
                            value: x.UserName
                        }
                        this.UserNamelist.push(obj3)
                    })
                    this.UserNamelist = this.unique(this.UserNamelist)
                }
            })
        },
        getlaiyuan() {
            if (this.msg.OrderSourceType == -1) {
                this.msg.OrderSourceId = 0
                this.getList()
            } else {
                this.msg.OrderSourceId = ''
            }
        },
        getBranchList() {//获取校区
            getSchoolDropdown({}).then(res => {
                let obj = {
                    SName: '不限',
                    SId: '-1'
                }
                this.CompanyList = res.Data;
                this.CompanyList.unshift(obj);
            }).catch(() => {

            })
        },
        //获取客户来源
        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
                );
            });
        },
        unique(arr, Name) { //数组去重
            const res = new Map();
            return arr.filter(
                (list) => !res.has(list.text) && res.set(list.text, 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
                    );
                }
            });
        },
        //获取学员下拉信息
        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)
                }
            })
        },



        goUrl(path, id) {
            this.$router.push({
                path: '/financial/' + path,
                query: {
                    preriodId: this.$route.query.id,
                    CommissionType: this.$route.query.CommissionType,
                    blank: 'y',
                }
            })
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        StudentCount(a, b, c) {
            return a.StudentCount - b.StudentCount;
        },
        CommissionMoeny(a, b) {
            return a.CommissionMoeny - b.CommissionMoeny;
        },
        goreturn() {
            this.$router.go(-1);
        }

    },
}

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

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