<style scoped>
    .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{
        /* position: absolute; */
    }
    .domesticCommissionUser .singeRowTable tr td {
        padding: 8px 5px;
    }

    .domesticCommissionUser .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
    .text-fixed{
        /* height: 100%;
        position: absolute;
        left: 0;
        top: 0; */
    }
    .cursor-p{
        cursor: pointer;
    }
    .cursor-p:hover{
        color: #409EFF;
    }
    .ITUDWageMoney-box{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .ITUDschedule-Box-box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .ITUDschedule-box{
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .ITUD-title{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .progress-box{
        flex: 1;
        display: flex;
        flex-direction: row;

    }
    .relative-position{
        flex: 1;
        margin-right: 0;
        position: relative;
    }
    /deep/.relative-position .el-progress-bar__outer{
        border-radius: 0 !important;
    }
    /deep/.relative-position .el-progress-bar__inner{
        border-radius: 0 !important;
    }
    .ITUD-text-box{
        position: relative;
    }
    .ITUD-text{
        position: absolute;
        z-index: 999;
        color: red;
    }
    .rate-box {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: #000;
        z-index: 9;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }
  .sanjiao {
      width: 0;
      height: 0;
      margin-left: 5%;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 3px solid #CACACA;
    }
    .rate {
      min-width: 20px;
      padding: 2px 6px;
      background-color: #CACACA !important;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666;
      font-size: 0.62vw;
      font-family: PingFang SC;
      border-radius: 7px;
      line-height:12px;
      white-space:nowrap;
    }
    .active-rate{
      background-color: #FF7262 !important;
      color: #FFFFFF !important;
    }
    .clickCp{
        cursor: pointer;
        color: #2961fe;
    }
</style>
<template>
    <div class="flexOne domesticCommissionUser">
        <div class="productQuerySearch">
            <ul class="opUl">
                <li>
                    <em>出团公司</em>
                    <el-select filterable  size="mini" v-model='msg.OutBranchId'
                    @change='handleCurrentChange(1)' :disabled="disabled">
                    <el-option label="不限" :value="-1" :key="-1"></el-option>
                    <el-option
                    v-for="item in companyList"
                    :label='item.BName'
                    :value='item.Id'
                    :key='item.Id'
                    ></el-option>
                    </el-select>
                </li>
                <li>
                    <em>期数</em>
                    <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)" filterable>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in PeroidsList" :key="item.index" :label="item.Periods"
                            :value="item.Id"></el-option>
                    </el-select>
                </li>
                <li>
                    <em>所属公司</em>
                    <el-select filterable size="mini" v-model='msg.RB_Branch_Id'
                    @change='getDepartment();handleCurrentChange(1)' :disabled="disabled">
                    <el-option label="不限" :value="-1" :key="-1"></el-option>
                    <el-option
                    v-for="item in companyList"
                    :label='item.BName'
                    :value='item.Id'
                    :key='item.Id'
                    ></el-option>
                    </el-select>
                </li>

                <li>
                    <em>部门</em>
                    <el-select filterable size="mini" v-model='msg.RB_Department_Id'
                    :disabled="disabled"
                    @change='getEmployee();handleCurrentChange(1)'>
                    <el-option label="不限" :value="-1"></el-option>
                    <el-option v-for='item in departmentList'
                        :label='item.DepartmentName'
                        :value='item.DepartmentID'
                        :key='item.DepartmentID'>
                    </el-option>
                    </el-select>
                </li>
                <li>
                    <em>人员</em>
                    <el-select v-model="msg.UserId" size="mini"
                    @change="handleCurrentChange(1)" :disabled="disabled" filterable>
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option label="微途" :value="-2"></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 style="position: fixed;right: 0;top: 51px;">
                    <input type="button" class="normalBtn" value="导出" @click="exportExcel">
                </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>
                <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.PeopleNum?item.PeopleNum:'-'}}</td>
                <td>{{item.PeopleMoney?item.PeopleMoney:'-'}}</td>
                <td>{{item.EuropePNum?item.EuropePNum:'-'}}</td>
                <td>{{item.EuropeMoney?item.EuropeMoney:'-'}}</td>
                <td>{{item.OtherPNum?item.OtherPNum:'-'}}</td>
                <td>{{item.OtherMoney?item.OtherMoney:'-'}}</td>
                <td>{{item.TotalCMoney?item.TotalCMoney:'-'}}</td>
                <td>{{item.BranchCommission?item.BranchCommission:'-'}}</td>
                <td>{{item.Periods}}</td>
                <td>
                    <el-tooltip class="item" effect="dark" content="查看" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('TradeTicketDetails',item)"
                            icon="iconfont icon-chakan" circle></el-button>
                    </el-tooltip>


                </td>
            </tr>

        </table>
        <div v-if="dataList.length==0">
          <div style="text-align:center">暂无数据</div>
       </div>
        <!-- 分页 -->
        <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 {
        components:{

        },
        data() {
            return {
                objNew:{},
                outerVisible:false,//提成比例弹窗
                Month: moment().format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    PeriodId: -1,
                    UserId: -1,
                    RB_Department_Id: -1,//部门ID
                    RB_Branch_Id: -1,//公司ID
                    OutBranchId: -1,//出团公司ID
                },

                loading: false,
                //数据源
                dataList: [],
                total: 0,
                disabled: true,
                PeroidsList:[],
                searchList: [],
                departMentList:[],
                titleList:[
                    {name:'不限',id:'-1'},
                    {name:'引流',id:'2'},
                    {name:'销售',id:'1'}
                ],
                departmentList:[],
                companyList: [],
                getCompanyMsg:{
                    RB_Group_Id:'0',
                    Status:'0',
                },
                departmentMsg: {
					RB_Group_Id: '0',
					RB_Branch_Id:'0',
					Status:'0',
					ParentId:'-1',
					Tier:'0',
                },
                disabled:true
            }
        },
        created(){
            let userInfo = this.getLocalStorage();
            this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id;    //集团ID
            this.departmentMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
            this.departmentMsg.RB_Branch_Id = userInfo.RB_Branch_Id;
            this.GetCommissionPeroidsList()//期数
            this.getEmployee()//人员
            this.getDepartment()
            this.getCompany()
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;

            this.msg.PeriodId = this.$route.query.PeriodId?Number(this.$route.query.PeriodId):-1
            // this.msg.OutBranchId = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):Number(userInfo.RB_Branch_id)
            if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1
            ||ActionMenuCode.indexOf('S_CheckAllOrder')!=-1
            ||ActionMenuCode.indexOf('F_Query_AllIncomPay')!=-1) {//是否有看所有人的权限
                this.disabled = false;
                // this.msg.OutBranchId = -1
                this.msg.OutBranchId = this.$route.query.OutBranchId?Number(this.$route.query.OutBranchId):-1
                // this.msg.RB_Branch_Id = -1
                this.msg.RB_Branch_Id = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):-1
                // this.msg.RB_Department_Id = -1
                this.msg.UserId = this.$route.query.UserId?this.$route.query.UserId:-1

            }else{
                this.disabled = true;
                this.msg.OutBranchId = this.$route.query.OutBranchId?Number(this.$route.query.OutBranchId):-1
                this.msg.RB_Branch_Id = this.$route.query.RB_Branch_Id?Number(this.$route.query.RB_Branch_Id):Number(userInfo.RB_Branch_id)
                this.msg.UserId = this.$route.query.UserId?this.$route.query.UserId:Number(userInfo.EmployeeId)
            }


        },
        methods: {
            getDepartment() {
                this.departmentMsg.RB_Branch_Id = this.msg.RB_Branch_Id
				this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
					if(res.data.resultCode == 1) {
						this.departmentList = res.data.data;
					}
				}, err => {})

			},
            getCompany(){
                this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                    if(res.data.resultCode==1){
                        this.companyList=res.data.data;
                    }else{}
                },err=>{})
            },
            GetCommissionPeroidsList() { //期数下拉
                this.apipost(
                    "sellcommission_GetTYSaleCommissionPeriodsList",{},res => {
                    if (res.data.resultCode == 1) {
                        this.PeroidsList = res.data.data;
                        if(!this.$route.query.PeriodId||this.$route.query.isSale){
                            this.msg.PeriodId = this.PeroidsList[0].Id
                        }
                        this.getList()
                    } else {
                        this.Error(res.data.message);
                    }
                    }
                );
            },
            getEmployee() {//所有人员下拉
                let employeeMsg = {
                    RB_Group_id: "0",
                    RB_Branch_id: "-1",
                    departmentId: this.msg.RB_Department_Id>1?this.msg.RB_Department_Id:"0",
                    IsLeave: "-1"
                }
                this.apipost(
                    "app_get_company_employee",
                    employeeMsg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.searchList = res.data.data;
                        }
                    },
                    err => { }
                );
            },

            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, item) {
                this.$router.push({
                    path: path,
                    query: {
                        PeriodId: this.$route.query.PeriodId,
                        // OutBranchId: item.RB_Branch_Id,
                        UserId: item.UserId,
                        blank: 'y',
                        tab: '同业提现详情'
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.apipost(
                    "sellcommission_GetTYSaleCommissionEmpPageList",
                    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
                );
            },
            exportExcel() { //导出
                var fileName = "印象票务提成明细表.xls";
                this.crmGetLocalFile("/api/Commission/GetCommissionEmpStatisticsToExcel", this.msg, fileName);
            }

        }
    }
</script>