<template>
  <div class="login-container">
    <div class="Version">Version 1.0.8 test</div>
    <div class="videoBox">
      <video
        src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4"
        muted
        autoplay
        loop
      ></video>
    </div>
    <!-- 正常登录 isLogin == 1-->
    <el-form
      v-if="isLogin == 1"
      ref="loginFormRef"
      :model="loginData"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          title + " " + $t("login.login")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="email">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData.email"
          :placeholder="$t('login.email')"
          name="email"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData.password"
          :placeholder="$t('login.password')"
          :type="passwordVisible === false ? 'password' : 'input'"
          size="large"
          name="password"
          @keyup.enter="handleLogin"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item prop="verifyCode">
        <span class="text-white">
          <svg-icon icon-class="verify_code" />
        </span>
        <el-input
          v-model="loginData.verifyCode"
          auto-complete="off"
          :placeholder="$t('login.verifyCode')"
          class="flex-1"
          @keyup.enter="handleLogin"
        />

        <span class="captcha">
          <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="handleLogin"
      >
        <el-icon
          v-if="isLogining"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.loginBtn") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(2)">
          <span class="join">{{ $t("login.signUp") }}</span>
        </div>
        <div style="margin-bottom: 5px">
          <span class="join" @click="loginFlag(7)">{{
            $t("login.SMSLogin")
          }}</span>
        </div>
        <div>
          <span class="join" @click="loginFlag(3)">{{
            $t("login.forgetPwd")
          }}</span>
        </div>
      </div>
    </el-form>
    <!-- 注册账户 isLogin == 2-->
    <el-form
      v-if="isLogin == 2"
      ref="loginFormRef"
      :model="loginData2"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.register")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="email">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData2.email"
          :placeholder="$t('login.email')"
          name="email"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData2.password"
          :placeholder="$t('login.password')"
          :type="passwordVisible === false ? 'password' : 'input'"
          size="large"
          name="password"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-form-item prop="confirmPassword">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData2.confirmPassword"
          :placeholder="$t('login.confirmPassword')"
          :type="passwordVisible === false ? 'password' : 'input'"
          size="large"
          name="confirmPassword"
          @keyup.enter="handleRegister"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="handleRegister"
      >
        <el-icon
          v-if="isRegistering"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.registerBtn") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
        <div>
          <span class="join" @click="loginFlag(3)">{{
            $t("login.forgetPwd")
          }}</span>
        </div>
      </div>
    </el-form>
    <!-- 注册账户之后输入短信验证码 isLogin == 6-->
    <el-form
      v-if="isLogin == 6"
      ref="loginFormRef"
      :model="loginData6"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.register")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="SMSCode">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData6.SMSCode"
          :placeholder="$t('login.SMSCode')"
          name="email"
        />
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="handleRegister"
      >
        <el-icon
          v-if="isRegistering"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.registerBtn") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
      </div>
    </el-form>
    <!-- 忘记密码 isLogin == 3-->
    <el-form
      v-if="isLogin == 3"
      ref="loginFormRef"
      :model="loginData3"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.forgetPwdTitle")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="email">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData3.email"
          :placeholder="$t('login.email')"
          name="email"
        />
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item prop="code">
        <span class="text-white">
          <svg-icon icon-class="verify_code" />
        </span>
        <el-input
          v-model="loginData3.code"
          auto-complete="off"
          :placeholder="$t('login.verifyCode')"
          class="flex-1"
          @keyup.enter="handleLogin"
        />

        <span class="captcha">
          <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="sendEmailforgetPwd"
      >
        <el-icon
          v-if="isRegistering"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.SendEmail") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
      </div>
    </el-form>
    <!-- 重置密码 isLogin == 4-->
    <el-form
      v-if="isLogin == 4"
      ref="loginFormRef"
      :model="loginData4"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.resetPassword")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="verifyCode">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData4.verifyCode"
          :placeholder="$t('login.SMSCode')"
          :type="'input'"
          size="large"
          name="password"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-form-item prop="password">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData4.password"
          :placeholder="$t('login.newPwd')"
          :type="passwordVisible === false ? 'password' : 'input'"
          size="large"
          name="password"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-form-item prop="confirmPassword4">
        <span class="text-white">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          class="flex-1"
          v-model="loginData4.confirmPassword4"
          :placeholder="$t('login.confirmNewPwd')"
          :type="passwordVisible === false ? 'password' : 'input'"
          size="large"
          name="confirmPassword4"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="resetPwdForm"
      >
        <el-icon
          v-if="isRegistering"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.confirm") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
        <!-- <div>
          <span
            class="join"
            @click="router.push({ path: 'createVideo', params: {} })"
            >{{ $t("login.gohome") }}</span
          >
        </div> -->
      </div>
    </el-form>
    <!-- 忘记密码邮件返回 isLogin == 5-->
    <el-form
      v-if="isLogin == 5"
      ref="loginFormRef"
      :model="loginData5"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.setNewPwd")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="newPwd">
        <div class="text-white">
          <svg-icon icon-class="password" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData5.newPwd"
          :placeholder="$t('login.newPwd')"
          :type="passwordVisible === false ? 'password' : 'input'"
          name="password"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>
      <el-form-item prop="confirmNewPwd">
        <div class="text-white">
          <svg-icon icon-class="password" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData5.confirmNewPwd"
          :placeholder="$t('login.confirmNewPwd')"
          name="password"
          :type="passwordVisible === false ? 'password' : 'input'"
        />
        <span class="mr-2" @click="passwordVisible = !passwordVisible">
          <svg-icon
            :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
            class="text-white cursor-pointer"
          />
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="resetPwdEmail"
      >
        <el-icon
          v-if="isRegistering"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.confirm") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
      </div>
    </el-form>
    <!-- 短信登录 isLogin == 7-->
    <el-form
      v-if="isLogin == 7"
      ref="loginFormRef"
      :model="loginData7"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.login")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="email">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="email"
          size="large"
          v-model="loginData7.email"
          :placeholder="$t('login.email')"
          name="email"
        />
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item prop="verifyCode">
        <span class="text-white">
          <svg-icon icon-class="verify_code" />
        </span>
        <el-input
          v-model="loginData7.verifyCode"
          auto-complete="off"
          :placeholder="$t('login.SMSLogin')"
          class="flex-1"
        />
        <span class="captcha">
          <div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
            {{ $t("login.sendSMS") }}
          </div>
          <div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
        </span>
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="handleLoginBySMS"
      >
        <el-icon
          v-if="isLogining"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.loginBtn") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(2)">
          <span class="join">{{ $t("login.signUp") }}</span>
        </div>
        <div style="margin-bottom: 5px">
          <span class="join" @click="loginFlag(1)">{{
            $t("login.pwsLogin")
          }}</span>
        </div>
        <div>
          <span class="join" @click="loginFlag(3)">{{
            $t("login.forgetPwd")
          }}</span>
        </div>
      </div>
    </el-form>
    <!-- 邀请码填写 isLogin == 8-->
    <el-form
      v-if="isLogin == 8"
      ref="loginFormRef"
      :model="loginData7"
      :rules="loginRules"
      class="login-form"
    >
      <div class="flex text-white items-center">
        <span class="flex-1 text-center">{{
          $t("login.title") + " " + $t("login.setInvitatioCode")
        }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" style="color: #ffffff" />
        </el-tooltip>
      </div>

      <el-form-item prop="verifyCode">
        <div class="text-white">
          <svg-icon icon-class="user" />
        </div>
        <el-input
          class="flex-1"
          ref="invitatioCode"
          size="large"
          v-model="loginData8.invitatioCode"
          :placeholder="$t('login.invitatioCode')"
          name="invitatioCode"
        />
      </el-form-item>

      <el-button
        size="default"
        :loading="loading"
        type="primary"
        class="loginBtn"
        @click.prevent="handleInvitatioCode"
      >
        <el-icon
          v-if="isLogining"
          style="margin-right: 10px"
          class="is-loading"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
            ></path>
          </svg>
        </el-icon>
        {{ $t("login.confirm") }}
      </el-button>

      <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
        <div style="margin-bottom: 5px" @click="loginFlag(1)">
          <span class="join">{{ $t("login.signIn") }}</span>
        </div>
        <div style="margin-bottom: 5px">
          <span class="join" @click="router.push('/createVideo')">{{
            $t("login.gohome")
          }}</span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import LangSelect from "@/components/LangSelect/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {
  register,
  login,
  sendRegisterEmail,
  getCodeImgUrl,
  sendUpdPwdEmailApi,
  doUpdPassApi,
  resetPwdEmailApi,
  resetPwdFormApi,
  getSMSToLoginApi,
  loginByMSMApi,
  doFindInviteCode,
  doUpdateInviteCode,
} from "@/apis/login";
import axios from "axios";
// 状态管理依赖

import { userInfoModules } from "@/store/modules/userInfo";

// API依赖
import {
  LocationQuery,
  LocationQueryValue,
  useRoute,
  useRouter,
} from "vue-router";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const currentLan = ref(locale);
const userInfoPinia = userInfoModules();
const route = useRoute();
const router = useRouter();

/**
 * 获取页面标题
 */
const title = ref(route.query.p || '')
if (title) {
  localStorage.setItem("title", title.value)
  document.title = 'Metavatar-' + title.value
}
/**
 * 按钮loading
 */
const loading = ref(false);

/**
 * 密码是否可见
 */
const passwordVisible = ref(false);

/**
 * 验证码图片Base64字符串
 */
const verifyCodeUrl = ref();

/**
 * 登录/注册  显示哪个表单
 */
const isLogin = ref(1);

const showCodeImg = ref(true);
/**
 * 登录表单引用
 */
const loginFormRef = ref(ElForm);

const isLogining = ref(false);
const isRegistering = ref(false);

const loginData = ref({
  email: "",
  password: "",
  verifyCode: "",
});

const loginData2 = ref({
  email: "",
  password: "",
  confirmPassword: "",
});
const loginData3 = ref({
  email: "",
  code: "",
});
const loginData4 = ref({
  verifyCode: "",
  password: "",
  confirmPassword4: "",
});
const loginData5 = ref({
  newPwd: "",
  confirmNewPwd: "",
});
const loginData6 = ref({
  SMSCode: "",
});
const loginData7 = ref({
  email: "",
  verifyCode: "",
});
const loginData8 = ref({
  invitatioCode: "",
});
const loginRules = ref({
  email: [
    {
      required: true,
      trigger: "blur",
      validator: emailValidator,
    },
  ],
  password: [{ required: true, trigger: "blur", validator: passwordValidator }],

  confirmPassword: [
    { required: true, trigger: "blur", validator: confirmPasswordValidator },
  ],
  verifyCode: [
    {
      required: true,
      trigger: "blur",
      message:
        currentLan.value == "zh-cn"
          ? "请输入验证码"
          : "Please input verifyCode",
    },
  ],
  invitatioCode: [
    {
      required: true,
      trigger: "blur",
      message:
        currentLan.value == "zh-cn"
          ? "请输入邀请码"
          : "Please input invitation code",
    },
  ],
  oldPassword: [
    { required: true, trigger: "blur", validator: passwordValidator },
  ],
  confirmPassword4: [
    { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
  ],
  newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
  confirmNewPwd: [
    { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
  ],
});

watch(currentLan, (newValue, oldValue) => {
  const loginRule = loginRules.value;
  loginRule.verifyCode[0].message =
    newValue == "zh-cn" ? "请输入验证码" : "Please input verifyCode";
  setTimeout(() => {
    loginFormRef.value.resetFields();
    getInfo();
  }, 100);
  // 切换语言刷新验证码
  getCode();
});

/**
 * @description: 切换登录/注册状态
 */
function loginFlag(type: number) {
  isLogin.value = type;
  // 切换登录/注册状态刷新验证码
  getCode();
  setTimeout(() => {
    loginFormRef.value.resetFields();
  }, 100);
}

/**
 * @description: 将账户/密码存储在本地
 * @param:email，password
 */
function saveInfo(data: any) {
  const userInfo = JSON.stringify({
    email: data.phone,
    password: data.password,
  });
  // 将用户信息加密
  const enCodeUserInfo = encodeURI(userInfo);
  localStorage.setItem("userInfo", enCodeUserInfo);
}

/**
 * @description: 将存储在本地的账户/密码恢复至登录表单
 */
function getInfo() {
  const data = localStorage.getItem("userInfo");
  // 将用户信息解密
  const deCodeUserInfo = decodeURI(data as any);
  const userInfo = JSON.parse(deCodeUserInfo);
  if (userInfo) {
    loginData.value.email = userInfo.email ? userInfo.email : "";
    loginData.value.password = userInfo.password ? userInfo.password : "";
  }
}
//#region  密码校验部分

/**
 * 邮箱校验器
 */
function emailValidator(rule: any, value: any, callback: any) {
  const msg =
    currentLan.value == "zh-cn"
      ? "手机号不能为空！"
      : "The E-amil can not be empty";

  const msg2 =
    currentLan.value == "zh-cn"
      ? "手机号格式不正确！"
      : "Incorrect email format";

  const phoneReg = /^[1][3-9]\d{9}$/;
  const emailReg =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (!value) {
    callback(new Error(msg));
  } else if (!phoneReg.test(value)) {
    callback(new Error(msg2));
  } else {
    callback();
  }
}

/**
 * 密码校验器
 */
function passwordValidator(rule: any, value: any, callback: any) {
  const msg =
    currentLan.value == "zh-cn"
      ? "密码不能为空！"
      : "The password can not be empty";

  const msg2 =
    currentLan.value == "zh-cn"
      ? "密码至少为6位！"
      : "The password can not be less than 6 digits";
  if (!value) {
    callback(new Error(msg));
  } else if (value.length < 6) {
    callback(new Error(msg2));
  } else {
    callback();
  }
}

/**
 * 确认密码校验器
 */
function confirmPasswordValidator(rule: any, value: any, callback: any) {
  const msg =
    currentLan.value == "zh-cn"
      ? "确认密码不能为空！"
      : "The Confirm password can not be empty";
  const msg2 =
    currentLan.value == "zh-cn"
      ? "两次输入密码不一致！"
      : "Confirm Passward entered should match";

  if (!value) {
    callback(new Error(msg));
  } else if (value !== loginData2.value.password) {
    callback(new Error(msg2));
  } else {
    callback();
  }
}

/**
 * 确认密码校验器
 */
function confirmPasswordValidator4(rule: any, value: any, callback: any) {
  const msg =
    currentLan.value == "zh-cn"
      ? "确认密码不能为空！"
      : "The Confirm password can not be empty";
  const msg2 =
    currentLan.value == "zh-cn"
      ? "两次输入密码不一致！"
      : "Confirm Passward entered should match";

  if (!value) {
    callback(new Error(msg));
  } else if (value !== loginData4.value.password) {
    callback(new Error(msg2));
  } else {
    callback();
  }
}
function confirmPasswordValidator5(rule: any, value: any, callback: any) {
  const msg =
    currentLan.value == "zh-cn"
      ? "确认密码不能为空！"
      : "The Confirm password can not be empty";
  const msg2 =
    currentLan.value == "zh-cn"
      ? "两次输入密码不一致！"
      : "Confirm Passward entered should match";

  if (!value) {
    callback(new Error(msg));
  } else if (value !== loginData5.value.newPwd) {
    callback(new Error(msg2));
  } else {
    callback();
  }
}
//#endregion ----------------------------

// 登录行为
function handleLogin() {
  loginFormRef.value.validate((val: any) => {
    if (val) {
      const data = {
        phone: loginData.value.email,
        password: loginData.value.password,
        code: loginData.value.verifyCode,
      };
      isLogining.value = true;
      doLogin(data);
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}

// 注册行为
function handleRegister() {
  loginFormRef.value.validate((val: any) => {
    if (val) {
      const data = {
        phone: loginData2.value.email,
        password: loginData2.value.password,
      };
      isRegistering.value = true;
      doRegister(data);
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}

//#region 忘记密码 表单3
function sendEmailforgetPwd() {
  const msg =
    currentLan.value == "zh-cn"
      ? "短信验证码已发送至您的手机，请注意查收"
      : "The SMS verification code has been sent to your mobile phone, please check it";
  loginFormRef.value.validate(async (val: any) => {
    if (val) {
      const data = {
        phone: loginData3.value.email,
        code: loginData3.value.code,
      };
      await sendUpdPwdEmailApi(data)
        .then((res) => {
          console.log(res, "res");
          ElMessage.success(msg);
          isLogin.value = 4;
        })
        .catch((err) => {
          console.log(err, "err");
          ElMessage.error(err.message);
        });
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}
//#endregion --------------------------

//#region 忘记密码 表单5
function resetPwdEmail() {
  loginFormRef.value.validate(async (val: any) => {
    if (val) {
      try {
        const res = await resetPwdEmailApi({
          pwd: loginData5.value.newPwd,
          ticket: route.query.ticket,
        });
        localStorage.removeItem("AccessToken");
        loginData.value.email = route.query.email + "";
        loginData.value.password = "";
        isLogin.value = 1;
        router.push({ path: "login", query: {} });
      } catch (error: any) {
        ElMessage.error(error);
        console.log(error);
      }
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}
//#endregion --------------------------

//#region 重置密码 表单4
function resetPwdForm() {
  loginFormRef.value.validate(async (val: any) => {
    if (val) {
      try {
        const res = await doUpdPassApi({
          phone: loginData3.value.email,
          code: loginData4.value.verifyCode,
          pwd: loginData4.value.password,
        });
        localStorage.removeItem("AccessToken");
        loginData.value.password = "";
        isLogin.value = 1;
        ElMessage.success(
          currentLan.value == "zh-cn"
            ? "重置密码成功!"
            : "Reset password successfully"
        );
        // router.push({ path: "login", query: {} });
      } catch (error: any) {
        ElMessage.error(error.message);
        console.log(error);
      }
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}
//#endregion --------------------------

//#region 短信登录 表单7
// 获取验证码
const SMSTimeOut = ref(0);
async function getSMSToLogin() {
  let phoneReg = /^[1][3-9]\d{9}$/;
  let phoneValide = phoneReg.test(loginData7.value.email);
  if (!phoneValide) {
    ElMessage.error(
      currentLan.value == "zh-cn"
        ? "请输入正确的手机号！"
        : "Please enter the correct phone number!"
    );
    return;
  }
  try {
    await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
      ElMessage.success(
        currentLan.value == "zh-cn"
          ? "短信验证码发送成功！"
          : "SMS verification code sent successfully!"
      );
      SMSTimeOut.value = 60;
      const timer = setInterval(() => {
        if (SMSTimeOut.value != 0) {
          SMSTimeOut.value--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    });
  } catch (error: any) {
    ElMessage.error(error.message);
  }
}
// 登录行为
function handleLoginBySMS() {
  loginFormRef.value.validate((val: any) => {
    if (val) {
      const data = {
        phone: loginData7.value.email,
        code: loginData7.value.verifyCode,
      };
      isLogining.value = true;
      doLoginByMSM(data);
    } else {
      const msg =
        currentLan.value == "zh-cn"
          ? "请检查信息格式！"
          : "Please check the format !";
      ElMessage.error(msg);
      return;
    }
  });
}
async function doLoginByMSM(data: any) {
  const msg =
    currentLan.value == "zh-cn" ? "登录成功！" : "Welcome to Metavatar!";
  await loginByMSMApi(data)
    .then(async (res: any) => {
      console.log(res, "res");
      localStorage.setItem("AccessToken", res.data.token);
      saveInfo(data);
      isLogining.value = false;
      // await checkInviteCode();

      ElMessage.success(msg);
      router.push("/createVideo");
      // 注册成功将账号密码保存到本地
    })
    .catch((err) => {
      console.log(err, "err");
      // 登录失败刷新验证码
      getCode();
      ElMessage.error(err.message);
      isLogining.value = false;
      if (err.code == 2112) {
        reSendEmail(data.email);
      }
    });
}
//#endregion --------------------------

//#region 查询邀请码 表单8
/**
 * @description:查询用户邀请码状态
 */
async function checkInviteCode() {
  try {
    const res = await doFindInviteCode();
    // console.log(res, '查询用户邀请码数据')
    const status = res.data.status;
    // 当没有邀请码时,切换输入验证码页面
    if (status == 0) {
      isLogin.value = 8;
      // 有邀请码直接前往我的页面
    } else if (status == 1) {
      userInfoPinia.getUserInfo(); //保存邮箱到pinia
      ElMessage.success(
        'currentLan.value == "zh-cn" ? "登录成功！" : "Welcome to Metavatar!"'
      );
      router.push({
        path: "/createVideo",
      });
    } else {
      router.push("/createVideo");
    }
  } catch (error: any) {
    console.log(error, "error");
    ElMessage.error(error.message);
  }
}
// 填写邀请码
async function handleInvitatioCode() {
  const data = {
    inviteCode: loginData8.value.invitatioCode,
  };
  try {
    const res = await doUpdateInviteCode(data);
    userInfoPinia.getUserInfo(); //保存邮箱到pinia
    ElMessage.success(
      'currentLan.value == "zh-cn" ? "登录成功！" : "Welcome to Metavatar!"'
    );
    router.push({
      path: "/createVideo",
    });
  } catch (error: any) {
    console.log(error, "error");
    ElMessage.error(error.message);
  }
}
//#endregion -----------------------

function getCode() {
  showCodeImg.value = false;
  axios({
    url: getCodeImgUrl,
    method: "get",
  }).then(() => {
    verifyCodeUrl.value = getCodeImgUrl;
    showCodeImg.value = true;
  });
}

/**
 * @description:注册
 * @param {Object} data
 * @return: data
 */
async function doRegister(data: object) {
  const msg =
    currentLan.value == "zh-cn" ? "注册成功!" : "Registered successfully";
  await register(data)
    .then((res) => {
      console.log(res, "res");
      isRegistering.value = false;
      ElMessage.success(msg);
      isLogin.value = 1;
      // 注册成功将账号密码保存到本地
      saveInfo(data);
      router.go(0);
    })
    .catch((err) => {
      // 注册失败刷新验证码
      getCode();
      isRegistering.value = false;
      console.log(err, "err");
      ElMessage.error(err.message);
    });
}

/**
 * @description:登录
 * @param {Object} data
 * @return: data
 */
async function doLogin(data: any) {
  const msg =
    currentLan.value == "zh-cn" ? "登录成功！" : "Welcome to Metavatar!";
  await login(data)
    .then(async (res) => {
      console.log(res, "res");
      localStorage.setItem("AccessToken", res.data.token);
      // 注册成功将账号密码保存到本地
      saveInfo(data);
      isLogining.value = false;
      // await checkInviteCode();
      userInfoPinia.getUserInfo(); //保存邮箱到pinia
      ElMessage.success(msg);
      router.push("/createVideo");
    })
    .catch((err) => {
      console.log(err, "err");
      // 登录失败刷新验证码
      getCode();
      ElMessage.error(err.message);
      isLogining.value = false;
      if (err.code == 2112) {
        reSendEmail(data.email);
      }
    });
}

/**
 * @description:重新发送邮件
 * @param {string} email
 * @return: data
 */
async function reSendEmail(email: string) {
  const msg =
    currentLan.value == "zh-cn"
      ? "确认信息已发送至您的邮箱，请注意查收！"
      : "An email has been send to you, Please pay attention to confirm !";
  await sendRegisterEmail(email)
    .then((res) => {
      console.log(res, "res");
      ElMessage.success(msg);
    })
    .catch((err) => {
      console.log(err, "err");
      ElMessage.error(err.message);
    });
}

onMounted(() => {
  getCode();
  getInfo();
  // 重置密码
  // if (router.currentRoute.value.params.type) {
  //   // isLogin.value = Number(router.currentRoute.value.params.type);
  //   isLogin.value = 4;
  // }
  // if (router.currentRoute.value.params.type) {
  //   // isLogin.value = Number(router.currentRoute.value.params.type);
  //   isLogin.value = 4;
  // }
  if (route.query.type) {
    isLogin.value = 4;
  }
  //有resetPwd则说明是重置密码邮件来的
  if (route.query.resetPwd) {
    isLogin.value = 5;
    // route.query.ticket
  }
});
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  // width: 1920px;
  // height: 1080px;
  min-height: 100%;
  overflow: hidden;
  // background-color: #2d3a4b;

  .Version {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #ffffff;
  }

  .login-form {
    position: absolute;
    top: 46%;
    left: 10%;
    width: 520px;
    max-width: 100%;
    padding: 20px;
    overflow: hidden;
    backdrop-filter: blur(3px);
    background: linear-gradient(
      123.64deg,
      rgba(188, 193, 196, 0.1) -22.71%,
      rgba(255, 255, 255, 0.039) 70.04%
    );
    border-radius: 20px;
    transform: translateY(-50%);
    border: 1px solid #cacaca;
    transition: all 0.15s;

    .captcha {
      position: absolute;
      top: 0;
      right: 0;

      img {
        width: 120px;
        height: 48px;
        cursor: pointer;
      }
      .sendSMSBtn {
        width: 120px;
        height: 48px;
        line-height: 48px;
        color: #fff;
        text-align: center;
        background: linear-gradient(270deg, #4b61dc, #15d1b8);
      }
    }
    &:hover {
      backdrop-filter: blur(7px);
    }
    .items-center {
      padding: 20px;
      font-size: 30px;
    }
    .el-form-item {
      .text-white {
        padding: 8px;
      }
    }
  }
}

.loginBtn {
  width: 100%;
  height: 40px;
  background: linear-gradient(270deg, #4b61dc, #15d1b8);
  transition: all 0.3s;
  &:hover {
    transform: scale(1.02);
  }
  cursor: pointer;
}

.bottomBtnCN {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  text-align: center;
  margin-top: 20px;

  .join {
    cursor: pointer;
    border-bottom: 2px solid #ffffff00;
    padding: 0 3px;
    padding-bottom: 2px;
    transition: all 0.3s;
    &:hover {
      border-bottom: 2px solid #ffffff;
    }
  }
}

.bottomBtnEN {
  padding: 0 10px;
  color: #fff;
  text-align: center;
  margin-top: 20px;

  .join {
    cursor: pointer;
    border-bottom: 2px solid #ffffff00;
    padding: 0 3px;
    padding-bottom: 2px;
    transition: all 0.3s;
    &:hover {
      border-bottom: 2px solid #ffffff;
    }
  }
}
.videoBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

.el-form-item {
  background: rgb(0 0 0 / 10%);
  border: 1px solid #ffffff2d;
  border-radius: 5px;
}

.el-input {
  background: transparent;
  // 子组件 scoped 无效，使用 :deep
  :deep(.el-input__wrapper) {
    padding: 0;
    background: transparent;
    box-shadow: none;

    .el-input__inner {
      color: #fff;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #fff;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      // 设置输入框自动填充的延迟属性
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
