<style>
    .cbContent{
        width:100%;
        height:1000px;
        background:url(../../assets/img/imbg/tcbg.png) no-repeat;
        background-size:100% 100%;
        position: relative;
    }
    .cb_Title{
        position: absolute;
        top:4.5rem;
        width:100%;
        text-align: center;
        font-family: "fangzheng"!important;
    }
    .cb_year{
        color:#4E4E4C;
        font-size:2.5rem;
        font-weight: bold;
        margin-right:1rem;
    }
    .cb_month{
        font-size:2.5rem;
        color:#257BF1;
        margin:0 1rem;
        font-weight: bold;
    }
    .cb_PeoInfo{
        position: absolute;
        top:11rem;
        width:100%;
    }
    .cb_Name{
        width:100%;
        text-align: center;
        color:#FBA838;
        font-size:3.5rem;
        font-family: "fangzheng"!important;
    }
    .cb_PeoInfo table{
        width:100%;
        text-align: center;
        padding:0 5rem;
        margin-top:2rem;
    }
    .cb_PeoInfo table td{
        height:4rem;
    }
    .cb_benyue{
        color:#257BF1;
        font-size:2.5rem;
        font-weight: bold;
        font-family: "fangzheng";
    }
    .cb_benyue span:first-child{
        font-size:1.5rem;
    }
    .cb_Tleft{
        width:40%;
        text-align: left;
        font-size:30px;
        font-weight: bold;
        font-family: "fangzheng";
    }
    .cb_Tright{
        width:60%;
        text-align: right;
    }
    .cb_geren{
        position: absolute;
        top:25rem;
        padding:0 5rem;
        width:100%;
        font-family: "fangzheng";
    }
    .cb_geren div{
        margin-top:1rem;
        color:#010101;
        font-size:1.7rem;
        padding:0 30px;
        line-height: 3rem;
        font-family: "PingFangSC-Fine";
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-family: "fangzheng";
    }
    .cb_Arrow{
        position: absolute;
        bottom:4rem;
        width:100%;
        cursor: pointer;
        text-align: center;
    }
    .cb_Arrow div:last-child{
        color:#C4A873;
        font-size:1.5rem;
        font-family: "fangzheng";
    }
    .Cb_titleSpan{
        font-size:2.5rem;
        font-weight:bold;
    }
</style>

<template>
    <div class="cbContent" v-if="isShow">
        <div class="cb_Title">
            <span class="cb_year">{{dataList.SellGeneralContent.Year}}</span>
            <span class="Cb_titleSpan"> 
                {{$t('pub.year')}}
            </span>
            <span class="cb_month">{{dataList.SellGeneralContent.Month}}</span>
            <span class="Cb_titleSpan">
                {{$t('objFill.v101.commissonBill.yuetcbg')}}
            </span>
        </div>
        <div class="cb_PeoInfo">
            <div class="cb_Name">{{dataList.UserName}}</div>
            <table>
                <tr>
                    <td class="cb_Tleft">
                      {{$t('objFill.v101.commissonBill.benyuetc')}}
                    </td>
                    <td class="cb_Tright">
                        <span class="cb_benyue"><span>¥</span>{{dataList.SellGeneralContent.totalCommission}}</span>
                    </td>
                </tr>
                <tr style="display:none;">
                    <td class="cb_Tleft">

                    </td>
                    <td class="cb_Tright">
                        <span class="cb_benyue"><span>¥</span>12523268.00</span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="cb_geren">
            <span style="font-size:30px;font-weight: bold;">
              {{$t('objFill.v101.commissonBill.gerenxuanyan')}}
            </span>
            <div>
                {{dataList.SellGeneralContent.ShareContent}}
            </div>
        </div>
        <div class="cb_Arrow" @click="changeBill">
            <div><img src="../../assets/img/imbg/arrowDown.png" alt=""/></div>
            <div>{{$t('fnc.chakanmingxi')}}</div>
        </div>
    </div>
</template>
<script>
  export default {
    props:['articleId','userId'],
    data() {
      return {
          dataList:{},
          isShow:false
      };
    },
    components: {
      
    },
    methods: {
        //获取数据
        getDateInfo(){
            let msg = {
                articleId:this.articleId,
                userId:this.userId
            }
            this.apipost("customerIndex_post_GetSellComissionGeneralSure",msg,res => {
                    if (res.data.resultCode == 1) {
                        this.dataList=res.data.data;
                        this.isShow=true;
                    }else{
                        this.Error(res.data.message);
                    }
                }
            );
        },
        changeBill(){
            this.$emit('Close',this.dataList.PeriodsId);
        }
    },
    mounted() {

    }
  };
</script>