<template>
  <div class="right_con">
    <div class="news_info_fgx fl"></div>
    <p class="date_recharge fl">注册明细</p>
    <p class="date_recharge_title_summny fl">说明：对所有平台用户玩家产生的注册信息，进行记录的功能</p>
    <div class="fr search mar_T_15">
      <Input class="wid_120" placeholder="玩家账号" v-model="search.user_account" @on-enter="getDataRegisterList()"></Input>
      <Input class="wid_120" placeholder="游戏" v-model="search.game_name" @on-enter="getDataRegisterList()"></Input>
      <Input class="wid_120" placeholder="员工账号" v-model="search.manager_name" @on-enter="getDataRegisterList()"></Input>
      <Input class="wid_120" placeholder="平台账号" v-model="search.channel_name" @on-enter="getDataRegisterList()"></Input>
      <DatePicker type="date" :transfer='true' :value="search.start_time" :options="bg_date_op" placeholder="开始时间" class="wid_120" @on-change="bgdatechange"></DatePicker> -
      <DatePicker type="date" :transfer='true' :value="search.end_time" :options="ed_date_op" placeholder="结束时间" class="wid_120" @on-change="eddatechange"></DatePicker>
      <Button type="primary" class="mar_L_5" @click="getDataRegisterList()">搜索</Button>
      <Button class="clear_btn" @click="removeSearch">清空</Button>
    </div>
    <Table :columns="dataRegisterList" :data="dataRegisterData" border class="tables clear"></Table>
    <div class="page">
      <Page :total="count" :page-size="10" size="small" show-total show-elevator @on-change="getDataRegisterList"/>
    </div>
  </div>
</template>
<script>
import { getNewtoday, removeSearch,changeUnixtime } from "@/assets/js/common";
export default {
  name: "data_register",
  data() {
    return {
      count:0,
      pindex:1,
      dataRegisterData: [],
      dataRegisterList: [
        {
          title:'ID',
          width:90,
          key:'id'
        },
        {
          title:'玩家账号',
          key:'user_account'
        },
        {
          title:'游戏名称',
          key:'game_name'
        },
        // {
        //   title:'区服',
        //   key:'server_name'
        // },
        {
          title:'注册时间',
          width:180,
          render:(h,params)=>{
            return h('span',changeUnixtime(params.row.register_time))
          }
        },
        {
          title:'注册IP',
          key:'register_ip'
        },
        {
          title:'员工',
          key:'manager_name'
        },
        {
          title:'平台账号',
          key:'channel_name'
        },
      ],
      bg_date_op: {
        disabledDate: date => {
          return date && date.valueOf() >=  Date.now();
        }
      },
      ed_date_op: {
        disabledDate: date => {
          return date && date.valueOf() >=  Date.now()
        }
      },
      search: {
        manager_name:'',
        channel_name:'',
        start_time:'',
        end_time:'',
        user_account:'',
        game_name:'',
      },
    };
  },
  watch: {
    "search.start_time"(n) {
      if (n) {
        let datetime = getNewtoday(n);
        this.ed_date_op = {
          disabledDate: date => {
            return date && date.valueOf() < new Date(datetime);
          }
        };
      } else {
        this.ed_date_op = {};
      }
    },
    "search.end_time"(n) {
      if (n) {
        this.bg_date_op = {
          disabledDate: date => {
            return date && date.valueOf() > new Date(n);
          }
        };
      } else {
        this.bg_date_op = {};
      }
    }
  },
  methods: {
    getDataRegisterList(page=1) {
      this.pindex=page
      this.$store.commit('changeloading',true)
      this.$api.getDataRegisterList({limit:10,page:this.pindex,...this.search}).then(data=>{
        if(data.code==200){
          this.dataRegisterData=data.data
          this.count=data.count
          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 }) };
    },
  },
  created() {
    this.getDataRegisterList()
  },
  mounted() {}
};
</script>
<style>
.date_recharge{
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px
}
.date_recharge_title_summny{
  height: 20px;
  position: relative;
  width: 400px;
  left: 65px;
  top: 15px;
  font-size: 13px;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
}
</style>