<script setup>
import useStore from '@/stores'

const { user } = useStore()
const router = useRouter()

// 绑定el-form的ref属性
const loginFormRef = ref(null)
const loginData = reactive({
  username: '',
  password: ''
})
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

// 登录
const handleLogin = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      api.login.login
        .post(loginData)
        .then((res) => {
          if (res.code === 200) {
            router.push({ path: '/home' })
          }
        })
        .finally(() => {
          user.onLogin({ tokenValue: '123', tokenName: '123' })
          router.push({ path: '/home' })
        })
    } else {
      return false
    }
  })
}
</script>

<template>
  <div id="login">
    <el-card class="login_elCard">
      <el-form
        :model="loginData"
        :rules="loginRules"
        label-width="auto"
        ref="loginFormRef"
        @keyup.enter="handleLogin"
        class="login_form"
      >
        <el-form-item label="手机号码" prop="username">
          <el-input
            v-model="loginData.username"
            placeholder="请输入手机号码"
            type="text"
            maxlength="11"
            class="login_form__input"
          />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            v-model="loginData.password"
            placeholder="请输入登录密码"
            type="password"
            maxlength="16"
            minlength="8"
            show-password
            class="login_form__input"
          />
        </el-form-item>
      </el-form>
      <div class="login_submit_btn">
        <el-button @click="handleLogin" type="primary">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/login_bg1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  .login_tips {
    position: absolute;
    top: 20%;
    left: 20%;
    h3,
    p {
      color: #5d5d5e;
    }
  }
  .login_elCard {
    // width: 420px;
    // height: 430px;
    // background-color: #ecf5ff;
    border-radius: 10px;
    text-align: center;
    padding: 10px 20px;
    position: absolute;
    top: 20%;
    right: 10%;
  }
  .login_form {
    &__input {
      ::v-deep(.el-input__inner) {
        height: 40px;
        line-height: 40px;
        font-size: 13px;
      }
    }
    &__img-code {
      .el-input__wrapper {
        padding-right: 1px;
      }
      ::v-deep(.el-input-group__append) {
        padding: 0 !important;
      }
    }
    &__input-img {
      height: 40px;
      cursor: pointer;
    }
    .el-input-group__append {
      cursor: pointer;
    }
    ::v-deep(.el-form-item__label) {
      height: 40px !important;
      line-height: 40px !important;
    }
  }
  .login_submit_btn {
    margin: 30px 0 0;
    .el-button {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
