<style>
.DjCommissionDetail2 .singeRowTable th{
    padding: 5px 0;
}
</style>
<template>
    <div class="DjCommissionDetail2">
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
            <tr v-if="dataList.length && dataList[0].OPCommissionDetailsList">
                <th width="120px">区域划分</th>
                <th width="120px">人数</th>
                <th width="120px">实际发放<br>15元/人</th>
                <th width="120px">总合计</th>
                <th v-for="(item, index) in dataList[0].OPCommissionDetailsList" :key="index">{{item.EmployeeName + item.CommissionPercent + '%'}}</th>
                <th width="80px">{{$t('system.table_operation')}}</th>
            </tr>
            <tr v-for="(item, index) in dataList" :key="index">
                <td>{{item.BranchId === -1 ? '合计' : item.BranchName}}</td>
                <td>{{item.BranchId === -1 ? allGuestNum : item.GuestNum }}</td>
                <td>{{15}}</td>
                <td>{{item.BranchId === -1 ? allGuestNum * 15 : item.GuestNum * 15}}</td>
                <td v-for="(Sitem, Sindex) in item.OPCommissionDetailsList" :key="Sindex">{{Sitem.CommissionMoney}}</td>
                <td>
                    <div style='width:80px;height:40px;text-align:center;position: relative;padding-top: 6px;padding-top:6px;'>
                        <el-button type="primary" size='mini' icon="el-icon-view" circle @click="getInfo(item,index)"></el-button>
                    </div>
                </td>
            </tr>
        </table>
        <div class="noDataNotice" v-if="dataList.length<1">
        <i class="iconfont icon-kong"></i>
        <p>{{$t("active.ld_noData")}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            msg: {
                pageIndex: 1,
                pageSize: 1000,
                ParentId: 0,
                OrderStr: "RB_Branch_Id asc",
                BName:-1
            },
            allGuestNum: 0,
            loading: false,
            dataList: [],
            empList: [],
            oPComissionPeriods: {},
        }
    },mounted(){
        this.msg.ID = this.$route.query.ID;
        this.getList()
    },
    methods : {
        //跳转
        getInfo(item) {
            this.$router.push({
                path: "ClausesOrder",
                query: {
                    StartDate: this.oPComissionPeriods.PeriodsDate,
                    blank:'y'
                }
            });
        },
        ZhiDan(data){
            let msg={
                    TemplateId:27,
                    RB_Branch_Id:data.RB_Branch_Id,
                    IsPublic:6,
                    BType:4,
                    AccountId:22,
                    CostTypeID:189,
                    WBMoney:data.CommissionMoney,
                    Remark:'',
                    TCID:0,
                    IsRelevanceTravel:1,
                    OrderID:0,
                    vorcherInos:[],
                    Description:'',
                    RemitterName:'',
                    TradeDate:moment().format('YYYY-MM-DD'),
                    OrderSource:14,

                };
                this.$confirm('提成金额是否正确?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                    this.loading = true;
                    this.apipost(
                        "Financial_post_SetFinanceInfoCommonForIn",
                        msg,
                        res => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            this.apipost(
                            "OPCommission_UpdatePeriodsFrID",
                            {ID:this.oPComissionPeriods.ID,FrId:res.data.data},
                            res => {
                            if (res.data.resultCode == 1) {
                                this.Success(res.data.message);
                                this.getList();
                            } else {
                                this.Error(res.data.message);
                            }
                            },
                            null
                        );
                        } else {
                            this.Error(res.data.message);
                        }
                        },
                        null
                    );
                    }).catch(() => {
                                
                });
            },
        getList() {
            this.loading = true;
            this.apipost(
                "OPCommission_GetPeriodsDetailsList_V2",
                this.msg,
                res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                        this.dataList = res.data.data.detailsList;
                        this.empList = res.data.data.empList;
                        this.oPComissionPeriods=res.data.data.oPComissionPeriods;
                        let num = 0
                        this.dataList.forEach(x=>{
                            num = num + x.GuestNum
                        })
                        this.allGuestNum = num
                        this.$forceUpdate()
                    } else {
                        this.Error(res.data.message);
                    }
                },
                null
            );
            },
    }
}
</script>