<template>
  <div class="login_bg">
    <n-form
      ref="formRef"
      :model="loginForm"
      :rules="rules"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
      :style="{
        maxWidth: '640px',
        backgroundColor: '#fff',
        padding: '20px',
        borderRadius: '10px'
      }"
      @keyup.enter="handleLogin"
    >
      <n-form-item label="用户名" path="username">
        <n-input v-model:value="loginForm.username" placeholder="请输入用户名" />
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input v-model:value="loginForm.password" type="password" placeholder="请输入用户名" />
      </n-form-item>
      <n-form-item label="验证码" path="captcha">
        <n-input v-model:value="loginForm.captcha" placeholder="请输入验证码" />
        <img v-if="captcha" :src="captcha" alt="" @click="changeCode">
      </n-form-item>
      <n-form-item path="remember">
        <n-checkbox v-model:checked="loginForm.remember" size="medium" label="记住密码" />
      </n-form-item>
      <n-form-item>
        <n-button @click="handleLogin">登录</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
import { userLogin, userCaptcha } from '@/api/login/index.js'
import { setToken } from '@/utils/token'
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'LoginPage',
  setup() {
    const loginForm = reactive({
      username: '',
      password: '',
      key: '',
      captcha: '',
      remember: false
    })
    onMounted(() => {
      changeCode(loginForm)
    })
    // 获取图形验证码
    const captcha = ref('')
    async function changeCode(form) {
      const params = {
        username: form.username,
        password: form.password,
        captcha: form.captcha
      }
      const captForm = await userCaptcha(params)
      captcha.value = captForm.data.captcha
      loginForm.key = captForm.data.key
    }

    return {
      loginForm,
      captcha,
      changeCode,
      rules: reactive({
        username: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入用户名'
        },
        password: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入密码'
        },
        captcha: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入验证码'
        }
      })
    }
  },
  methods: {
    handleLogin() {
      console.log(this.loginForm)
      userLogin(this.loginForm).then((res) => {
        if (res.code === 0) {
          // 登录成功存储token，跳转首页
          setToken(res.data.access_token)
          this.goPage()
        } else {
          console.log(res)
        }
      })
    },
    // 登录成功跳转
    goPage() {
      // const query = this.$route.query
      // const path = query && query.from ? query.from : '/'
      // console.log(path)
      // this.$router.replace(path)
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
  .login_bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

