<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="gameGateId" placeholder="游戏名称">
        <el-option v-for="(item,index) in gameOptions" :key="index" :value="item.gameId" :label="item.gameName"></el-option>
      </el-select>
      <el-select v-model="gameChannelId" placeholder="渠道名称">
        <el-option v-for="(item,index) in gameChannelOptions" :key="index" :value="item.channelId" :label="item.channelName"></el-option>
      </el-select>
      <el-date-picker v-model="rangeTime" type="datetimerange" align="right" :unlink-panels="true"
                    start-placeholder="开始时间" end-placeholder="结束时间" :editable="false" :picker-options="timeOption"
                    :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-button type="primary" @click="clickBaseQuery">查询</el-button>
    </div>

    <el-table
    v-loading="listLoading"
    :data="list"
    border
    fit
    highlight-current-row
    style="width: 100%"
    >
      <el-table-column label="时间" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span">{{ row.timestamp | paserTime('{y}-{m}-{d}') }}</span">
        </template>
      </el-table-column>
      <el-table-column label="游戏名称" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.gameName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道ID" min-width="150px">
        <template slot-scope="{row}">
          <span">{{ row.gameId }}</span">
        </template>
      </el-table-column>
      <el-table-column label="新增用户" min-width="150px">
        <template slot-scope="{row}">
          <span">{{ row.gameId }}</span">
        </template>
      </el-table-column>
      <el-table-column label="活跃用户" min-width="150px">
        <template slot-scope="{row}">
          <span">{{ row.gameId }}</span">
        </template>
      </el-table-column>
      <el-table-column label="付费用户" min-width="150px">
        <template slot-scope="{row}">
          <span">{{ row.gameId }}</span">
        </template>
      </el-table-column>
      <el-table-column label="付费金额" min-width="150px">
        <template slot-scope="{row}">
          <span">{{ row.gameId }}</span">
        </template>
      </el-table-column>
      

    </el-table>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name:'gameDatas',
  components: { Pagination },
  data() {
    return {
      gameGateId:'',
      gameOptions:[{gameId:'1',gameName:'柯南'},
                   {gameId:'2',gameName:'火影'},
                   {gameId:'3',gameName:'红警'}],
      gameChannelId:'',
      gameChannelOptions:[{channelId:'001', channelName:'推广员1'},
                          {channelId:'002', channelName:'推广员2'},
                          {channelId:'003', channelName:'推广员3'}],
      rangeTime:[],
      timeOption: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一月',
            onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      list:null,
      total:0,
      listLoading: false,
    }
  },
  created(){
    this.getGameNewUserIncreate();
  },
  methods: {
    clickBaseQuery(){
      
    },
    getGameNewUserIncreate(){

    },
  },
  components: {

  }
}
</script>

<style lang="scss" scoped>

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

</style>
