<template>
  <section class="dm-wrap">
    <div class="pb22 clearfix">
      <el-select class="dm-select" clearable v-model="listParams.gameStatus" placeholder="选择游戏状态" @change="LoadPtyxList">
          <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="LoadPtyxList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button class="fr" type="primary" @click="$router.push('/game/ptyx/add')">新建游戏</el-button>
      <el-button class="fr mr10" type="primary" @click="configShow = true">拼图配置</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"></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" v-if="scope.row.activityStatus !== 0" @click="$router.push('/game/ptyx/record/'+scope.row.gameActivityId)">记录</el-button>
            <el-button type="text" v-if="scope.row.activityStatus === 0" @click="$router.push('/game/ptyx/edit/'+scope.row.gameActivityId)">编辑</el-button>
            <el-button type="text" v-if="scope.row.activityStatus !== 0" @click="$router.push('/game/ptyx/query/'+scope.row.gameActivityId)">详情</el-button>
            <el-button type="text" @click="delData(scope.row)">删除</el-button>
        </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>
    <config :show.sync="configShow"></config>
  </section>
</template>
<script>
import {formateDateTimeByType} from '@/utils/index.js'
import {LoadPtyxList,deleteGame} from '@/service/api/gameApi.js';
import config from './config'
export default {
    name: 'game-ptyx',
    data () {
      return {
        loading:false,
        total:0,
        gameStatusOptions:[{value:-1,label:'所有'},{value:1,label:'待开始'} ,{value:2,label:'进行中'} ,{value:3,label:'已结束'}],
        listParams:{gameStatus:-1,searchParam:'',currentPage:1,pageSize:20},
        tableHeader:[
          {label:'游戏名称',prop:'gameName',width:'120',align:'left',fixed:'left'},
          {label:'游戏状态',prop:'activityStatus',width:'80',align:'left',formatter:function(row){
            return row.activityStatus === 0 ? '待开始':(row.activityStatus === 1 ? '进行中' : '已结束')
          }},
          {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:'cyrs',width:'80',align:'left'},
          {label:'参与次数',prop:'cyrc',width:'80',align:'left'},
          {label:'新增会员',prop:'gzrs',width:'80',align:'left'}],
        tableList:[],
        configShow:false
      }
    },
    components: {
      config
    },
    created() {
      this.LoadPtyxList();
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'拼图游戏',path:'/game/ptyx'}])
    },
    methods: {
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.LoadPtyxList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.LoadPtyxList();
      },
      async LoadPtyxList() {
          this.loading = true;
          try {
            let res = await LoadPtyxList(this.listParams);
            this.tableList = res.result.result || [];
            this.total = res.result.totalCount;
          } catch (err) {
            this.$tips({type: 'warning',message: '加载列表出错'});
          }
          this.loading = false;
      },
      delData(row) {
        this.$confirm('是否删除该游戏?', '提示', {
          confirmButtonText: '确定',
          cancelBUttonText: '取消',
          type: 'warning'
        }).then(() => {
            this.deleteGame(row.gameActivityId);
        }).catch(() => {
            this.$tips({type: 'info',message: '已取消删除'});
        });
      },
      async deleteGame(gameActivityId){
        try {
          let res = await deleteGame({gameActivityId});
          this.$tips({type: 'success',message: '删除成功!'});
          this.LoadPtyxList();
        } catch (err) {
          this.$tips({type: 'warning',message: '删除出错'});
        }
      }
    }
}
</script>

