<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { loginAPI } from "@/api/api.js"
const router = useRouter()
const show = ref(false)
const account = ref('')
const password = ref('')
const isAccount = ref(false)
const isPassword = ref(false)

const submit = () => {

  if (!account.value) {
    isAccount.value = true;
    return
  }
  else isAccount.value = false;
  if (!password.value) {
    isPassword.value = true;

    return
  }
  else isPassword.value = false;


  loginAPI({
    account: account.value,
    password: password.value
  }).then(res => {
    console.log(res);
    // localStorage.setItem("TOKEN", 15455465465465)
    // router.replace('/')
  })
  return


}

</script>


<template>
  <dv-full-screen-container class="body">
    <div class="login-box">
      <div class="form">
        <div class="content" style="padding-top: 2.5rem">
          <div class="line-box">
            <input
              class="ipt"
              type="text"
              placeholder="请输入账号"
              v-model="account"
            />
            <div class="line">
              <img
                src="/src/assets/login_img/ZH.png"
                alt=""
                class="accont-icon"
              />
            </div>
          </div>
          <div class="tips">
            <span v-show="isAccount">请输入账号</span>
          </div>
          <div class="line-box">
            <input
              class="ipt"
              placeholder="请输入密码"
              :type="show ? 'text' : 'password'"
              v-model="password"
            />
            <div class="line">
              <img
                src="/src/assets/login_img/MM.png"
                alt=""
                class="accont-icon"
                style=""
              />
              <img
                src="/src/assets/login_img/KJ.png"
                v-if="show"
                alt=""
                @click="show = false"
                class="accont-icon"
              />
              <img
                src="/src/assets/login_img/BKH.png"
                v-else
                @click="show = true"
                class="accont-icon"
              />
            </div>
          </div>
          <div class="tips">
            <span v-show="isPassword">请输入密码</span>
          </div>
          <button class="btn" @click="submit">登录</button>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.body {
  background-image: url("/src/assets/img/bg.png");
  background-size: 100% 100%;
  color: #fff;
  background-color: rgba($color: #000000, $alpha: 0.8);
}
.login-box {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/login_img/bg.png);
  background-size: 100% 100%;
  overflow: hidden;
}

.form {
  width: 30%;
  height: 45%;
  position: absolute;
  top: 25%;
  right: 10%;
  box-sizing: border-box;
  background: url(../../assets/login_img/DLBG.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 60%;
    height: 60%;
    .ipt {
      border: 1px solid #194fa3;
      background-color: #123266;
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 2.5rem;
      outline: none;
      -webkit-user-select: auto;
      caret-color: #fff;
      color: white;
    }
    .line-box {
      position: relative;
      width: 100%;
      margin-top: 1rem;
      .line {
        width: 100%;
        height: 100%;
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 0.5rem;
        box-sizing: border-box;
        align-items: center;
      }
      input {
        font-size: 1rem;
      }
    }

    input[type="password"]::-ms-reveal {
      display: none;
    }

    .tips {
      width: 100%;
      height: 1.5rem;
      margin-top: 0.3rem;
      text-align: start;
      color: red;
      span {
        margin-left: 2.5rem;
      }
    }

    .btn {
      width: 100%;
      margin-top: 2rem;
      background-color: #0040a1;
      color: #fff;
      border-radius: 0;
      border: 0.1rem solid #2873ff;
    }

    .accont-icon {
      width: 1rem;
      height: 1rem;
      pointer-events: all !important;
    }
  }
}
</style>
