<template>
  <div class="container">
    <Nuxt v-if="!$slots.default" />
    <slot />
  </div>
</template>
<script>
import Bus from '@/utils/Bus'
import { mapActions } from 'vuex'
import loginAction from '@/plugins/UserAction/login'
export default {
  data() {
    return {
      loginInstance: null,
    }
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
    this.initLoginCenter()
    Bus.$on('showLogin', this.toggleLogin)
  },
  destroyed() {
    Bus.$off('showLogin')
  },
  methods: {
    ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
    handleVisibilityChange() {
      const { uin = 0 } = this.$route.query
      if (document.hidden) {
        return 0
      } else {
        // page has focus, begin running task
        this.$store.dispatch('users/getUerInfo', { uin })
      }
    },
    // 云平台登录模块初始化
    initLoginCenter() {
      if (!window.LoginCenter) return
      // eslint-disable-next-line no-undef
      this.loginInstance = LoginCenter({
        target: document.body,
        props: {
          uin: this.$route.query.uin,
          zIndex: 100000,
          backUrl: encodeURIComponent(window.location.href),
          serviceAgreement: `//${process.env.OSS_DOMAIN}/staticPages/agreement_user.html`,
          privacyAgreement: `//${process.env.OSS_DOMAIN}/staticPages/agreement_privacy.html`,
          successCallback: ({ type, response }) => {
            if (type === 'recover'){
              this.$toast("密码修改成功!");
              setTimeout(() => {
                this.loginInstance.hide()
              }, 500);
              return
            }
            this.$toast("登录成功!");
            if (type === 'phone'){
              this.loginInstance.hide()
            }
            if (type === 'password'){
              this.loginInstance.hide()
            }
            const query = this.$route.query
            const onFinished = () => {
              delete query.token
              if (type === 'weixinPc' && 'code' in query){
                delete query.code
                this.$router.replace({
                  path: this.$route.path,
                  query
                })
              }
              if (type === 'alipay' && 'auth_code' in query){
                delete query.auth_code
                this.$router.replace({
                  path: this.$route.path,
                  query
                })
              }
            }
            // const loginAction = require("@/plugins/UserAction/login").default;
            loginAction.call(this, { token: response.data, onFinished })
          },
          failCallback: ({ response }) => {
            this.$toast(response.errorMessage)
          },
        },
        onMount: () => {
          console.log('已挂载')
        },
      })
    },
    // 登录判断
    toggleLogin() {
      if (!this.loginInstance) {
        this.$toast('登录模块加载失败，3秒后为您跳转到登录页')
        setTimeout(() => {
          this.jumpToLogin()
        }, 3000)
        return
      }
      this.loginInstance.show()
    }
  },
}
</script>
<style lang="less" scoped>
.container {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}
</style>
