<template>
  <div class="login-page">
    <div class="body-box">
      <!-- 登录表单 -->
      <div class="mian-view-vessel">
        <div class="keyboard-box">
          <rest-simple-keyboard @change="keyboardChange"></rest-simple-keyboard>
        </div>
        <el-form ref="loginFormRef" class="right-view" labelPosition="left" statusIcon :model="loginForm" :rules="rules">
          <div class="element-top form-floating-element"></div>
          <div class="element-bottom-left form-floating-element"></div>
          <div class="element-bottom-right form-floating-element"></div>
          <el-form-item class="global-slide-up-animation logo-box" style="z-index: 2; animation-delay: 0.05s">
            <div class="title-box">
              <h1 class="title">QClass智评会议</h1>
            </div>
          </el-form-item>
          <el-form-item prop="no" class="global-slide-up-animation" style="z-index: 2; animation-delay: 0.15s">
            <el-input
              ref="noInputRef"
              v-model="loginForm.no"
              :prefixIcon="IconUser"
              placeholder="请输入用户名"
              style="--el-input-bg-color: #ffffff; --el-input-border-radius: 4px"
              tabindex="1"
              :maxlength="usernameMax"
              type="url"
              clearable
              :inputStyle="{ height: '40px' }"
              :readonly="isTouchDevice"
              @keydown.enter.stop.prevent="$throttle(handleLogin, $event)"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd" class="global-slide-up-animation" style="z-index: 2; animation-delay: 0.2s">
            <el-input
              ref="pwdInputRef"
              v-model="loginForm.pwd"
              :prefixIcon="IconLock"
              placeholder="请输入密码"
              style="--el-input-bg-color: #ffffff; --el-input-border-radius: 4px"
              tabindex="2"
              showPassword
              :maxlength="100"
              type="password"
              :inputStyle="{ height: '40px' }"
              clearable
              :readonly="isTouchDevice"
              @keydown.enter.stop.prevent="$throttle(handleLogin, $event)"
            ></el-input>
          </el-form-item>
          <el-form-item class="global-slide-up-animation" style="z-index: 2; animation-delay: 0.25s">
            <el-button
              class="login-btn"
              :loading="loading"
              :disabled="!loginForm.pwd || !loginForm.no || loading"
              type="primary"
              style="background: linear-gradient(93deg, #74e8ff 0%, #306fff 100%); border: transparent"
              @click="$throttle(handleLogin, $event)"
            >
              <span>登录</span>
            </el-button>
          </el-form-item>
          <el-form-item class="global-slide-up-animation" style="z-index: 2; animation-delay: 0.3s">
            <div style="display: flex; justify-content: flex-end; width: 100%">
              <el-button text type="primary" @click="$throttle(onpenfindPassword)"> 忘记密码? </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="fixed-bg-box">
      <div class="stars">
        <div class="star"></div>
        <div class="star" style="top: 80px; left: 800px; animation-delay: 3s"></div>
        <div class="star" style="top: 40px; left: 646px; animation-delay: 2s"></div>
        <div class="star" style="top: 120px; left: 395px; animation-delay: 4s"></div>
        <div class="star" style="top: 160px; left: 765px; animation-delay: 1s"></div>
        <div class="star" style="top: 170px; left: 1200px; animation-delay: 2s"></div>
        <div class="star" style="top: 200px; left: 1000px; animation-delay: 1s"></div>
      </div>
    </div>
    <div class="copyright-box">
      <rest-copyright></rest-copyright>
    </div>
    <find-password ref="findPasswordRef"></find-password>
  </div>
</template>

<script setup lang="ts">
  import IconLock from '~icons/ep/lock';
  import IconUser from '~icons/ep/user';
  import FindPassword from './aa-components/find-password.vue';
  import { nextTick, useTemplateRef } from 'vue';
  import { type ReqUserLogin, passdLoginAxios } from '@/api/login';
  import { getPasswordRules, getUsernameRules } from '@/utils/page/rules';
  import type { FormRules } from 'element-plus';

  const pwdInputRef = useTemplateRef('pwdInputRef');
  const noInputRef = useTemplateRef('noInputRef');
  const findPasswordRef: $RefComp<typeof FindPassword> = useTemplateRef('findPasswordRef');
  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
  const loginFormRef: $RefComp<'ElForm'> = useTemplateRef('loginFormRef');

  const loginForm = shallowReactive<ReqUserLogin>({
    no: '',
    pwd: '',
  });
  const { usernameRules, usernameMax } = getUsernameRules();
  const { passwordRules } = getPasswordRules();

  const loading = shallowRef(false);
  const rules: FormRules = {
    no: usernameRules,
    pwd: passwordRules('密码'),
  };

  onMounted(() => {
    const deviceId = import.meta.env.VITE_DEVICE_ID;
    if (deviceId === 'c97014b1-031d-556b-bf15-8b7de2e5811b' && import.meta.env.VITE_BASE_URL === 'https://api.qyzhjy.com') {
      loginForm.no = '000268';
      loginForm.pwd = '123456';
    } else if (deviceId === 'cf9e9bbb-8d65-43cd-92b9-0d821e31fc17' && import.meta.env.VITE_BASE_URL === 'https://api.qyzhjy.com') {
      loginForm.no = '000268';
      loginForm.pwd = '123456';
    } else if (deviceId === 'e24f0933-2d64-40b3-b04c-58cfc91c4521' && import.meta.env.VITE_BASE_URL === 'https://api.qyzhjy.com') {
      loginForm.no = '000268';
      loginForm.pwd = '123456';
    } else if (deviceId === 'cf9e9bbb-8d65-43cd-92b9-0d821e31fc17') {
      // loginForm.no = '100009';
      // loginForm.pwd = '100009';
      loginForm.no = '222222';
      loginForm.pwd = '123456';
      // loginForm.no = '000062';
      // loginForm.pwd = '000061';
    }
  });

  // 检测是否为触屏设备
  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

  /**
   * 登录
   */
  async function handleLogin(event: Event) {
    if ('isComposing' in event && event.isComposing) {
      // 解决监听回车键中文状态下回车选择中文时也触发提交
      return;
    }

    try {
      await loginFormRef.value?.validate();
      // oxlint-disable-next-line no-unused-vars
    } catch (err) {
      Toast.error('请完善账号密码');
    }
    try {
      loading.value = true;

      const res = await passdLoginAxios(JSON.parse(JSON.stringify(loginForm)));
      await userStore.setUserInfo(res.data);
      await nextTick();
      const url = '/meeting/select-courses';
      await router.push((route.query.redirect as string) || url);
      loading.value = false;
    } catch (err: any) {
      loading.value = false;

      console.log('错误====', (route.query.redirect as string) || '/', err);
      Toast.error(err?.msg || '登录失败,BD002');
    }
  }

  /**
   * 打开找回密码弹出框
   */
  function onpenfindPassword() {
    findPasswordRef.value?.show();
  }

  /**
   * 键盘改变
   */
  function keyboardChange(value: string, activeElement: HTMLInputElement | null) {
    nextTick(() => {
      if (noInputRef.value?.$el.contains(activeElement as Node)) {
        loginForm.no = value;
      } else if (pwdInputRef.value?.$el.contains(activeElement as Node)) {
        loginForm.pwd = value;
      }
    });
  }
</script>

<style lang="scss" scoped>
  $item-height: 40px;

  @keyframes star-opacity {
    0% {
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    60% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
  @keyframes star-opacity {
    0% {
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    60% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
  @keyframes star-pos {
    0% {
      transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }

    100% {
      transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
    }
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-40px);
    }

    100% {
      transform: translateY(0);
    }
  }
  @keyframes color-change1 {
    0% {
      background: rgb(255, 215, 0);
    }

    25% {
      background: rgb(255, 105, 180);
    }

    50% {
      background: rgb(168, 85, 247);
    }

    75% {
      background: rgb(56, 189, 248);
    }

    100% {
      background: rgb(255, 215, 0);
    }
  }
  @keyframes color-change2 {
    0% {
      background: rgb(168, 85, 247);
    }

    25% {
      background: rgb(255, 105, 180);
    }

    50% {
      background: rgb(255, 215, 0);
    }

    75% {
      background: rgb(56, 189, 248);
    }

    100% {
      background: rgb(168, 85, 247);
    }
  }
  @keyframes color-change3 {
    0% {
      background: rgb(56, 189, 248);
    }

    25% {
      background: rgb(255, 215, 0);
    }

    50% {
      background: rgb(168, 85, 247);
    }

    75% {
      background: rgb(255, 105, 180);
    }

    100% {
      background: rgb(56, 189, 248);
    }
  }

  @media screen and (max-width: 800px) {
    .left-view {
      display: none !important;
    }
  }

  .login-page {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;

    .head-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100vw;
      height: 80px;
      padding: 0 40px;
      // background: var(--el-color-danger);
    }

    .body-box {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-end;
      width: 100vw;

      .mian-view-vessel {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
        justify-content: center;

        .right-view {
          @include flex(column, nowrap, space-between, center, center);
          position: relative;
          box-sizing: border-box;
          width: 340px;
          min-height: 450px;
          padding: 20px 40px;
          padding-top: 60px;
          margin-right: 6vw;
          margin-bottom: 20px;
          background: rgba(255, 255, 255, 0.6) !important;
          border-radius: 15px;
          box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.15);
          transition: background 0.2s;

          .form-floating-element {
            position: absolute;
            z-index: 0;
            width: 120px;
            height: 120px;
            user-select: none;
            filter: blur(60px);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;

            &.element-top {
              top: 100px;
              right: 100px;
              background: rgb(255, 215, 0);
              animation:
                float 10s ease-in-out infinite,
                color-change1 8s ease-in-out infinite;
            }

            &.element-bottom-left {
              bottom: 80px;
              left: 30px;
              background: rgb(168, 85, 247);
              animation:
                float 6s ease-in-out infinite,
                color-change2 10s ease-in-out infinite;
              animation-delay: 2s;
            }

            &.element-bottom-right {
              right: 30px;
              bottom: 140px;
              background: rgb(56, 189, 248);
              animation:
                float 8s ease-in-out infinite,
                color-change3 12s ease-in-out infinite;
            }
          }

          .el-form-item {
            width: 100%;

            .title-box {
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              justify-content: flex-start;
              width: 100%;
              user-select: none;

              .title {
                font-size: 32px;
                font-weight: bolder;
                color: $c-text;
                background: linear-gradient(16deg, #19dcea 0%, #0b16ea 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .login-btn {
              display: inherit;
              width: 100%;
              height: $item-height;
              margin-top: 5px;
              margin-bottom: -10px;
              font-size: 20px;
              font-weight: bold;
              box-shadow: 0 2px 12px 0 $c-box-shadow;
            }
          }
        }
      }
    }
  }

  .ble-pen,
  .ble-work {
    position: absolute;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
    transition: all 0.3s ease;

    &:before {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      content: '';
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: 0.5s;
    }

    &:hover {
      box-shadow: 0 6px 20px rgba(255, 75, 43, 0.6);
      transform: translateY(-2px);

      &:before {
        left: 100%;
      }
    }
  }

  .keyboard-box {
    position: absolute;
    top: 120px;
    right: 420px;
    z-index: 20;
    width: 460px;
  }
  // 流星动画
  .fixed-bg-box {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100vh;
    height: 100vh;
    pointer-events: none;

    .stars {
      height: 0;

      .star {
        position: relative;
        top: 30px;
        right: 100px;
        z-index: 2;
        display: block;
        width: 5px;
        height: 5px;
        background: #e9660e;
        border-radius: 50%;
        box-shadow: 0 0 5px 5px rgba(233, 76, 14, 0.3);
        opacity: 0;
        transform-origin: 100% 0;
        animation:
          star-opacity 5s infinite ease-in,
          star-pos 5s infinite ease-in;

        &:after {
          top: 0;
          left: 4px;
          display: block;
          content: '';
          border: 0 solid #e9710e;
          border-color: transparent transparent transparent rgba(233, 47, 14, 0.3);
          border-width: 0 90px 2px;
          box-shadow: 0 0 1px 0 rgba(233, 65, 14, 0.1);
          transform: rotate(-45deg) translate3d(1px, 3px, 0);
          transform-origin: 0% 100%;
        }
      }
    }
  }

  html.dark .login-page {
    background-attachment: fixed;
    background-size: cover;

    .mian-view-vessel .mian-view {
      box-shadow: var(--el-box-shadow);
    }
  }

  .copyright-box {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 10px;
  }
</style>
