<style>
    .CM_look {
        padding: 4px !important;
        position: relative;
        top: 1px;
    }

    .opUl li {
        display: inline-block;
        margin: 10px 15px 10px 0;
    }
    .domesticCommissionUser .opUl li input{
        height: 34px !important;
    }
    .domesticCommissionUser .singeRowTable tr td {
        padding: 8px 5px;
    }

    .domesticCommissionUser .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
</style>
<template>
    <div class="flexOne domesticCommissionUser">
        <div>
            <ul class="opUl">
                
                <li>
                    <em>人员</em>
                    <el-select v-model="msg.UserId" size="mini" @change="handleCurrentChange(1)" filterable :disabled='disabled'>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in searchList" :key="item.index" :label="item.name"
                            :value="item.empId"></el-option>
                    </el-select>
                </li>
                <li>
                    <em>出团公司</em>
                    <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)" :disabled='disabled'>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName"
                            :value="item.Id"></el-option>
                    </el-select>
                </li>
                <li>
                    <em>公司</em>
                    <el-select v-model="msg.RB_Branch_Id" size="mini" @change="handleCurrentChange(1)" :disabled='disabled'>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName"
                            :value="item.Id"></el-option>
                    </el-select>
                </li>
                <li>
                    <em>部门</em>
                    <el-select v-model="msg.RB_Department_Id" size="mini" @change="handleCurrentChange(1)" :disabled='disabled'>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in departMentList" :key="item.index" :label="item.DepartmentName"
                            :value="item.DepartmentID"></el-option>
                    </el-select>
                </li>

                
            </ul>
        </div>
        <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <th>公司</th>
                <th>部门</th>
                <th>销售</th>
                <th>人数</th>

                <th>提成</th>
                <th>额外奖励</th>
                <th>额外扣除</th>
                <th>最终提成</th>
                <th>期数</th>

                <th>操作</th>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.BranchName}}</td>
                <td>{{item.DeptName}}</td>
                <td>{{item.UserName}}</td>
                <td>{{item.PeopleCount}}</td>

                <td>{{item.CommissionMoney}}</td>
                <td>{{item.OtherMoney}}</td>
                <td>{{item.BackMoney}}</td>
                <td>{{item.YFMoney}}</td>
                <td>{{item.Periods}}</td>

                <td>

                    <el-tooltip class="item" effect="dark" content="查看" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('domesticCommissiondetails',item)"
                            icon="iconfont icon-chakan" circle></el-button>
                    </el-tooltip>


                </td>
            </tr>
            <tr v-if="dataList.length==0">
                <td style="text-align:center" colspan="10">暂无数据</td>
            </tr>
        </table>
        <!-- 分页 -->
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
            layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
        </el-pagination>

    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                Month: moment().format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    PeriodId: 0,
                    UserId: -1,
                    RB_Branch_Id: -1,
                    RB_Department_Id: -1,
                    OutBranchId:-1,
                },
                loading: false,
                //数据源
                dataList: [],
                total: 0,
                disabled: true,
                PeriodsList: [],
                BranchList: [],
                searchList: [],
                departMentList:[],
            }
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;
            if (ActionMenuCode.indexOf('home_CommissionSeeAll') != -1) {//是否有看所有人的权限
                this.disabled = false;
            }else{
                this.disabled = true;
                this.msg.UserId = Number(userInfo.EmployeeId)
            }
            if (this.$route.query && this.$route.query.PeriodId) {
                this.msg.PeriodId = this.$route.query.PeriodId
            }
            this.getList();
            // this.getqishilist()
            this.getCompanyList()//获取公司
            this.getEmployee()//人员
            this.getDerpartMent()//部门
        },
        methods: {
            getDerpartMent() {
                //获取部门
                this.apipost(
                    "admin_get_DepartmentGetList",
                    this.getDepartmentMsg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.departMentList = res.data.data;
                        } else { }
                    },
                    err => { }
                );
            },
            getEmployee() {//所有人员下拉
                let employeeMsg = {
                    RB_Group_id: "0",
                    RB_Branch_id: "-1",
                    departmentId: "0",
                    IsLeave: "-1"
                }
                this.apipost(
                    "app_get_company_employee",
                    employeeMsg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.searchList = res.data.data;
                        }
                    },
                    err => { }
                );
            },
            //初始化公司
            getCompanyList() {
                let userInfo = this.getLocalStorage();
                var RB_Group_id = userInfo.RB_Group_id;
                let msg = {
                    Status: 0,
                    is_show: 0,
                    RB_Group_Id: RB_Group_id
                };
                this.apipost(
                    "admin_get_BranchGetList",
                    msg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.BranchList = res.data.data;

                        }
                    },
                    err => { }
                );
            },
            getqishilist() {
                this.apipost(
                    "sellcommission_GetGNCommissionPeriodsList",
                    {},
                    res => {
                        if (res.data.resultCode == 1) {
                            this.PeriodsList = res.data.data;
                            if (this.PeriodsList && this.PeriodsList.length > 0) {
                                // this.msg.Periods = Number(this.PeriodsList[0].Id)
                            }

                        } else {
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            },


            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, item) {
                this.$router.push({
                    path: path,
                    query: {
                        PeriodId: this.$route.query.PeriodId,
                        UserId:item.UserId,
                        RB_Branch_Id:item.RB_Branch_Id,
                        RB_Department_Id:item.RB_Department_Id,   
                        blank: 'y',
                        tab: '国内提现详情'
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.apipost(
                    "sellcommission_GetGNCommissionDetailsListForUser",
                    this.msg,
                    res => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            this.dataList = res.data.data.pageData;
                            this.total = res.data.data.count;
                        } else {
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            },

        }
    }
</script>