<template>
  <div>
    <el-input style="width:180px;" v-model="query.searchParam" prefix-icon="el-icon-search" placeholder="请输入游戏名称" @change="onSearch" clearable></el-input>
    <el-table style="margin-top:20px" :data="list" @row-click="onRowClick">
      <el-table-column width="50px">
        <template slot-scope="scope">
          <el-radio :value="seletedId" :label="scope.row.gameId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="游戏名称" prop="gameName"></el-table-column>
      <el-table-column show-overflow-tooltip label="游戏ID" prop="gameId"></el-table-column>
      <el-table-column label="游戏状态">
        <template slot-scope="scope">
          <template v-if="'gameStatusName' in scope.row">
            <div v-if="scope.row.gameStatusName === '进行中'"><span class="dm-status--primary--flash"></span>{{ scope.row.gameStatusName }}</div>
            <div v-else :class="scope.row.gameStatusName === '未开始' ? 'dm-status--warning' : 'dm-status--info'">{{ scope.row.gameStatusName }}</div>
          </template>
          <template v-else-if="'activityStatus' in scope.row">
            <div v-if="scope.row.activityStatus === 1"><span class="dm-status--primary--flash"></span>进行中</div>
            <div v-else :class="scope.row.activityStatus === 0 ? 'dm-status--warning' : 'dm-status--info'">
              {{ scope.row.activityStatus === 0 ? '未开始' : '已结束' }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="开始时间">
        <template slot-scope="scope">
          <p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameStartTime, 'yyyy-MM-dd') }}</p>
          <p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameStartTime, 'HH:mm:ss') }}</p>
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template slot-scope="scope">
          <p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameEndTime, 'yyyy-MM-dd') }}</p>
          <p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameEndTime, 'HH:mm:ss') }}</p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:10px;text-align:right" small layout="prev, pager, next" :current-page="query.currentPage" :page-size="query.pageSize" :total="total" @current-change="onPageChange"> </el-pagination>
  </div>
</template>

<script>
import qs from 'qs';
import { formatDateTimeByType } from '@/utils/index.js';

export default {
  name: 'GamelinkList',
  props: {
    gameType: {
      required: true,
      type: String
    },
    gameId: {
      type: String
    }
  },
  data() {
    return {
      formatDateTimeByType,
      list: [],
      query: {
        requestProject: 'gic-web',
        searchParam: '',
        currentPage: 1,
        pageSize: 8,
        gameStatus: 4
      },
      seletedItem: null,
      seletedId: '',
      total: 0
    };
  },
  created() {
    this.seletedId = this.gameId || '';
  },
  methods: {
    onPageChange(val) {
      this.query.currentPage = val;
      this.getList(this.gameType);
      this.seletedItem = null;
      this.seletedId = '';
    },
    onRowClick(row) {
      this.seletedItem = row;
      this.seletedId = row.gameId;
    },
    onSearch() {
      this.query.currentPage = 1;
      this.seletedItem = null;
      this.seletedId = '';
      this.getList(this.gameType);
    },
    getList(gameType) {
      const setResponse = (res, type) => {
        //type 0 大转盘/刮刮卡 ----- 1 其他游戏
        const { errorCode, message, result } = res.data || {};
        if (errorCode != 0) {
          return this.$message.error(message);
        } else {
          if (type === 0) {
            this.list = result.page.result || [];
            this.total = result.page.totalCount || 0;
          } else {
            this.list = (result.result || []).map(item => ({ ...item, gameId: item.gameActivityId }));
            this.total = result.totalCount || 0;
          }
        }
      };
      switch (gameType) {
        case 'GAME_LINK_DZP':
          this.axios.post(`/api-marketing/page-lottery-game`, qs.stringify({ ...this.query, gameType: 1 })).then(res => {
            setResponse(res, 0);
          });
          break;
        case 'GAME_LINK_GGK':
          this.axios.post(`/api-marketing/page-lottery-game`, qs.stringify({ ...this.query, gameType: 2 })).then(res => {
            setResponse(res, 0);
          });
          break;
        case 'GAME_LINK_PTYX':
          this.axios.post(`/api-marketing/page-puzzle-game`, qs.stringify({ ...this.query })).then(res => {
            setResponse(res, 1);
          });
          break;
        case 'GAME_LINK_ZNM':
          this.axios.post(`/api-marketing/page-znm-game`, qs.stringify({ ...this.query })).then(res => {
            setResponse(res, 1);
          });
          break;
        case 'GAME_LINK_KLFL':
          this.axios.post(`/api-marketing/page-klfl-game`, qs.stringify({ ...this.query })).then(res => {
            setResponse(res, 1);
          });
          break;
      }
    }
  },
  watch: {
    gameType: {
      handler() {
        this.query.currentPage = 1;
        this.query.searchParam = '';
        this.getList(this.gameType);
      },
      immediate: true
    },
    gameId() {
      this.seletedId = this.gameId || '';
    },
    seletedItem(val) {
      this.$emit('select', val);
    }
  }
};
</script>
