<template>
  <div class="right_con">
    <div class="news_info_fgx fl"></div>
    <p class="date_sum fl">数据汇总</p>
    <div class="fr search mar_T_15">
      <Input class="wid_120" placeholder="员工账号" v-model="search.name" @on-enter="getDataSumList()"></Input>
      <Input class="wid_120" placeholder="平台账号" v-model="search.channel_name" @on-enter="getDataSumList()"></Input>
      <DatePicker :transfer='true' type="date" :value="search.start_time" :options="bg_date_op" placeholder="开始时间" class="wid_120" @on-change="bgdatechange"></DatePicker> -
      <DatePicker :transfer='true' type="date" :value="search.end_time" :options="ed_date_op" placeholder="结束时间" class="wid_120" @on-change="eddatechange"></DatePicker>
      <Button type="primary" class="mar_L_5" @click="getDataSumList()">搜索</Button>
      <Button class="clear_btn" @click="removeSearch">清空</Button>
    </div>
    <Table :columns="dataSumList" :data="dataSumData" border class="tables clear"></Table>
    <Table :columns="sumdataSumList" :data="sumdataSumData" border :show-header="false" id="datasum-table" style="font-weight:bold;border-top:0"></Table>
    <div class="page">
      <Page :total="count" :page-size="10" size="small" show-total show-elevator @on-change="getDataSumList"/>
    </div>
    <updateSystemModal :isUpdateSystem.sync="isUpdateSystem" :updateSystemDataDetail='updateSystemDataDetail'></updateSystemModal>
  </div>
</template>
<script>
import { getNewtoday, removeSearch } from "@/assets/js/common";
import { setStore } from "@/utils/utils";
import updateSystemModal from "@@/set/update_system_modal";
export default {
  name: "data_sum",
  components:{updateSystemModal},
  data() {
    return {
      isUpdateSystem:false,
      count:0,
      pindex:1,
      updateSystemDataDetail:{},
      dataSumData: [],
      sumdataSumData: [],
      registerDetailList:[],
      MoneySumDetailList:[],
      sumdataSumList:[
        {
          title:'员工',
          render:(h,params)=>{
            return h('span','汇总')
          }
        },
        {
          title:'平台账号',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'注册用户',
          key:'register_num'
        },
        {
          title:'注册IP数',
          key:'ip_num'
        },
        {
          title:'充值用户',
          key:'recharge_num'
        },
        {
          title:'充值金额',
          key:'sumNum'
        }
      ],
      dataSumList: [
        {
          title:'员工',
          key:'name'
        },
        {
          title:'平台账号',
          key:'promote_account'
        },
        {
          title:'注册用户',
          render:(h,params)=>{
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"click",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                      this.$api.getDataregisterDetail({promote_account:params.row.promote_account,manager_id:params.row.id,start_time:this.search.start_time,end_time:this.search.end_time}).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',{
                        style:{ width:'180px' }
                      },[
                        h('p',{
                          style:{
                            height:'25px',
                            color:'#607a95',
                            marginLeft:'20px'
                          }
                        },item)
                      ])
                    }),
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },params.row.register_count)
                ])
              ])
          }
        },
        {
          title:'注册IP数',
          key:'register_ip_count'
        },
        {
          title:'充值用户',
          key:'recharge_count'
        },
        {
          title:'充值金额',
          render:(h,params)=>{
            // let moneySum=(Number(params.row.recharge_amount)+Number(params.row.new_recharge_amount))/100
            return h('div',[
                h('Poptip',{
                  props:{
                    trigger:"click",
                    transfer: true,
                    placement:"bottom"
                  },
                  on:{
                    'on-popper-show':()=>{
                      this.$api.getDataMoneySumDetail({
                        promote_account:params.row.promote_account,
                        manager_id:params.row.id,
                        start_time:this.search.start_time,
                        end_time:this.search.end_time
                      }).then(data=>{
                        if(data.code==200){
                          this.MoneySumDetailList=data.data
                        }else{
                          this.$Message.info(data.msg)
                        }
                      })
                    }
                  }
                },[
                  h('div',{
                    slot:"content",
                    style:{
                      maxHeight:'230px',
                      overflow:'auto',
                    }
                  },[
                    this.MoneySumDetailList.map((item)=>{
                      return h('div',{
                        style:{
                          // paddingLeft:'10px',
                          paddingRight:'10px',
                          textAlign: 'center',
                        }
                      },[
                        h('p',{
                          style:{
                            // float:'left',
                            height:'25px',
                            color:'#607a95',
                          }
                        },[
                          h('span',item.user_account),
                        h('span','('),
                        h('span',item.game_name||' '),
                        h('span',',￥'),
                        h('span',Number(item.total_amount)/100),
                        h('span',')'),
                        ])
                      ])
                    }),
                  ]),
                  h('span',{
                    style:{
                      cursor:'pointer'
                    }
                  },params.row.recharge_num.toFixed(2))
                ])
              ])
          }
        }
      ],
      bg_date_op: {
        disabledDate: date => {
          return date && date.valueOf() >=  Date.now();
        }
      },
      ed_date_op: {
        disabledDate: date => {
          return date && date.valueOf() >=  Date.now()
        }
      },
      search: {
        name:'',
        channel_name:'',
        start_time:'',
        end_time:'',
      }
    };
  },
  watch: {
    // "search.start_time"(n) {
    //   if (n) {
    //     let datetime = getNewtoday(n);
    //     this.ed_date_op = {
    //       disabledDate: date => {
    //         return date && date.valueOf() >  Date.now() - 86400000;
    //       }
    //     };
    //   } else {
    //     this.ed_date_op = {
    //       disabledDate: date => {
    //         return date &&date.valueOf() > Date.now() - 86400000;
    //       }
    //     };
    //   }
    // },
    // "search.end_time"(n) {
    //   if (n) {
    //     this.bg_date_op = {
    //       disabledDate: date => {
    //         return date && date.valueOf() >  Date.now() - 86400000;
    //       }
    //     };
    //   } else {
    //     this.bg_date_op = {};
    //   }
    // }
  },
  methods: {
    getDataSumList(page=1) {
      if(!!this.search.start_time||!!this.search.end_time){
        if(!!!this.search.start_time){
          this.$Message.info('请选择开始时间')
          return false
        }
        if(!!!this.search.end_time){
          this.$Message.info('请选择结束时间')
          return false
        }
      }
      this.sumdataSumData=[]
      let register_num=0
      let ip_num=0
      let recharge_num=0
      let sumNum=0
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.$api.getDataSumList({limit:10,page:this.pindex,...this.search}).then(data=>{
        if(data.code==200){
          this.dataSumData=data.data
          this.count=data.count
          data.data.forEach((item,index) => {
            register_num+=Number(item.register_count)
            ip_num+=Number(item.register_ip_count)
            recharge_num+=Number(item.recharge_count)
            sumNum+=Number(item.recharge_num)
          });
          sumNum = sumNum.toFixed(2)
          
          this.sumdataSumData.push({register_num,ip_num,recharge_num,sumNum})
          this.$store.commit('changeloading',false)
        }else{
          this.$store.commit('changeloading',false)
          this.$Message.info(data.msg)
        }
      })
    },
    // 时间选择--开始时间
    bgdatechange(date) {
      this.search.start_time = date;
    },
    // 时间选择--结束时间
    eddatechange(date) {
      this.search.end_time = date;
    },
    // 清空搜索条件
    removeSearch() {
      this.search = { ...removeSearch({ ...this.search }) };
    },
    getSiteInfo(){
      this.$api.getSiteInfo().then(data => {
        if(data.code==200){
          setStore('logoIco',{logo:data.data.admin_logo_url,ico:data.data.admin_icon_url})
        }else{
          setStore('logoIco',{logo:'',ico:''})
        }
      })
    },
    detectionSystem(){
      this.$api.detectionSystem().then(data=>{
        if(data.code==200){
          this.isUpdateSystem=true
          this.updateSystemDataDetail=data.data
        }
      })
    },
  },
  created() {
    // this.getSiteInfo()
    this.getDataSumList()
    if(this.isFirstLogin&&(this.role==1||this.role==0)){
      this.detectionSystem()
    }
  },
  mounted() {}
};
</script>
<style>
.date_sum{
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px
}
#datasum-table .ivu-table td{
  background-color: #FAFAFC!important
}
#datasum-table .ivu-table-row-hover{
  background-color: #FAFAFC
}
</style>