<template>
  <div>
    <div class="bg-white rounded-lg font-light w-96 shadow p-4">
      <div class="text-center text-lg mb-4">后臺管理系統</div>
      <form @submit.prevent="(e) => {}">
        <label for="username" class="sr-only">username</label>
        <div class="relative mb-4">
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <el-icon :size="24" color="#cccccc"><User /></el-icon>
          </div>
          <input
            id="username"
            type="text"
            class="block border w-full rounded-lg border-gray-300 h-12 pl-10 focus:ring-1"
            v-model="form.username"
          />
          <div class="abosulate"></div>
        </div>
        <label for="password" class="sr-only">password</label>
        <div class="relative mb-4">
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <el-icon :size="24" color="#cccccc"><Lock /></el-icon>
          </div>
          <input
            id="password"
            type="text"
            class="block border w-full rounded-lg border-gray-300 h-12 pl-10 focus:ring-1"
            v-model="form.password"
          />
          <div class="abosulate"></div>
        </div>
        <div class="text-right text-gray-500 my-4">忘記賬號/密碼?</div>
        <button
          class="block w-full bg-blue-500 text-white h-12 text-center rounded-lg hover:bg-blue-800"
          @click="submit"
        >
          登錄
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import joi from 'joi';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleLogin() {
      this.$router.push('/dashboard');
    },
    submit() {
      const schema = joi.object({
        username: joi.string().min(3).max(200).required().label('用戶名').messages({
          'string.empty': '用戶名是必填字段。',
          'string.min': '用戶名必須至少包含 3 個字符。',
          'string.max': '用戶名不能超過 200 個字符。',
        }),
        password: joi.string().min(3).max(200).required().label('密碼').messages({
          'string.empty': '密碼是必填字段。',
          'string.min': '密碼必須至少包含 3 個字符。',
          'string.max': '密碼不能超過 200 個字符。',
        }),
      });
      const { error } = schema.validate(this.form, { abortEarly: false });
      if (error) {
        for (let i = 0; i < error.details.length; i++) {
          ElMessage.warning(error.details[i].message);
        }
      } else {
        this.handleLogin();
      }
    },
  },
  unmounted() {},
};
</script>

<style scoped></style>