<template>
  <div>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="username"
          placeholder="请输入邮箱"
          label="邮箱"
          :rules="[() => username != null || '请输入邮箱']"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="password"
          placeholder="请输入密码"
          label="密码"
          clearable
          :rules="[() => password != null || '密码不能为空']"
          type="password"
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="5">
        <img :src="captchaUrl" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
      </v-col>
      <v-col cols="5">
        <v-text-field
          v-model="captcha"
          placeholder="验证码"
          label="验证码"
          :rules="[() => captcha != null || '验证码不能为空']"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="3">
        <v-switch v-model="rememberMe" label="记住我" />
      </v-col>
      <v-col cols="7" />
    </v-row>
    <v-row justify="center">
      <v-btn color="primary" @click="submitLogin">登录</v-btn>
    </v-row>
  </div>
</template>

<script>
import { randomString, getCaptchaUrl } from '@/utils'
import { getPubkey } from '@/api/user/auth'
import { JSEncrypt } from 'jsencrypt'

export default {
  name: 'LoginFrom',
  data() {
    return {
      captchaUrl: '',
      captchaBase64: '',
      r: '',
      username: '',
      password: '',
      captcha: '',
      rememberMe: false,
      pubkey: '',
      pubkeyR: ''
    }
  },
  created() {
    this.getCaptcha()
    this.fetchPubkey()
  },
  methods: {
    encryptPassword(password, pubkey, pubkeyR) {
      var encryptor = new JSEncrypt()
      encryptor.setPublicKey(pubkey)
      return encryptor.encrypt(pubkeyR + password)
    },
    submitLogin() {
      const accountType = 1
      const loginType = 1
      const username = this.username
      const password = this.$options.methods.encryptPassword(this.password, this.pubkey, this.pubkeyR)
      // const password = this.password
      const captchaCode = this.captcha
      const r = this.r
      const rememberMe = this.rememberMe
      const user = {
        accountType,
        loginType,
        username,
        password,
        captchaCode,
        r,
        rememberMe
      }
      if (username === '') {
        alert('username 字段不符合要求')
        return
      }
      if (password === '' || password === null) {
        alert('password 字段不符合要求')
        return
      }
      if (captchaCode === '') {
        alert('captcha 字段不符合要求')
        return
      }
      // 将数据返回给父组件
      this.$emit('login', user)
    },
    getCaptcha() {
      this.r = randomString(10)
      // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
      this.captchaUrl = getCaptchaUrl(this.r)
    },
    fetchPubkey() {
      getPubkey().then(res => {
        if (res.code === 0) {
          this.pubkey = res.data.pubkey
          this.pubkeyR = res.data.r
        } else {
          console.log(res.data)
          alert(res.data)
        }
      }).catch(error => {
        console.error(error.message)
      })
    }
  }
}
</script>

<style>
</style>
