<template>
  <div class="login-container">
    <top-color v-show="false"></top-color>
    <div class="login-weaper animated bounceInDown">
      <!-- <div class="login-ad tc">
        <img src="~@/assets/images/login-ad.png" />
      </div> -->
      <!-- <div class="login-title tc">
        <img src="~@/assets/images/login-title.png" />
      </div> -->

      <div class="login-border">
        <div class="login-main">
          <!-- <h4 class="login-title">
            {{ $t("login.title") }}{{ website.title }}
            <top-lang></top-lang>
          </h4> -->
          <userLogin v-if="activeName === 'user'"></userLogin>
          <codeLogin v-else-if="activeName === 'code'"></codeLogin>
          <faceLogin v-else-if="activeName === 'face'"></faceLogin>
          <!-- <thirdLogin></thirdLogin> -->
          <!-- <div class="login-menu">
            <a href="#" @click.stop="activeName = 'user'">{{
              $t("login.userLogin")
            }}</a>
            <a href="#" @click.stop="activeName = 'code'">{{
              $t("login.phoneLogin")
            }}</a>
            <a href="#" @click.stop="activeName = 'face'">{{
              $t("login.faceLogin")
            }}</a>
          </div> -->
        </div>
      </div>
    </div>
    <div class="copy-right">Copyright © 2022 广州欧科信息技术股份有限公司</div>
  </div>
</template>
<script>
import userLogin from './userlogin'
import codeLogin from './codelogin'
import thirdLogin from './thirdlogin'
import faceLogin from './facelogin'
import { validatenull } from '@/util/validate'
import topLang from '@/page/index/top/top-lang'
import topColor from '@/page/index/top/top-color'

export default {
  name: 'login',
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    faceLogin,
    topLang,
    topColor
  },
  data() {
    return {
      time: '',
      activeName: 'user'
    }
  },
  watch: {
    $route() {
      const params = this.$route.query
      this.socialForm.state = params.state
      this.socialForm.code = params.code
      if (!validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: `${this.socialForm.state === 'WX' ? '微信' : 'QQ'}登录中,请稍后。。。`,
          spinner: 'el-icon-loading'
        })
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    }
  },
  created() {
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  mounted() {},
  props: [],
  methods: {
    getTime() {
      this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss')
    }
  }
}
</script>

<style lang="scss">
// @import '@/styles/login.scss';
.copy-right {
  text-align: center;
  padding-top: 100px;
  color: #fff;
  padding-top:50px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0%);
}
</style>
