<template>
  <el-container>
    <el-header>
      <lang/>
    </el-header>
    <el-main>
      <el-row type="flex" justify="center">
        <div class="container">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label="$t('account.login')" name="login">
              <login :on-login="onLogin"/>
            </el-tab-pane>
            <el-tab-pane :label="$t('account.register')" name="register">
              <register :on-register="onRegister"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts">
  import Login from '~/components/account/login.vue'
  import Register from '~/components/account/register.vue'
  import Lang from '~/components/lang.vue'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: { Lang, Register, Login },
    data() {
      return {
        activeName: 'login'
      };
    },
    methods: {
      onLogin(user:string,password:string){
        console.info(user,password)
        let that=this
        let c:string=this.$t('account.form.valid_account').toString()
        this.$message({message:c,duration:1000,onClose:function(){
            that.$cookies.set(that.GLOBAL.user_key,user)
            that.$router.push(that.localePath('/document'))
          }})
      },
      onRegister(user:string,password:string){
        console.info(user,password)
      }
    }
  })
</script>
<style>
  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>
