<template>
  <section class="dm-wrap game-dzp">
    <div class="pb22 clearfix">
      <el-select class="dm-select" v-model="listParams.gameStatus" placeholder="选择游戏状态" @change="loadLotteryList">
          <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="loadLotteryList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button class="fr" type="primary" @click="$router.push('/game/dzp/add')">新建游戏</el-button>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" >
      <el-table-column v-for="(v,i) in tableHeader" :fixed="v.fixed" :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">
        <template slot-scope="scope">
          <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
          <span v-else>{{scope.row[v.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="220px" fixed="right">
        <template slot-scope="scope" >
            <el-button type="text" v-clipboard:text="scope.row.gameUrl">复制</el-button>
            <el-button type="text" @click="recordData(scope.row)">记录</el-button>
            <el-button type="text" @click="editData(scope.row)" v-if="scope.row.gameStatus != '3'">编辑</el-button>
            <el-button type="text" @click="detailData(scope.row)" v-if="scope.row.gameStatus == '3'">详情</el-button>
            <dm-delete @confirm="delData(scope.row)" tips="是否删除该游戏?">
              <el-button type="text">删除</el-button>
            </dm-delete>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="tableList.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>
  </section>
</template>
<script>
import {formateDateTimeByType} from '@/utils/index.js'
import {loadLotteryList,delLotteryService} from '@/service/api/gameApi.js';
export default {
    name: 'game-dzp',
    data () {
        return {
            gameStatusOptions:[{value:'',label:'所有状态'},{value:1,label:'待开始'} ,{value:2,label:'进行中'} ,{value:3,label:'已结束'}],
            listParams:{
                gameStatus:'',
                gameType:1,
                searchParam:'',
                currentPage:1,
                pageSize:20
            },
            total:0,
            loading:false,
            tableHeader:[
                {label:'游戏名称',prop:'gameName',width:'120',align:'left',fixed:'left'},
                {label:'抽奖消耗',prop:'gameIntegral',width:'120',align:'left',formatter:function(row){
                  return row.gameIntegral +'积分'
                }},
                {label:'中奖几率',prop:'gameWinningRate',width:'120',align:'left',formatter:function(row){
                  return row.gameWinningRate.toFixed(1) +'%'
                }},
                {label:'游戏状态',prop:'gameStatusName',width:'80',align:'left',isRender:true,formatter:function(row){
                  if (row.gameStatusName === '进行中') {
                    return `<div><span class="dm-status--primary--flash"></span>${row.gameStatusName}</div>`
                  } else {
                    return `<div class="${row.gameStatusName === '未开始'?'dm-status--warning':'dm-status--info'}">${row.gameStatusName}</div>`
                  }
                }},
                {label:'开始时间',prop:'gameStartTime',minWidth:'170', tooltip:true,align:'left',formatter:function(row){
                  return formateDateTimeByType(row.gameStartTime,'yyyy-MM-dd-HH-mm-ss');
                }},
                {label:'结束时间',prop:'gameEndTime',minWidth:'170', tooltip:true,align:'left',formatter:function(row){
                  return formateDateTimeByType(row.gameEndTime,'yyyy-MM-dd-HH-mm-ss');
                }},
                {label:'参与人数',prop:'userCount',width:'80',align:'left'},
                {label:'参与次数',prop:'totalCount',width:'80',align:'left'}],
            tableList:[],
        }
    },
    created() {
      this.loadLotteryList();
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'大转盘',path:'/game/dzp'}])
    },
    methods: {
        handleSizeChange(val) {
            this.listParams.pageSize = val;
            this.loadLotteryList();
        },
        handleCurrentChange(val) {
            this.listParams.currentPage = val;
            this.loadLotteryList();
        },
        async loadLotteryList() {
            this.loading = true;
            let res = await loadLotteryList(this.listParams);
            console.log(res)
            this.tableList = res.result.page.result || [];
            this.total = res.result.page.totalCount;
            this.loading = false;
        },
        //编辑
        editData(row){
          this.$router.push('/game/dzp/edit/'+row.gameId)
        },
        detailData(row) {
          this.$router.push('/game/dzp/detail/'+row.gameId)
        },
        async delData(row){
          try {
            let res = await delLotteryService({gameId:row.gameId});
            if (res.errorCode === 0) {
              this.$tips({type: 'success',message: '删除成功!'});
              this.loadLotteryList();
            } else {
              this.$tips({type: 'error',message: res.message || '删除失败!'});
            }
          } catch (err) {
            this.$tips({type: 'error',message: '删除失败!'});
          }
        },
        recordData(row) {
          this.$router.push('/game/dzp/record/'+row.gameId)
        }
    }
}
</script>
