<template>
  <section class="dm-wrap">
    <div class="pb22 clearfix">
      <el-select class="dm-select" v-model="listParams.gameStatus" placeholder="选择游戏状态" @change="LoadKlflList">
          <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="LoadKlflList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button class="fr" type="primary"  @click="$router.push('/game/klfl/add')">新建游戏</el-button>
      <el-button class="fr mr10" type="primary"  @click="downLoadQr">下载二维码 <i class="iconfont icon-icon_yunxiazai fz14"></i></el-button>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" fixed="left"></el-table-column>
      <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.sendStatus!==0" @click="$router.push('/game/klfl/record/'+scope.row.gameActivityId)">记录</el-button>
            <el-button type="text" @click="$router.push('/game/klfl/edit/'+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>
  </section>
</template>
<script>
import {formateDateTimeByType} from '@/utils/index.js'
import {LoadKlflList,deleteGame,createQrCode,downloadQrCode} from '@/service/api/gameApi.js';
export default {
    name: 'sms-lib',
    data () {
      return {
        loading:false,
        gameStatusOptions:[{value:-1,label:'所有'},{value:1,label:'待开始'} ,{value:2,label:'进行中'} ,{value:3,label:'已结束'}],
        listParams:{
            gameStatus:-1,
            searchParam:'',
            currentPage:1,
            pageSize:20
        },
        total:0,
        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:[],
        multipleSelection:[]
      }
    },
    created() {
      this.LoadKlflList();
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'口令福利',path:'/game/klfl'}])
    },
    methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.listParams.pageSize = val;
            this.LoadKlflList();
        },
        handleCurrentChange(val) {
            this.listParams.currentPage = val;
            this.LoadKlflList();
        },
        async LoadKlflList() {
          this.loading = true;
          try {
            let res = await LoadKlflList(this.listParams);
            console.log(res)
            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){
          let res = await deleteGame({gameActivityId});
          this.$tips({type: 'success',message: '删除成功!'});
          this.LoadKlflList();
        },
        //下载二维码
        async downLoadQr(){
          if (this.multipleSelection.length === 0) {
            this.$tips({type:'warning',message:'请先勾选游戏'});
            return;
          }
          const params = {
            urlInfos:JSON.stringify(this.multipleSelection.map(v => {return {gameName:v.gameName,gameUrl:v.gameUrl || 'null'}}))
          }
          try {
            let resCreate = await createQrCode(params);
            window.location = downloadQrCode+'?zipName='+resCreate.result+'&requestProject=gic-web';
          } catch (err){
            this.$tips({type:'error',message:'下载二维码失败'});
          }
        }
    }
}
</script>

