<template>
  <img class="wave" src="../../assets/img/wave.png" alt=""/>
  <div class="container">
    <!--左边的背景图-->
    <div class="bg">
      <img src="../../assets/img/bg.svg" alt="">
    </div>
    <div class="login-container">
      <!--引入的卡片区域-->
      <t-card class="login-cart">
        <img class="avatar" src="../../assets/img/avatar.svg" alt="">
        <h2>Vue3-Admin</h2>
        <!--引入的表单区域-->
        <t-form ref="form" class="login-from" :data="loginFrom" :rules="rules" :colon="true" :label-width="0">
          <!--用户区域-->
          <t-form-item name="username">
            <t-input clearable v-model="loginFrom.username" placeholder="请输入账户名">
              <template #prefix-icon>
                <icon name="user"/>
              </template>
            </t-input>
          </t-form-item>
          <!--密码区域-->
          <t-form-item name="password">
            <t-input type="password" clearable placeholder="请输入密码">
              <template #prefix-icon>
                <icon name="lock-on"/>
              </template>
            </t-input>
          </t-form-item>
          <!--登录按钮-->
          <t-form-item>
            <t-button theme="primary" type="submit" block>登录</t-button>
          </t-form-item>
        </t-form>
      </t-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {Icon} from "tdesign-vue-next";
import {reactive} from "vue";
import type { TokenRequest } from "@/api/types"


// 验证规则，内容区域为空的时候提示
const rules = {
  username: [
    {required: true, message: '请输入账号...'},
  ],
  password: [
    {required: true, message: '请输入密码...'},
  ]
}

//创建对象
const loginFrom = reactive<TokenRequest>({
  username: '',
  password: '',
})
</script>

<style lang="less" scoped>
template {
  overflow: hidden;
}
// 左边的背景图的属性
.wave {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
// 总体布局属性
.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 7rem;
  padding: 0 2rem;
  // bg 是左边的图片大小属性
  .bg {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  // img 是左边的图片大小属性
  .bg img {
    width: 500px;
  }
  // login-container 是右边的所有内容的总属性
  .login-container {
    display: flex;
    width: 380px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    }

  .login-cart {
    width: 100%;
    // 网站名称的属性
    h2 {
      font-size: 2.5rem;
      margin: 25px 0;
      color: #333;
    }
    // 头像的属性
    .avatar {
      width: 100px;
    }
    // 输入内容 t-from 的属性
    .login-from {
      width: 100%;
      margin-top: 3.6rem;
      text-align: left;
    }
  }
}
</style>