<template>
  <div class="data_header_div" v-if="role_id!==0&&role_id!==1">
    <div class="summary_text" >
      <p class="fl title">
        欢迎亲爱的
        <span class="num">{{nickname}}</span>同学回家，<span v-if="!!honor_name">您当前等级为<span class="num">{{honor_name}}，</span> </span>感谢您为共同梦想辛苦付出！
      </p>
      <div class="fr hover_content">
        <Poptip word-wrap width="330" placement="bottom-end" trigger="hover">
          <div slot="content">
            <p>
              <span>昨日/今日消费：</span>您的推广消费金额，不同等级对应不同的提成比例
            </p>
            <p class="t">
              <span>昨日/今日推广奖金：</span>推广人数奖，每日推广目标为{{spread.min||0}}个合格玩家，超过1人奖金{{spread.reward/100||0}}元
            </p>
            <p class="t">
              <span>上月/本月奖金：</span>上月奖金综合和本月已累计奖金额度
            </p>
          </div>
          <img src="../../../static/image/blue_why.png" alt>
        </Poptip>
      </div>
    </div>
    <div style="width:100%; clear:both">
      <div class="summary_item color_one" :style="divnum?'width:23%':''">
        <div class="fl summary_left">
          <p>昨日消费</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.yesterdayConsume?headerInfo.yesterdayConsume:'0.00'}}
          </p>
        </div>
        <div class="fl col_fgx"></div>
        <div class="fl summary_right">
          <p>今日消费</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.todayConsume?headerInfo.todayConsume:'0.00'}}
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="summary_item color_two" :style="divnum?'width:23%;margin-left:3%':''">
        <div class="fl summary_left">
          <p>昨日推广奖金</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.yesterdayPromotionBonus?headerInfo.yesterdayPromotionBonus:'0.00'}}
          </p>
        </div>
        <div class="fl col_fgx"></div>
        <div class="fl summary_right">
          <p>今日推广奖金</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.todayPromotionBonus?headerInfo.todayPromotionBonus:'0.00'}}
            <span class="need_peo">(差{{headerInfo.needpeople}}人达标)</span>
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="summary_item color_three" :style="divnum?'width:23%;margin-left:3%':''">
        <div class="fl summary_left">
          <p>上月总计奖金</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.lastMonthTotalBonus?headerInfo.lastMonthTotalBonus:'0.00'}}
          </p>
        </div>
        <div class="fl col_fgx"></div>
        <div class="fl summary_right">
          <p>本月累计奖金</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.thisMonthTotalBonus?headerInfo.thisMonthTotalBonus:'0.00'}}
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="summary_item color_four" :style="divnum?'width:22%;float: right;margin-left:3%':''">
        <div class="fl summary_left">
          <p>昨日消费提成</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.yesterdayConsumeCommission?headerInfo.yesterdayConsumeCommission:'0.00'}}
          </p>
        </div>
        <div class="fl col_fgx"></div>
        <div class="fl summary_right">
          <p>今日消费提成</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.todayConsumeCommission?headerInfo.todayConsumeCommission:'0.00'}}
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="summary_item color_five" v-if="!divnum">
        <div class="fl summary_left">
          <p>上月总计提成</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.lastMonthCommission?headerInfo.lastMonthCommission:'0.00'}}
          </p>
        </div>
        <div class="fl col_fgx"></div>
        <div class="fl summary_right">
          <p>本月累计提成</p>
          <p class="money">
            <span class="icon_money">￥</span>{{headerInfo.thisMonthCommission?headerInfo.thisMonthCommission:'0.00'}}
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
import { getStore } from "@/utils/utils";
import { mapState } from "vuex";
export default {
  name: "data_header",
  props:{
    divnum:Number,
    headerInfo:Object,
    spread:Object,
  },
  computed:{
    ...mapState({
      nickname: state => state.adminInfo.nickname,
      role_id: state => state.adminInfo.role_id,
    }),
    honor_name(){
      return getStore("userInfo").honor_name;
    }
  },
};
</script>
<style>
.need_peo {
  font-size: 10px;
  font-weight: 400;
}
.data_header_div {
  /* width: 1678px; */
  /* height: 145px; */
}
.col_fgx {
  width: 1px;
  height: 46px;
  background-color: rgba(241, 241, 241, 1);
  opacity: 0.5;
}
.summary_left,
.summary_right {
  width: 48%;
  height: 46px;
  padding-left: 20px;
  font-size: 13px;
}
.summary_left .money,
.summary_right .money {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}
.icon_money {
  font-size: 12px;
  font-weight: 400;
}
.summary_text {
  width: 100%;
}
.summary_text .title {
  font-size: 16px;
  color: rgba(96, 122, 149, 1);
  font-weight: bold;
}
.summary_text span.num {
  color: rgba(255, 121, 0, 1) !important;
}
.summary_item {
  float: left;
  width: 18.6%;
  height: 89px;
  color: #fff;
  border-radius: 3px;
  padding: 21px 4px 21px 4px;
  margin-top: 20px;
}
.summary_item p {
  width: 100%;
}
.color_one {
  background-color: rgba(102, 153, 255, 1);
  border-color: rgba(102, 153, 255, 1);
}
.color_two {
  background-color: rgba(153, 153, 255, 1);
  border-color: rgba(153, 153, 255, 1);
  margin-left: 1.65%;
}
.color_three {
  background-color: rgba(51, 204, 204, 1);
  border-color: rgba(51, 204, 204, 1);
  margin-left: 1.65%;
}
.color_four {
  background-color: rgba(204, 153, 255, 1);
  border-color: rgba(204, 153, 255, 1);
  margin-left: 1.65%;
}
.color_five {
  background-color: #ff9999;
  border-color: #ff9999;
  margin-left: 1.65%;
  float: right;
}
.hover_content {
  color: rgba(96, 122, 149, 1);
  font-size: 12px;
  font-family: MicrosoftYaHei-Bold;
}
.hover_content .ivu-poptip-popper[x-placement="bottom-end"] .ivu-poptip-arrow {
  right: 2px;
}
.hover_content .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow {
  top: 0px;
  border-width: 0 10px 9px;
}
.hover_content
  .ivu-poptip-popper[x-placement^="bottom"]
  .ivu-poptip-arrow:after {
  top: 0px;
  border-bottom-width: 10px;
  margin-left: -9px;
}
.hover_content .ivu-poptip-arrow:after {
  border-width: 9px;
}
.hover_content .ivu-poptip-title {
  display: none;
}
.hover_content .ivu-poptip-inner {
  white-space: normal;
}
.hover_content p{
  height:35px
}
.hover_content span {
  color: rgba(96, 122, 149, 1) !important;
  font-weight: bold;
}
/* .hover_content .t{
  margin-top: 10px
} */
.hover_content .ivu-poptip-body {
  padding: 15px 16px;
}
.hover_content .ivu-poptip-popper {
  position: absolute;
  top: 45px!important;
}
</style>

