<template>
    <div class="gameData flex-display">
        <div class="head">
            <div class="text">
                <div class="head-item" placeholder="请选择创建时间">
                    <el-date-picker
                            v-model="createTime"
                            @change="handelCreateTimeChange"
                            type="datetimerange"
                            :value-format="'yyyy-MM-dd HH:mm:ss'"
                            start-placeholder="日期"
                            end-placeholder="日期"
                            :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </div>

                <div class="head-item">
                    <el-select v-model="params.plat" placeholder="请选择平台" clearable>
                        <el-option
                                v-for="item in plat"
                                :key="item"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </div>

                <div class="head-item">
                    <el-select v-model="params.type" placeholder="请选择类型" clearable>
                        <el-option
                                v-for="item in typeList"
                                :key="item"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </div>

                <div class="head-item">
                    <el-select v-model="params.item" placeholder="请选择类别" v-if=" params.type === 'category' || params.type === 'cellCategory'" clearable>
                        <el-option
                                v-for="item in items"
                                :key="item"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </div>

                <div class="head-item">
                    <el-select v-model="params.which" placeholder="请选择题号" v-if=" params.type === 'answer' " clearable>
                        <el-option
                                v-for="item in which"
                                :key="item"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </div>

                <div class="action">
                    <el-button plain type="primary" icon="el-icon-search" @click="getGameData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="list">
            <el-table :data="gameData" border stripe :fit="false" show-summary >
                <el-table-column label="日期Time" prop="id" width="150" show-overflow-tooltip sortable/>
                <el-table-column label="点击总量/次" prop="amount" width="150" show-overflow-tooltip />
                <el-table-column label="点击人数/次" prop="userAmount" width="150" show-overflow-tooltip />
                <el-table-column label="平均" prop="average" width="150" show-overflow-tooltip/>
            </el-table>
        </div>



        </div>
</template>

<script>

  import gameDataApi from '@/api/gameData'
  import {getLastDay, formatTime} from '@/utils/util'

  export default {
    name: 'gameData',
    data(){
      return{
        createTime:'',
        params:{},
        typeList:{},
        gameData:[],
        items:{},
        plat:{},
        which:{}
        // plat:[{label:'百度平台',value:'BAIDU_GAME'},
        //   {label:'微信平台',value:'WECHAT_GAME'},
        //   {label:'其他平台',value:'OTHER_GAME'}]
      }
    },
    mounted(){
      this.init()
      this.getCollection();
    },
    methods:{
      init(){
        let lastDay = getLastDay(3)
        this.createTime = lastDay
        this.params.startTime = lastDay ? formatTime(lastDay[0]).replace(" ","-").replace(/:/g,"-"): null
        this.params.endTime = lastDay ? formatTime(lastDay[1]).replace(" ","-").replace(/:/g,"-"): null
      },
      handelCreateTimeChange(val) {
        this.params.startTime = val ? val[0] : null;
        this.params.endTime = val ? val[1] : null;
        if(this.params.startTime != null){
          this.params.startTime = this.params.startTime.replace(" ","-").replace(/:/g,"-");
          this.params.endTime = this.params.endTime.replace(" ","-").replace(/:/g,"-");;
        }
      },
      getCollection(){
        gameDataApi.getCollections().then(res => {
          this.typeList = res.collection
          this.plat = res.plat
          this.items = res.item
          this.which = res.which;
        });

      },
      getGameData(){
        if(this.params.type != null && this.params.type !== ''){
          gameDataApi.getGameData(this.params).then(res => {
            this.gameData = res;
            this.gameData.map(m => m.average = (m.userAmount/m.amount*100).toFixed(2) + '%')
            console.log(res)
            // this.gameData.map(m => m.id = this.insertStr(this.insertStr(m.id, 4, "/"), 7, "/"))
            //切割 this.insertStr(this.insertStr(m.id, 4, "/"), 7, "/")
          })
        }else{
          this.open()
        }
      },
      insertStr(soure, start, newStr) {
        return soure.slice(0, start) + newStr + soure.slice(start);
      },
      open() {
        this.$message({
          message: '必须选择类型',
          type: 'warning',
          duration:1000
        });
      },


    }
  }
</script>

<style scoped>

</style>
