<template>
  <div class="login" ref="indexContainer">
    <!-- <img src="@/assets/imgs/login-bg01.png"> -->
    <!-- 左边背景部分 -->
    <div class="login-box">
      <div class="textBox">
        <div class="textContent">PMS:新光线平台</div>
      </div>

      <!-- 右边部分 -->
      <div class="right-box">
        <div class="login-text">欢迎登录</div>
        <div class="login-content">
          <div class="input-section">
            <div>
              <span class="title">账&emsp;号</span>
            </div>
            <div class="inp-box" :class="usershadow ? 'isfocus' : ''">
              <input
                class="inp"
                placeholder="请输入账号"
                @focus="usershadow = true"
                @blur="usershadow = false"
                v-model="login.account"
              />
            </div>
          </div>
          <div class="input-section">
            <div>
              <span class="title">密&emsp;码</span>
            </div>
            <div class="inp-box" :class="shadow ? 'isfocus' : ''">
              <input
                class="inp"
                type="password"
                placeholder="请输入密码"
                v-model="login.pwd"
                @focus="shadow = true"
                @blur="shadow = false"
              />
            </div>
          </div>

          <div class="input-section">
            <div>
              <span class="title">验&emsp;证&emsp;码</span>
            </div>
            <div class="inp-box" :class="codeShadow ? 'isfocus' : ''">
              <div class="df aic jcsb" style="width: 100%">
                <input
                  class="inp"
                  style="flex: 2"
                  placeholder="请输入验证码"
                  v-model="login.validateCode"
                  @keydown.enter="confirmLogin"
                  @focus="codeShadow = true"
                  @blur="codeShadow = false"
                />
                <img style="cursor: pointer; flex: 1" @click="updateCode" height="50" :src="codeSrc" />
              </div>
            </div>
          </div>
          <div class="box-button" @click="confirmLogin">
            <div class="submit">登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi } from '@/utils/api'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { routerHistory } = storeToRefs(userStore) //路由记录
const login = reactive({
  account: '',
  pwd: '',
  validateCode: '',
})
const codeSrc = ref()
const uuid = ref()
const updateCode = async () => {
  const res = await loginApi.getCode()
  codeSrc.value = 'data:image/png;base64,' + res.img
  uuid.value = res.uuid
}

const confirmLogin = async () => {
  if (!login.account) {
    ElMessage.error({ message: `用户名不能为空！` })
    return
  }
  if (!login.pwd) {
    ElMessage.error({ message: `密码不能为空！` })
    return
  }
  if (!login.validateCode) {
    ElMessage.error({ message: `验证码不能为空！` })
    return
  }
  const params = {
    password: login.pwd,
    username: login.account,
    code: login.validateCode,
    uuid: uuid.value,
  }
  try {
    await userStore.login(params)
    routerHistory.value = []
  } catch (error) {
    updateCode()
  }
}
const usershadow = ref(false)
const shadow = ref(false)
const codeShadow = ref(false)
updateCode()
</script>
<style lang="scss">
.login {
  height: 100%;
  width: 100%;
  @include flex-row;
  // background-color: #02082e;
  align-items: center;
  justify-content: center;
  background: url('@/assets/imgs/椭圆形 + 椭圆形 + 椭圆形 蒙版.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 2000;
  .login-box {
    display: flex;
    justify-content: center;
    background-size: 100% 100%;
    width: 11rem;
    height: 7rem;
    .right-box {
      flex: 1;
      @include flex-row-vc;
      justify-content: space-between;
      gap: 10px;
      background: #ffffff;
      border-top-right-radius: 0.4rem;
      box-shadow: 0px 10px 20px 0px #2860b5;
      padding: 0.2rem;
      .login-text {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 0.36rem;
        font-family: FZZDHJW--GB1-0;
        white-space: nowrap;
        font-weight: bold;
      }
      .login-content {
        flex: 3;
        @include flex-row-vc;
        .input-section {
          @include flex-row;
          align-items: center;
          margin-bottom: 0.4rem;
          .title {
            margin-right: 0.1rem;
            color: #199cf5;
            font-size: 14px;
            white-space: nowrap;
          }
          .inp-box {
            flex: 1; // height: 50px;
            @include flex-row;
            &::after {
              content: '';
              display: block;
              position: absolute;
              right: 0;
              bottom: 0;
              width: 0;
              height: 0;
              // border: 5px solid #062a4a;
              // border-top-color: transparent;
              // border-left-color: transparent;
            }
            .inp {
              flex: 1;
              color: #000;
              background: transparent !important;
              outline: none;
              border: none;
              padding-left: 0.15rem;
            }
          }

          .isfocus {
            box-shadow: 0px 0px 3px 2px #3686ff;
            &::after {
              content: '';
              display: block;
              position: absolute;
              right: 0;
              bottom: 0;
              width: 0;
              height: 0;
              border: 5px solid #3686ff;
              border-top-color: transparent;
              border-left-color: transparent;
            }
          }
        }

        .box-button {
          width: 100%;
          height: 0.5rem;
          // margin-top: 1rem;
          cursor: pointer;
          .submit {
            width: 80%;
            height: 0.5rem;
            margin: auto;
            color: #fff;
            text-align: center;
            line-height: 0.5rem;
            border-radius: 10px;
            // transform: translate(-50%, -50%);
            background: #3686ff;
            font-size: 0.22rem;
          }
        }
      }
    }

    .textBox {
      position: relative;
      flex: 1;
      box-shadow: 0px 10px 20px 0px #2860b5;
      background: #fff;
      border-bottom-left-radius: 40px;
      background: url('@/assets/imgs/编组 3.png') no-repeat;
      background-position: center center;
      background-size: 60% 60%;
      padding: 0.2rem;
      .textContent {
        width: 100%;
        font-weight: bold;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 0.32rem;
        font-family: FZZDHJW--GB1-0;
        text-align: center;
        white-space: nowrap;
      }
      .textItem {
        // width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0.4rem;
        left: 50%;
        transform: translate(-50%, 0%);
        font-size: 0.14rem;
        color: #fff;
        gap: 0.1rem;
      }
      .textItems {
        display: flex;
        justify-content: center;
        // width: 100%;
        position: absolute;
        bottom: 0.1rem;
        left: 50%;
        transform: translate(-50%, 0%);
        font-size: 0.12rem;
        color: #ffffff;
        font-family: PingFangSC-Regular, PingFang SC;
        white-space: nowrap;
      }
    }
  }
}
</style>
