<template>
  <div class="rank-table" :class="{'td-underline': !isMoblie}">
    <div class="table-nav">
      <button :class="{'active': curTab == 1}" @click="curTab = 1">{{$t('table.allBet')}}</button>
      <button
        v-if="account.name"
        :class="{'active': curTab == 2}"
        @click="curTab = 2"
      >{{$t('table.myBet')}}</button>
      <button :class="{'active': curTab == 3}" @click="curTab = 3">{{$t('table.hugeWin')}}</button>
    </div>
    <div class="game-table-bg">
      <div v-show="curTab == 1">
        <table :class="{'en-lang': $i18n.locale == 'en'}">
          <thead>
            <th>{{$t('table.col1')}}</th>
            <th>{{$t('table.col2')}}</th>
            <th>{{$t('table.col3')}}</th>
            <th>{{$t('table.col4')}}</th>
            <th>{{$t('table.col5')}}</th>
          </thead>
          <tbody v-if="allBetList.length">
            <tr v-for="(item, key) in allBetList" :key="key">
              <td>
                <a
                  class="link"
                  @click.prevent="$showValidate(item)"
                >{{item.game_id}}</a>
              </td>
              <td>
                <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>
                <span class="player-name">
                  <a
                    class="link"
                    :href="`https://eospark.com/MainNet/account/${item.player}`"
                    target="_blank"
                  >{{item.player}}</a>
                </span>
              </td>
              <td>
                <a
                  class="link"
                  target="_blank"
                  :href="`https://eospark.com/tx/${item.transfer_trx_id}`"
                >
                  <i class="money-icon"></i>
                  <span class="type">{{(item.offerall_int / 10000).toFixed(4)}}</span>
                </a>
              </td>
              <td>
                <template v-if="item.win_int > 0">
                  <template v-if="item.result_trx_id">
                    <a
                      target="_blank"
                      class="link win-amount"
                      :href="`https://eospark.com/tx/${item.result_trx_id}`"
                    >
                      <i class="money-icon"></i>
                      <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                    </a>
                  </template>
                  <template v-else>
                    <i class="money-icon"></i>
                    <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                  </template>
                  <!-- <span class="money-tate">【{{$t(`table.moneyState[${item.state}]`)}}】</span> -->
                </template>
              </td>
              <td>
                <a target="_blank" class="link" @click.prevent="$showValidate(item)">
                  <span class="result">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
                  <span class="result" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
                  <span class="result" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="moblie-list">
          <div class="list-item" v-for="(item, index) in allBetList" :key="index" @click.prevent="$showValidate(item)">
            <div class="top">
              <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>
              {{item.player}}
              <span class="amount">
                {{$t('table.col3')}}：
                <i class="game-eos-icon"></i>
                {{(item.offerall_int / 10000)}} ({{item.offertype.map(type=>$t(`table.winState[${type}]`)).join(',')}})
              </span>
            </div>
            <div class="content">
              <span class="type">{{$t('table.result')}}：</span>
              <span class="type">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
              <span class="type" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
              <span class="type" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>

              <div class="right" v-if="item.win_int > 0">
                {{$t('table.col4')}}：
                <i class="game-eos-icon"></i>
                <em>{{(item.win_int / 10000)}}</em>
                <!-- <span
                  class="money-tate"
                  v-if="item.win_int > 0"
                >【{{$t(`table.moneyState[${item.state}]`)}}】</span>-->
              </div>
            </div>
            <div class="bottom">
              <div class="time">{{item.game_id}}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="curTab == 2">
        <table :class="{'en-lang': $i18n.locale == 'en'}">
          <thead>
            <th>{{$t('table.col1')}}</th>
            <th>{{$t('table.col8')}}</th>
            <th>{{$t('table.col3')}}</th>
            <th>{{$t('table.col4')}}</th>
            <th>{{$t('table.col5')}}</th>
          </thead>
          <tbody v-if="myBetList.length">
            <tr v-for="(item, key) in myBetList" :key="key">
              <td>
                <a
                  class="link"
                  @click.prevent="$showValidate(item)"
                >{{item.game_id}}</a>
              </td>
              <td>
                <span
                  class="offer-result"
                  v-for="(type,typeKey) in item.offertype"
                  :key="typeKey"
                >{{$t(`table.winState[${type}]`)}}</span>
              </td>
              <td>
                <a
                  class="link"
                  target="_blank"
                  :href="`https://eospark.com/tx/${item.transfer_trx_id}`"
                >
                  <i class="money-icon"></i>
                  <span class="type">{{(item.offerall_int / 10000).toFixed(4)}}</span>
                </a>
              </td>
              <td>
                <template v-if="item.win_int > 0">
                  <template v-if="item.result_trx_id">
                    <a
                      target="_blank"
                      class="link win-amount"
                      :href="`https://eospark.com/tx/${item.result_trx_id}`"
                    >
                      <i class="money-icon"></i>
                      <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                    </a>
                  </template>
                  <template v-else>
                    <i class="money-icon"></i>
                    <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                  </template>
                  <!-- <span class="money-tate">【{{$t(`table.moneyState[${item.state}]`)}}】</span> -->
                </template>
              </td>
              <td>
                <span class="result">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
                <span class="result" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
                <span class="result" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="moblie-list">
          <div class="list-item" v-for="(item, index) in myBetList" :key="index" @click.prevent="$showValidate(item)">
            <div class="top">
              {{item.game_id}}
              <span class="amount">
                {{$t('table.col3')}}：
                <i class="game-eos-icon"></i>
                {{(item.offerall_int / 10000)}} ({{item.offertype.map(type=>$t(`table.winState[${type}]`)).join(',')}})
              </span>
            </div>
            <div class="content">
              <span class="type">{{$t('table.result')}}：</span>
              <span class="type">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
              <span class="type" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
              <span class="type" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>

              <div class="right" v-if="item.win_int > 0">
                {{$t('table.col4')}}：
                <i class="game-eos-icon"></i>
                <em>{{(item.win_int / 10000)}}</em>
                <!-- <span
                  class="money-tate"
                  v-if="item.win_int > 0"
                >【{{$t(`table.moneyState[${item.state}]`)}}】</span>-->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-show="curTab == 3">
        <table :class="{'en-lang': $i18n.locale == 'en'}">
          <thead>
            <th>{{$t('table.col1')}}</th>
            <th>{{$t('table.col2')}}</th>
            <th>{{$t('table.col5')}}</th>
            <th>{{$t('table.col3')}}</th>
            <th>{{$t('table.col4')}}</th>
          </thead>
          <tbody v-if="hugeWinList.length">
            <tr v-for="(item, key) in hugeWinList" :key="key">
              <td>
                <a
                  class="link"
                  @click.prevent="$showValidate(item)"
                >{{item.game_id}}</a>
              </td>
              <td>
                <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>
                <span class="player-name">
                  <a
                    class="link"
                    :href="`https://eospark.com/MainNet/account/${item.player}`"
                    target="_blank"
                  >{{item.player}}</a>
                </span>
              </td>
              <td>
                <span class="result">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
                <span class="result" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
                <span class="result" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>
              </td>
              <td>
                <template v-if="item.win_int > 0">
                  <a
                    class="link"
                    target="_blank"
                    :href="`https://eospark.com/tx/${item.transfer_trx_id}`"
                  >
                    <i class="money-icon"></i>
                    <span class="type">{{(item.offerall_int / 10000).toFixed(4)}}</span>
                  </a>
                </template>
              </td>
              <td>
                <template v-if="item.result_trx_id">
                  <a
                    target="_blank"
                    class="link win-amount"
                    :href="`https://eospark.com/tx/${item.result_trx_id}`"
                  >
                    <i class="money-icon"></i>
                    <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                  </a>
                </template>
                <template v-else>
                  <i class="money-icon"></i>
                  <span class="money">{{(item.win_int / 10000).toFixed(4)}}</span>
                </template>
                <!-- <span class="money-tate">【{{$t(`table.moneyState[${item.state}]`)}}】</span> -->
              </td>
            </tr>
          </tbody>
        </table>
        <div class="moblie-list">
          <div class="list-item" v-for="(item, index) in hugeWinList" :key="index" @click.prevent="$showValidate(item)">
            <div class="top">
              <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>
              {{item.player}}
              <span class="amount">
                {{$t('table.col3')}}：
                <i class="game-eos-icon"></i>
                {{(item.offerall_int / 10000)}} ({{item.offertype.map(type=>$t(`table.winState[${type}]`)).join(',')}})
              </span>
            </div>
            <div class="content">
              <span class="type">{{$t('table.result')}}：</span>
              <span class="type">{{$t(`table.winState[${item.reveal_info.win}]`)}}</span>
              <span class="type" v-if="item.reveal_info.playerPair">{{$t('table.playerPair')}}</span>
              <span class="type" v-if="item.reveal_info.bankerPair">{{$t('table.bankerPair')}}</span>

              <div class="right" v-if="item.win_int > 0">
                {{$t('table.col4')}}：
                <i class="game-eos-icon"></i>
                <em>{{(item.win_int / 10000)}}</em>
                <!-- <span
                  class="money-tate"
                  v-if="item.win_int > 0"
                >【{{$t(`table.moneyState[${item.state}]`)}}】</span>-->
              </div>
            </div>
            <div class="bottom">
              <div class="time">{{item.game_id}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="load-more" v-show="isLoadMore">{{$t('loading')}}</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { debounce } from "throttle-debounce";
import API from "@/api";

export default {
  name: "gameTable",
  data() {
    return {
      list: [],
      curTab: 1,
      allBetList: [],
      myBetList: [],
      hugeWinList: [],
      allBetNext: null,
      myBetNext: null,
      bigPrizeTot: null,
      isLoadMore: false,
      canLoadMore: [true, true, true],
      gameid: ""
    };
  },
  computed: {
    update() {
      return this.$store.state.update;
    },
    account() {
      return this.$store.state.account;
    },
    isMoblie() {
      return this.$store.state.isMoblie;
    }
  },
  watch: {
    update() {
      setTimeout(() => {
        this.getNewAllBets();
        if (this.curTab == 2) {
          this.getNewMyOffers();
        }
      }, 1000);
    },
    account(to) {
      if (!to.name && this.curTab == 2) {
        this.curTab = 1;
      }
    },
    curTab(val) {
      if (val == 2) {
        this.myBetNext = null;
        Vue.set(this.canLoadMore, "1", true);
        this.getMyOffers();
      }
    }
  },
  methods: {
    // 所有投注
    getAllBets() {
      if (!this.canLoadMore[0]) return;
      return API.table
        .getAllBets({
          next: this.allBetNext
        })
        .then(({ data }) => {
          if (data.code === 0) {
            let length = data.data.list.length;
            length && (this.allBetNext = data.data.list[length - 1].id);
            this.allBetList.push(...this.formatAllData(data.data.list));
            this.canLoadMore[0] = data.data.more;
          }
        });
    },
    //更新所有下注
    getNewAllBets() {
      return API.table.getAllBets().then(({ data }) => {
        if (data.code === 0) {
          let list = this.getRemovalData(this.allBetList, data.data.list);
          this.allBetList.unshift(...this.formatAllData(list));
        }
      });
    },
    // 我的下注
    getMyOffers() {
      if (!this.canLoadMore[1]) return;
      return API.table
        .getMyOffers({
          player: this.account.name,
          next: this.myBetNext
        })
        .then(({ data }) => {
          if (data.code === 0) {
            if (this.myBetNext == null) {
              this.myBetList = [];
            }
            let length = data.data.list.length;
            length && (this.myBetNext = data.data.list[length - 1].id);
            this.myBetList.push(...this.formMyData(data.data.list));
            this.canLoadMore[1] = data.data.more;
          }
        });
    },
    //更新所有下注
    getNewMyOffers() {
      return API.table
        .getMyOffers({
          player: this.account.name
        })
        .then(({ data }) => {
          if (data.code === 0) {
            let list = this.getRemovalData(this.myBetList, data.data.list);
            this.myBetList.unshift(...this.formMyData(list));
          }
        });
    },
    // 巨额奖金
    getBigPrize() {
      if (!this.canLoadMore[2]) return;
      return API.table
        .getBigPrize({
          page: this.bigPrizeTot
        })
        .then(({ data }) => {
          this.bigPrizeTot++;
          if (data.code === 0) {
            this.hugeWinList.push(...this.formatAllData(data.data.list));
            this.canLoadMore[2] = data.data.more;
          }
        });
    },
    formMyData(list) {
      let tempList = list
        .map(item => {
          if (item.game_info.reveal_info) {
            let offertype = item.offertype.split("|");
            return {
              game_id: item.game_id,
              reveal_info: item.game_info.reveal_info,
              offerall_int: item.offerall_int,
              win_int: item.win_int,
              state: item.state,
              game_state: item.game_info.game_state,
              offertype: offertype,
              transfer_trx_id: item.transfer_trx_id,
              result_trx_id: item.result_trx_id
            };
          } else {
            return undefined;
          }
        })
        .filter(item => item);
      return tempList;
    },
    formatAllData(list) {
      let tempList = list
        .map(item => {
          if (item.game_info.reveal_info) {
            let offertype = item.offertype.split("|");
            return {
              game_id: item.game_id,
              reveal_info: item.game_info.reveal_info,
              player: item.player,
              offerall_int: item.offerall_int,
              win_int: item.win_int,
              state: item.state,
              vip_level: item.vip_level,
              game_state: item.game_info.game_state,
              offertype: offertype,
              transfer_trx_id: item.transfer_trx_id,
              result_trx_id: item.result_trx_id
            };
          } else {
            return undefined;
          }
        })
        .filter(item => item);

      return tempList;
    },
    async loadMore() {
      this.isLoadMore = true;
      if (this.curTab == 1) {
        await this.getAllBets();
      } else if (this.curTab == 2) {
        await this.getMyOffers();
      } else if (this.curTab == 3) {
        await this.getBigPrize();
      }
      this.isLoadMore = false;
    },
    handleScroll() {
      let beforeScrollTop = document.documentElement.scrollTop;
      this.scrollFun = debounce(100, () => {
        var afterScrollTop = document.documentElement.scrollTop;
        if (afterScrollTop - beforeScrollTop > 0) {
          var wScrollY = window.scrollY;
          var wInnerH = window.innerHeight;
          var bScrollH = document.body.scrollHeight;
          if (wScrollY + wInnerH + 500 >= bScrollH) {
            if (!this.isLoadMore) {
              this.loadMore();
            }
          }
        }
        beforeScrollTop = afterScrollTop;
      });
      return this.scrollFun;
    },
    getRemovalData(target, newData) {
      if (target.length === 0) {
        return newData;
      } else {
        let index = newData.findIndex(item => item.id === target[0].id);
        if (index !== null) {
          return newData.slice(0, index);
        } else {
          return newData;
        }
      }
    }
  },
  mounted() {
    // 滚动加载
    window.addEventListener("scroll", this.handleScroll());
    // this.$showValidate()
  },
  async created() {
    await this.getAllBets();
    if (this.account.name) {
      await this.getMyOffers();
    }
    await this.getBigPrize();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollFun);
  }
};
</script>

<style lang="scss">
@import "./style.scss";
</style>
