<template>
  <div id="app">
    <div class="game-wrap">
      <game-nav></game-nav>
      <game-main></game-main>
      <game-table></game-table>
      <mod-footer></mod-footer>
    </div>
  </div>
</template>

<script>
import gameNav from '@/components/nav/gameNav'
import modFooter from '@/components/footer/modFooter'
import gameMain from '@/components/game/gameMain'
import gameTable from '@/components/table/tab'

import ScatterJS from 'scatter-js/dist/scatter.esm'
import Eos from 'eosjs'
import { showError } from './util/util.js'
import { mapActions } from 'vuex'

export default {
  name: 'App',
  components: {
    gameNav,
    modFooter,
    gameMain,
    gameTable
  },
  methods: {
    ...mapActions([
      'setScatter',
      'setAccount',
      'doScatterLogin'
    ])
  },
  async created () {
    // 连接scatter
    const connectionOptions = { initTimeout: 20000 }
    ScatterJS.scatter.connect('EOSGET_K3', connectionOptions).then(connected => {
      if (connected) {
        // 设置scatter
        this.setScatter(ScatterJS.scatter)

        window.__MeeChat.setScatterJS(ScatterJS)
        window.__MeeChat.setEos(Eos)

        // 清空全局scatter引用
        window.ScatterJS = null

        // 调起scatter授权登录
        this.doScatterLogin()
      } else {
        // 用户scatter未解锁
        showError(this.$t('installScatter'), 'Scatter')

        this.setAccount('NO_LOGINING')
      }
    })
  },
  mounted () {
    document.title = this.$t('pageTitle')
  }
}
</script>

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