<template>
  <div class="text-center width-100vw">
    <img src="/loginBackground.png" class="login-background">
    <div class="login-box page-center" style="width: 360px;height: 360px;">
      <el-card class="box-card width-100p margin-right-l">
        <div class="title-l text-center">
          账号登录
        </div>
        <el-form ref="form" :model="form" label-position="left">
          <el-form-item label="账号">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item class="text-center">
            <el-button type="primary" @click="login">立即登录</el-button>
            <el-button @click="registered">立即注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  navigate: {
    hide   : true,
    notShow: true,
  },
  //组件
  components: {},
  props     : [],
  //数据
  data() {
    return {
      type: 'accountPassword',
      form: {
        account : '',
        password: '',
      },
    }
  },
  //计算属性
  computed: {},
  //在实例创建完成后被立即调用
  created() {
  },
  //实例被挂载后调用
  mounted() {
  },
  //methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
  methods: {
    async login() {
      const res = await this.$api.post('/permission/api/login', {
        type: this.type,
        data: this.form,
      })
      console.log('res',res);
    },
    async registered() {
      const res = await this.$api.post('/permission/api/registered', {
        type: this.type,
        data: this.form,
      })
      console.log('res',res);
    }
  },
  //包含 Vue 实例可用过滤器的哈希表。
  filters: {},
  //侦听器
  watch: {},
}
</script>

<style scoped lang="less">
.login-background {
  width: 100vh;
  height: 100vh;
}

.login-box {
}
</style>
