<style>
    .cd_content{
        width:100%;
        min-height:600px;
        font-family: "fangzheng";
        background:url(../../assets/img/imbg/bg.png);
    }
    .cd_content .cd_tableContent{
        padding:3rem 3rem 0 3rem;
        width:89.9%;
        margin:auto;
        min-height: 10rem;
        border-left:2px solid #BDAC94;
        border-right:2px solid #BDAC94;
        background-color: #fff;
    }
    .cd_content .cd_table{
        width:100%;
        text-align: center;
        font-family: "fangzheng";
    }
    .cd_content .cd_table th{
        border-top:1px dashed #121212;
        border-bottom:1px dashed #121212;
        height:4rem;
        font-size:1.5rem;
        font-family: "fangzheng"!important;
    }
    .cd_content .cd_table td{
        height:1.5rem;
        font-size:1.2rem;
        color:#121212;
        padding:0 1rem 1rem 1rem;
    }
    .cd_table tr:nth-child(2) td{
        padding:1rem;
    }
    .cd_table tr:last-child td{
        border-bottom:1px dashed #121212;
    }
    .cd_content .cd_Zonge{
        display: flex;
        justify-content: space-between;
        padding: 25px;
        font-size:1.5rem;
        border-bottom:1px dashed #121212;
    }
    .cd_content .cd_GoBackDiv{
        width:100%;
        height:3rem;
        text-align: center;
        background:url(../../assets/img/imbg/detail.png) no-repeat;
        background-size:cover;
        background-position: 0 0;

    }
    .cd_GoBackDiv img{
        cursor: pointer;
        transform: rotate(180deg);
        position: relative;
        top:2.5rem;
    }
    .cd_content .cd_Top{
        width:100%;
        background:url(../../assets/img/imbg/detail.png) no-repeat;
        height:83px;
        background-size:cover;
        background-position: 0 10px;
    }
    .cd_content .cd_Bottom{
        width:100%;
        background:url(../../assets/img/imbg/detail.png) no-repeat;
        height:80px;
        background-size:cover;
        background-position: 0 -1030px;
    }
</style>

<template>
    <div class="cd_content">
        <div class="cd_GoBackDiv">
            <img @click="changeBill" src="../../assets/img/imbg/arrowDown.png" alt=""/>
        </div>
        <div class="cd_tableContent">
            <table class="cd_table">
                <tr>
                    <th style="width:40%;text-align:left;padding-left:2rem;">订单号</th>
                    <th style="width:20%">人数</th>
                    <th style="width:40%;text-align:right;padding-right:2rem;">金额</th>
                </tr>
                <tr v-for="item in dataList.list">
                    <td style="text-align:left;">{{item.OrderId}}</td>
                    <td>{{item.PeopleCount}}</td>
                    <td style="text-align:right;">{{item.CommissionMoney|priceFormat(item.CommissionMoney)}}元</td>
                </tr>
            </table>
            <div class="cd_Zonge">
                <div class="cd_item">本月提成</div>
                <div class="cd_item">{{dataList.totalCommissionMoney|priceFormat(dataList.totalCommissionMoney)}}元</div>
            </div>
            <div class="cd_Zonge" style="border-bottom:none;padding:25px 25px 0 25px">
                <div class="cd_item">
                <img style='vertical-align:middle;margin-right:10px;' src="../../assets/img/imbg/ewai.png"/>额外奖励</div>
                <div class="cd_item" style="color:#4DB220">{{dataList.totalOtherMoney|priceFormat(dataList.totalOtherMoney)}}元</div>
            </div>
            <div class="cd_Zonge">
                <div class="cd_item">
                <img style='vertical-align:middle;margin-right:10px;' src="../../assets/img/imbg/jl.png"/>额外扣除</div>
                <div class="cd_item" style="color:#B22020">-{{dataList.totalBackMoney|priceFormat(dataList.totalBackMoney)}}元</div>
            </div>
            <div class="cd_Zonge" style="border-bottom:none;color:#000;">
                <div class="cd_item">总提成</div>
                <div class="cd_item">{{totalMoney|priceFormat(totalMoney)}}元</div>
            </div>
        </div>
        <div class="cd_Bottom"></div>
    </div>
</template>
<script>
      
  export default {
    props:['userId'],
    data() {
      return {
        dataList:{},
        //计算总提成
        totalMoney:0
      };
    },
    components: {
      
    },
    methods: {
        getData(PeriodsId){
            let msg = {
                id:PeriodsId,
                userId:this.userId
            }
            this.apipost("customerIndex_post_GetSellComissionDetails",msg,res => {
                    if (res.data.resultCode == 1) {
                        this.dataList=res.data.data;
                        this.totalMoney = parseFloat(this.dataList.totalCommissionMoney)+parseFloat(this.dataList.totalOtherMoney)-parseFloat(this.dataList.totalBackMoney)
                   }else{
                        this.Error(res.data.message);
                    }
                }
            );
        },
        changeBill(){
            this.$emit('changeDiv');
        }
    },
    filters: {
      priceFormat (value) {
        if (value == null) {
          return 0.0
        }
        let nStr = value.toFixed(2)
        nStr += ''
        let x = nStr.split('.')
        let x1 = x[0]
        let x2 = x.length > 1 ? '.' + x[1] : ''
        var rgx = /(\d+)(\d{3})/
        while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2')
        }
        return x1 + x2
      }
    },
    mounted() {

    }
  };
</script>