<template>
    <div class="dm-wrap" v-loading="loading">
      <div class="pb20"><span class="bold fz14">统计</span><span class="pl20">参与人数：{{dataObj.participateNum || '--'}}   参与次数：{{dataObj.participateCount || '--'}}  新增关注人数：{{dataObj.newfollowersNum || '--'}}</span></div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="排行榜" name="first">
          <div class="clearfix pb22">
            <el-select class="dm-select" v-model="listParams.gameStatus" placeholder="选择发送状态" @change="LoadPtyxRecordList">
              <el-option v-for="(v,i) in gameStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option>
            </el-select>
            <el-input v-model="listParams.searchParam" class="w200" placeholder="会员昵称/手机号/卡号" clearable @change="LoadPtyxRecordList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <el-button icon="iconfont icon-icon_yunxiazai fz14" type="primary" class="fr" @click="exportPtyxExcel"> 下载Excel</el-button>
          </div>
          <el-table tooltipEffect="light" :data="rankList" style="width:100%" v-loading="loading">
            <el-table-column width="60"  align="left" label="名次" prop="ranking"></el-table-column>
            <el-table-column min-width="150"  header-align="left" align="left" label="会员信息">
              <template slot-scope="scope">
                <a :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId" target="_blank" class="sms-table_info">
                  <img class="vertical-middle table__avatar" :src="scope.row.memberPhotoUrl" alt="" srcset="">
                  <p class="inline-block vertical-middle">{{scope.row.memberName || '--'}}</p>
                </a>
              </template>
            </el-table-column>
            <el-table-column v-for="(v,i) in rankHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
          </el-table>
          <el-pagination v-show="rankList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="参与记录" name="second">
            <div class="clearfix pb22">
              <el-select class="dm-select" v-model="listParams1.gameStatus" placeholder="选择发送状态" @change="LoadPtyxRecordList1">
                <el-option v-for="(v,i) in gameStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option>
              </el-select>
              <el-input v-model="listParams1.searchParam" class="w200" placeholder="会员昵称/手机号/卡号" clearable @change="LoadPtyxRecordList1"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            </div>
            <el-table tooltipEffect="light" :data="recordList" style="width:100%" v-loading="loading">
                <el-table-column min-width="150" header-align="left"  align="left" label="会员信息">
                  <template slot-scope="scope">
                    <a :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId" target="_blank" class="sms-table_info">
                      <img class="vertical-middle" :src="scope.row.memberImage" alt="" srcset="">
                      <p class="fz12 inline-block vertical-middle">{{scope.row.memberName}}</p>
                    </a>
                  </template>
                </el-table-column>
                <el-table-column v-for="(v,i) in recordHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
            </el-table>
            <el-pagination v-show="recordList.length" background class="dm-pagination" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="listParams1.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams1.pageSize" layout="total, sizes, prev, pager, next" :total="total1"></el-pagination>
          </el-tab-pane>
      </el-tabs>
    </div>
</template>
<script>
import {LoadPtyxRecordList,exportPtyxExcel,ptyxCalcTitle,url} from '@/service/api/gameApi.js';
import {formateDateTimeByType} from '@/utils/index.js'
  export default {
    data() {
      return {
            gameStatusOptions:[{value:-1,label:'所有状态'},{value:2,label:'成功'} ,{value:1,label:'失败'}],
            activeName:'first',
            loading:false,
            rankList:[],
            rankHeader:[
                {label:'手机号码',prop:'memberPhone',width:'110',align:'left'},
                {label:'消耗方式',prop:'costType',width:'80',align:'left'},
                {label:'消耗数值',prop:'costValue',width:'80',align:'left'},
                {label:'参与次数',prop:'playTimes',width:'80',align:'left'},
                {label:'最佳时间',prop:'opticalTime',width:'80',align:'left'}],
            listParams:{
              tabName:'rank',
              gameActivityId:'',
              searchParam:'',
              gameStatus:-1,
              currentPage:1,	//是	Number	当前页面
              pageSize:20 //是	Number	每页显示条数
            },
            total:0,
            loading1:false,
            recordList:[],
            recordHeader:[
                {label:'玩游戏时间',prop:'createTime',minWidth:'170',align:'left',formatter:function(row){
                  return formateDateTimeByType(row.createTime,'yyyy-MM-dd-HH-mm-ss')}},
                {label:'手机号码',prop:'memberPhone',minWidth:'110',align:'left'},
                {label:'消耗方式',prop:'costType',width:'80',align:'left'},
                {label:'消耗数值',prop:'costValue',width:'80',align:'left'},
                {label:'游戏状态',prop:'gameStatus',width:'80',align:'left'},
                {label:'时间',prop:'opticalTime',width:'80',align:'left'}],
            listParams1:{
              tabName:'attendRecord',
              gameActivityId:'',
              searchParam:'',
              gameStatus:-1,
              currentPage:1,	//是	Number	当前页面
              pageSize:20 //是	Number	每页显示条数
            },
            total1:0,
            dataObj:{}
      };
    },
    created(){
      this.LoadPtyxRecordList();
      this.LoadPtyxRecordList1();
      this.ptyxCalcTitle();
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'拼图游戏',path:'/game/ptyx'},{name:'拼图游戏统计',path:''}])
    },
    methods: {
      async ptyxCalcTitle(){
        let res = await ptyxCalcTitle({gameActivityId:this.$route.params.id});
        if (res.errorCode === 0) {
          this.dataObj = res.result;
        }
      },
      async LoadPtyxRecordList() {
        this.loading = true;
        this.listParams.gameActivityId = this.$route.params.id;
        let res = await LoadPtyxRecordList(this.listParams);
        this.rankList = res.result.result || [];
        this.total = res.result.totalCount;
        this.loading = false;
      },
      handleSizeChange(val) {
        this.listParams.pageSize = val;
        this.LoadPtyxRecordList();
      },
      handleCurrentChange(val) {
        this.listParams.currentPage = val;
        this.LoadPtyxRecordList();
      },
      exportPtyxExcel() {
        let data = {gameActivityId:this.listParams.gameActivityId,searchParam:this.listParams.searchParam}
        exportPtyxExcel(data).then(res => {
          const fileName = res.result;
          const downLoadUrl = url + res.result;
          window.location = downLoadUrl;
        })
      },
      async LoadPtyxRecordList1() {
        this.loading1 = true;
        this.listParams1.gameActivityId = this.$route.params.id;
        let res = await LoadPtyxRecordList(this.listParams1);
        this.recordList = res.result.result || [];
        this.total1 = res.result.totalCount;
        this.loading1 = false;
      },
      handleSizeChange1(val) {
        this.listParams1.pageSize = val;
        this.LoadPtyxRecordList1();
      },
      handleCurrentChange1(val) {
        this.listParams1.currentPage = val;
        this.LoadPtyxRecordList1();
      },
    }
  };
</script>
<style lang="scss" scoped>
.ptyx /deep/ .el-tabs__content {
    margin: 0;
    background: #fff;
}
.ptyx /deep/ .el-tabs__content>div{
    margin: 0px;
}
</style>
