<template>
  <div>
    <!-- <data-header :headerInfo='headerInfo' :spread='spread'></data-header> -->
    <div>
      <div class="mar_T_20 sum_summary_div right_con">
        <div class="before_title_fgx fl"></div>
        <p class="sum_summary_text fl">业绩总览</p>
        <Poptip word-wrap width="380" placement="bottom-start" trigger="hover" class="hover_contents">
          <div slot="content">
            <p><span>注册用户：</span> 当日新注册玩家数，包含全部站点内的新用户</p>
            <p><span>独立注册IP：</span>当日新注册玩家数（排除重复注册IP）</p>
            <p><span>达标用户：</span>当日游戏角色达标用户数，含新老用户</p>
            <p><span>推广奖金：</span>当日得到的推广人数奖金</p>
            <p><span>充值用户：</span>当日游戏内消费过的玩家数，统计所有消费方式</p>
            <p><span>消费金额：</span>当日玩家消费总额</p>
            <p><span>新区业绩：</span>当日新服玩家消费总额</p>
            <p><span>注：</span>数据每1小时更新1次，整点更新</p>
          </div>
          <img src="../../../static/image/why.png" alt class="title_why">
        </Poptip>
        <div class="fr chorese_time">
          <img src="../../../static/image/datetime.png" alt class="fl">
          <p class="fl" :class="showTime==='请选择日期'?'no_chorese_time':'yes_chorese_time'" >{{showTime}}</p>
          <img src="../../../static/image/fanhui.png" alt :class="is_opendate?'fl updown':'fl updown rotate'">
          <DatePicker id="data_summny_date" :transfer='true' confirm type="daterange" :options="options" placement="bottom-end" :editable="false" class="chorse" @on-change="datechange" @on-open-change="is_open" @on-ok='getDataSummnyList'></DatePicker>
        </div>
        <Table :columns="summaryList" border :data="summaryData" class="tables clear" id="first_table" ></Table>
        <Table :columns="sumList" border :data="sumData" :show-header="false" id="second_table" style="font-weight:bold;" ></Table>
      </div>
    </div>
  </div>
</template>
<script>
import dataHeader from "@@/data/data_header";
import { mapState } from "vuex";
export default {
  name: "data_summary",
  components: { dataHeader, },
  data() {
    return {
      summaryData: [],
      newsData:[],
      spread:{},
      bg_datetime: "",
      ed_datetime: "",
      is_opentime: false,
      registerDetailList:[],
      headerInfo:{
        yesterdayConsume:null, //昨日消费
        todayConsume:null, //今日消费
        yesterdayPromotionBonus:null, //昨日推广奖金
        todayPromotionBonus:null, //今日推广奖金
        lastMonthTotalBonus:null, //上月总计奖金
        thisMonthTotalBonus:null, //本月总计奖金
        yesterdayConsumeCommission:null, //昨日消费提成
        todayConsumeCommission:null, //今日消费提成
        lastMonthCommission:null, //上月总计提成
        thisMonthCommission:null, //本月累计提成
        needpeople:null,//达标人数
      },
      sumList:[
        {
          title:"标题",
          key:'text',
          className:''
        },
        {
          title: "注册用户",
          key:'register_count'
        },
        {
          title: "独立注册IP",
          key: "register_ip_count"
        },
        {
          title: "充值用户",
          key: "recharge_count"
        },
        {
          title: "消费金额",
         key:"recharge_pay_sum"
        },
      ],
      sumData:[],
      options: {
        disabledDate(date){
          return date && date.valueOf() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            value() {
              const end = new Date();
              const start = new Date();
              return [start, end];
            }
          },
          {
            text: "昨天",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              return [start, end];
            }
          },
          {
            text: "过去整周",
            value() {
              var dateTime = new Date().getTime();
              var dateDay = new Date().getDay();
              var oneDayTime = 24 * 60 * 60 * 1000;
              var bg_time = dateTime - (dateDay + (7 - 1 - 0)) * oneDayTime;
              var ed_time = dateTime - (dateDay + (7 - 1 - 6)) * oneDayTime;
              const end = new Date();
              const start = new Date();
              start.setTime(bg_time);
              end.setTime(ed_time);
              return [start, end];
            }
          },
          {
            text: "过去整月",
            value() {
              // 获取某月的天数
              function getMonthDays(myMonth) {
                var monthStartDate = new Date(nowYear, myMonth, 1);
                var monthEndDate = new Date(nowYear, myMonth + 1, 1);
                var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
                return days;
              }
              // 现在日期
              var now = new Date();
              var nowYear = now.getYear();
              nowYear += (nowYear < 2000) ? 1900 : 0;
              //  获取上月日期
              var lastMonthDate = new Date();
              lastMonthDate.setDate(1);
              lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
              var lastMonth = lastMonthDate.getMonth();

              var getLastMonthStartDate = new Date(nowYear, lastMonth, 1);
              var getLastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));
              const end = new Date();
              const start = new Date();
              start.setTime(getLastMonthStartDate);
              end.setTime(getLastMonthEndDate);
              return [start, end];
            }
          },
          {
            text: "过去7天",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "过去30天",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: "过去60天",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              return [start, end];
            }
          }
        ]
      },
      summaryList: [
        {
          title: "推广日期",
          key: "date"
        },
        {
          title: "注册用户",
          key:'register_count',
          render:(h,params)=>{
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"hover",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                       this.$api.getDataEarning({date:params.row.date}).then(data=>{
                        if(data.code==200){
                          this.registerDetailList=data.data
                        }else{
                          this.$Message.info(data.msg)
                        }
                      })
                    }
                  }
                },[
                  h('div',{
                    slot:"content",
                    style:{
                      maxHeight:'230px',
                      overflow:'auto',
                      textAlign:'center'
                    }
                  },[
                     this.registerDetailList.map((item)=>{
                      return h('div',[
                        h('p',{
                          style:{
                            width:'120px',
                            float:'left',
                            color:'rgba(96, 122, 149, 1)',
                            'text-align': 'left',
                          }
                        },item.manager_name),
                        h('p',{
                          style:{
                            float:'left',
                            color:'rgba(96, 122, 149, 1)'
                          }
                        },item.register_count)
                      ])
                    }),
                    
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },params.row.register_count)
                ])
              ])
          }
        },
        {
          title: "独立注册IP",
          key:'register_ip_count',
           render:(h,params)=>{
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"hover",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                         this.$api.getDataEarning({date:params.row.date}).then(data=>{
                        if(data.code==200){
                          this.registerDetailList=data.data
                        }else{
                          this.$Message.info(data.msg)
                        }
                      })
                    }
                  }
                },[
                  h('div',{
                    slot:"content",
                    style:{
                      maxHeight:'230px',
                      overflow:'auto',
                      textAlign:'center'
                    }
                  },[
                     this.registerDetailList.map((item)=>{
                      return h('div',[
                        h('p',{
                          style:{
                            width:'120px',
                            float:'left',
                            color:'rgba(96, 122, 149, 1)',
                            'text-align': 'left',
                          }
                        },item.manager_name),
                        h('p',{
                          style:{
                            float:'left',
                            color:'rgba(96, 122, 149, 1)'
                          }
                        },item.register_ip_count)
                      ])
                    }),
                    
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },params.row.register_ip_count)
                ])
              ])
          }
        },
        {
          title: "充值用户",
          key:'recharge_count',
                   render:(h,params)=>{
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"hover",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                         this.$api.getDataEarning({date:params.row.date}).then(data=>{
                        if(data.code==200){
                          this.registerDetailList=data.data
                        }else{
                          this.$Message.info(data.msg)
                        }
                      })
                    }
                  }
                },[
                  h('div',{
                    slot:"content",
                    style:{
                      maxHeight:'230px',
                      overflow:'auto',
                      textAlign:'center'
                    }
                  },[
                     this.registerDetailList.map((item)=>{
                      return h('div',[
                        h('p',{
                          style:{
                            width:'120px',
                            float:'left',
                            color:'rgba(96, 122, 149, 1)',
                            'text-align': 'left',
                          }
                        },item.manager_name),
                        h('p',{
                          style:{
                            float:'left',
                            color:'rgba(96, 122, 149, 1)'
                          }
                        },item.register_ip_count)
                      ])
                    }),
                    
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },params.row.register_ip_count)
                ])
              ])
          }
        },
        {
          title: "消费金额",
          key:'recharge_pay_sum',
          render:(h,params)=>{
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"hover",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                         this.$api.getDataEarning({date:params.row.date}).then(data=>{
                        if(data.code==200){
                          this.registerDetailList=data.data
                        }else{
                          this.$Message.info(data.msg)
                        }
                      })
                    }
                  }
                },[
                  h('div',{
                    slot:"content",
                    style:{
                      maxHeight:'230px',
                      overflow:'auto',
                      textAlign:'center'
                    }
                  },[
                     this.registerDetailList.map((item)=>{
                      return h('div',[
                        h('p',{
                          style:{
                            width:'120px',
                            float:'left',
                            color:'rgba(96, 122, 149, 1)',
                            'text-align': 'left',
                          }
                        },item.manager_name),
                        h('p',{
                          style:{
                            float:'left',
                            color:'rgba(96, 122, 149, 1)'
                          }
                        },(item.recharge_pay_sum).toFixed(2))
                      ])
                    }),
                    
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },(params.row.recharge_pay_sum).toFixed(2))
                ])
              ])
          }
        },
      ]
    };
  },
  computed: {
    showTime() {
      if (this.bg_datetime === "") {
        return "请选择日期";
      } else {
        let bg = this.bg_datetime.toString().split("-");
        let ed = this.ed_datetime.toString().split("-");
        return bg[1] + "/" + bg[2] + "-" + ed[1] + "/" + ed[2];
      }
    },
    is_opendate() {
      return this.is_opentime;
    }
  },
  watch: {},
  methods: {
    datechange(data) {
      this.bg_datetime = data[0];
      this.ed_datetime = data[1];
    },
    is_open(n) {
      this.is_opentime = n;
    },
    getDataSummnyList(){
      this.$store.commit('changeloading',true)
      this.sumData=[]
      this.$api.getDataSummnyList({start_date:this.bg_datetime,end_date:this.ed_datetime}).then(data =>{
        if(data.code==200){
          this.summaryData=data.data
          this.$store.commit('changeloading',false)
          // this.spread=data.spread.min!==undefined?data.spread:{ min:0,reward:0}
          let currentdata={
            text:'当页汇总',
            register_count:0,
            register_ip_count:0,
            recharge_count:0,
            recharge_pay_sum:0,
          }
          this.summaryData.forEach(item => {
            currentdata.register_count += item.register_count
            currentdata.register_ip_count += item.register_ip_count
            currentdata.recharge_count += item.recharge_count
            currentdata.recharge_pay_sum += Number(item.recharge_pay_sum)

          })
          currentdata.recharge_pay_sum = currentdata.recharge_pay_sum.toFixed(2)
          this.sumData.push(currentdata)
          let nomonData = {
            text:'本月汇总',
            register_count:data.monthData.register_count,
            register_ip_count:data.monthData.register_ip_count,
            recharge_count:data.monthData.recharge_count,
            recharge_pay_sum:data.monthData.recharge_pay_sum,
          }
          nomonData.recharge_pay_sum =  nomonData.recharge_pay_sum.toFixed(2)
         this.sumData.push({...nomonData})
         
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
  },
  created() {
    this.getDataSummnyList()
  }
};
</script>
<style>
.item_div {
  width: 29%;
}
.item_divs {
  width: 38%;
}
.server_info_item {
  width: 100%;
  height: 23px;
  clear: both;
  /* margin-bottom: 5px; */
}
.server_info_item p{
  font-size:12px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color: rgba(67, 73, 87, 1);
}
.server_lastrow_item {
  white-space: nowrap;
  width: 100%;
  height: 23px;
  margin-bottom: 4px;
  text-align: justify;
  clear: both;
}
.server_info {
  width: 100%;
  height: 200px;
  padding: 0px 25px 15px 25px;
  border:1px solid rgba(241, 241, 241, 1);
  margin-top: 20px;
  font-size: 12px;
  color: rgba(34, 44, 50, 1);
  font-weight:400;
}
.server_info .ivu-form .ivu-form-item-label{
  font-size: 12px;
  font-family:MicrosoftYaHei-Bold;
  font-weight:bold;
  color:rgba(67,73,87,1);
  padding: 4px 12px 4px 0!important
}
.server_info .ivu-form-item{
  margin-bottom: 5px
}
.server_info .ivu-form-item-content{
  line-height: 18px
}
.item_div,.item_divs{
  margin-top: 12px
}
.sum_summary_text {
  font-size: 15px;
  padding-top: 14px;
  margin-left: 5px;
}
.chorese_time {
  width: 150px;
  padding-top: 16px;
}
.chorese_time img {
  margin-top: 4px;
}
.chorese_time p {
  margin-left: 10px;
  font-size: 14px;
}
.no_chorese_time {
  color: rgba(211, 211, 211, 1);
}
.yes_chorese_time {
  color: rgba(51, 51, 51, 1);
}
.chorese_time .chorse {
  position: absolute;
  right: 50px;
  font-size: 12px;
}
.chorese_time .ivu-picker-panel-shortcut {
  padding: 8px 15px;
  color: rgba(96, 122, 149, 1);
}
.chorese_time .ivu-picker-confirm {
  border: none !important;
}
.chorese_time .ivu-input,
.chorese_time .ivu-input-icon {
  opacity: 0
}
.updown {
  position: relative;
  top: 5px;
  left: 15px;
  rotate: 180deg;
}
.updown.rotate {
  transform: rotate(180deg);
  transition: all 0.4s;
}
.fwq_title{
  padding-top: 15px;
  margin-left: 5px;
  font-size: 15px
}
#first_table .ivu-table th{
  color: rgba(67, 73, 87, 1);
}
#second_table.ivu-table-wrapper{
  border-top: none;
}
.ivu-table td.table-font-bold{
  font-weight: bold
}
#second_table tr.ivu-table-row-hover td {
  background-color: #FAFAFC!important;
}
#second_table .ivu-table td{
  background-color:#FAFAFC
}
#first_table .ivu-table:before{
  display: none
}
.hover_contents{
  color: rgba(96, 122, 149, 1);
  font-size: 12px;
  font-family: MicrosoftYaHei-Bold;
}
.hover_contents p{
  line-height: 20px
}
.hover_contents p span{
  color: rgba(96, 122, 149, 1) !important;
  font-weight: bold;
}
.ivu-poptip-popper[x-placement=bottom-start] .ivu-poptip-arrow{
  left:9px;
}
.hover_contents .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow {
  top: 0px;
  border-width: 0 10px 9px;
}
.hover_contents .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow:after {
  top: 0px;
  border-bottom-width: 10px;
  margin-left: -9px;
}
.hover_contents .ivu-poptip-arrow:after {
  border-width: 9px;
}
#first_table .ivu-table-tip{
  display: none
}
.chorse .ivu-input-suffix{
  display: none;
}
</style>



