<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="getDataRechargeList()"></Input>
      <Input class="wid_120" placeholder="游戏" v-model="search.game_name" @on-enter="getDataRechargeList()"></Input>
      <Input class="wid_120" placeholder="员工账号" v-model="search.manager_name" @on-enter="getDataRechargeList()"></Input>
      <Input class="wid_120" placeholder="平台账号" v-model="search.channel_name" @on-enter="getDataRechargeList()"></Input>
      <DatePicker type="date" :value="search.start_time" :transfer='true' :options="bg_date_op" placeholder="开始时间" class="wid_120" @on-change="bgdatechange"></DatePicker> -
      <DatePicker type="date" :value="search.end_time" :transfer='true' :options="ed_date_op" placeholder="结束时间" class="wid_120" @on-change="eddatechange"></DatePicker>
      <Button type="primary" class="mar_L_5" @click="getDataRechargeList()">搜索</Button>
      <Button class="clear_btn" @click="removeSearch">清空</Button>
    </div>
    <Table :columns="dataRechargeList" :data="dataRechargeData" border class="tables clear"></Table>
    <Table :columns="sumdataRechargeList" :data="sumdataRechargeData" border :show-header="false" id="datarecharge-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="getDataRechargeList"/>
    </div>
  </div>
</template>
<script>
import { getNewtoday, removeSearch,changeUnixtime } from "@/assets/js/common";
export default {
  name: "data_recharge",
  data() {
    return {
      count:0,
      pindex:1,
      dataRechargeData: [],
      sumdataRechargeData: [],
      sumdataRechargeList:[
        {
          title:'ID',
          width:90,
          render:(h,params)=>{
            return h('span','汇总')
          }
        },
        {
          title:'玩家账号',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'订单号',
          width:200,
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'游戏名称',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'区服',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'应付金额',
          render:(h,params)=>{
            return h('span',(Number(params.row.total_amount)/100).toFixed(2))
          }
        },
        {
          title:'实付金额',
          render:(h,params)=>{
            return h('span',(Number(params.row.cost_amount)/100).toFixed(2))
          }
        },
        {
          title:'充值时间',
          width:190,
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'充值方式',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'员工',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'平台账号',
          render:(h,params)=>{
            return h('span','--')
          }
        },
      ],
      dataRechargeList: [
        {
          title:'ID',
          width:90,
          key:'id'
        },
        {
          title:'玩家账号',
          key:'user_account'
        },
        {
          title:'订单号',
          width:200,
          key:'order_no'
        },
        {
          title:'游戏名称',
          key:'game_name'
        },
        {
          title:'区服',
          key:'server_name'
        },
        {
          title:'应付金额',
          render:(h,params)=>{
            return h('span',(Number(params.row.total_amount)/100.).toFixed(2))
          }
        },
        {
          title:'实付金额',
          render:(h,params)=>{
            return h('span',(Number(params.row.cost_amount)/100).toFixed(2))
          },
          className:'table-special'
        },
        {
          title:'充值时间',
          width:180,
          render:(h,params)=>{
            return h('span',changeUnixtime(params.row.pay_time))
          }
        },
        {
          title:'充值方式',
          key:'pay_way_str'
        },
         {
          title:'所属平台',
          key:'platform_name'
        },
        {
          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: {
    getDataRechargeList(page=1) {
      this.sumdataRechargeData=[]
      this.pindex=page
      this.$store.commit('changeloading',true)
      this.$api.getDataRechargeList({limit:10,page:this.pindex,...this.search}).then(data=>{
        if(data.code==200){
          this.dataRechargeData=data.data
          this.count=data.count
          let total_amount=0
          let cost_amount=0
          data.data.forEach((item,index) => {
            total_amount+=item.total_amount
            cost_amount+=item.cost_amount
          });
          this.sumdataRechargeData.push({total_amount,cost_amount})
          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.getDataRechargeList()
  },
  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;
}
#datarecharge-table .ivu-table td{
  background-color: #FAFAFC!important
}
#datarecharge-table .ivu-table-row-hover{
  background-color: #FAFAFC
}
</style>