<template>
  <div class="header">
    <div class="log"></div>
    <div>
      <!-- 未登录 -->
      <div v-show="loginstatus">
        <ul class="headList2">
          <!-- 首页 -->
          <!-- <li @click="handelJump(`/Home`)" disabled>{{ $t(`login.home`) }} </li> -->
          <!-- 数据图表 -->
          <!-- @click="handelJump(`/`)">{{$t(`login.Charts`)}}</el-menu-item> -->
          <!-- <li @click="handelJump(`/`)" disabled>{{ $t(`login.Charts`) }} </li> -->

          <!-- 登录 -->
          <li @click="handelLogin" v-show="loginstatus">
            {{ $t("login.btn") }}
          </li>
          <!-- 注册 -->
          <li class="registered" v-show="loginstatus" @click="clickregistered">
            {{ $t("login.registered") }}
          </li>
          <!-- 语言 -->
          <li class="langs" @click="handelSwitching">{{ langs }}</li>
        </ul>
      </div>
      <!-- 登录后 -->
      <div v-show="!loginstatus">
        <!-- 更新版本页头 -->
        <div class="">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demoNew"
            mode="horizontal"
            style="width: 100%"
            background-color="#383d71"
            text-color="#fff"
            active-text-color="#f7931a"
          >
            <!-- <el-menu-item index="1"   @click="handelJump(`/Home`)" disabled >{{$t(`login.home`)}}</el-menu-item> -->
            <el-menu-item index="2" @click="handelJump(`/`)">{{
              $t(`login.Charts`)
            }}</el-menu-item>
            <!-- <el-menu-item index="3" disabled>{{$t(`login.researchReport`)}}</el-menu-item> -->

            <el-submenu index="4" id="submenuBox">
              <template slot="title">
                <span style="text-transform: none">{{
                  userName
                }}</span></template
              >
              <el-menu-item index="4-1" @click.native="handelPeople">{{
                $t(`login.personal`)
              }}</el-menu-item>
              <el-submenu index="4-2">
                <template slot="title">{{
                  $t(`login.customerService`)
                }}</template>
                <el-menu-item index="4-2-1" @click.native="handelHelp">{{
                  $t(`login.submitWork`)
                }}</el-menu-item>
                <!-- <el-menu-item index="4-2-2" >{{$t(`login.historicalWork`)}}</el-menu-item> -->
                <!-- <el-menu-item index="4-2-3" >{{$t(`login.onlineService`)}}</el-menu-item> -->
              </el-submenu>
              <!-- 消息订阅  -->
              <el-menu-item index="4-3" @click.native="handelJump(`/Alarm`)">{{
                $t(`login.subscribeBoard`)
              }}</el-menu-item>
              <!-- 账号升级 -->
              <!-- <el-submenu index="4-4">              
                <template slot="title">{{$t(`login.accountUpgrade`)}}</template>
                <el-menu-item index="4-4-1"   @click.native="handelJump(`/privilegeLevel`)">{{$t(`login.accountUpgrade`)}}</el-menu-item>
                <el-menu-item index="4-4-2">{{$t(`login.HistoryRecord`)}}</el-menu-item>                
              </el-submenu> -->
              <!-- <el-menu-item  index="4-5" v-show="identityLabel == `support` || identityLabel == `verifier`|| identityLabel == `admin`" >{{ $t(`login.publishResearchReport`) }}</el-menu-item>    -->
              <el-submenu
                index="4-6"
                v-show="
                  identityLabel == `accounting` || identityLabel == `admin`
                "
              >
                <!-- 财务管理 -->
                <template slot="title">{{ $t(`login.finance`) }}</template>
                <el-menu-item
                  index="4-6-1"
                  @click.native="handelJump(`/BackgroundAddress`)"
                  >{{ $t(`login.backgroundAddress`) }}</el-menu-item
                >
                <el-menu-item
                  index="4-6-2"
                  @click.native="handelJump(`/RechargeRecord`)"
                  >{{ $t(`login.dataStatistics`) }}</el-menu-item
                >
              </el-submenu>
              <!-- 客服管理 -->
              <el-menu-item
                index="4-7"
                @click.native="handelJump(`/HelpBackstage`)"
                v-show="identityLabel == `admin`"
                >{{ $t(`login.CustomerManagemen`) }}</el-menu-item
              >
              <!-- <el-menu-item  index="4-8" @click.native="handelJump(`/RechargeRecord`)"  v-show="identityLabel == `admin`" >{{ $t(`login.dataStatistics`) }}</el-menu-item>   -->
              <el-menu-item index="4-9" @click.native="handelExit">{{
                $t("login.exit")
              }}</el-menu-item>
            </el-submenu>
            <!-- <el-menu-item index="5" @click.native="handelJump(`/privilegeLevel`)">{{$t(`login.accountUpgrade`)}}</el-menu-item> -->
            <!-- <el-menu-item index="6" @click.native="handelJump(`/Alarm`)">{{$t(`login.subscribeBoard`)}}</el-menu-item> -->
            <el-menu-item index="7" @click="handelSwitching">{{
              langs
            }}</el-menu-item>
          </el-menu>

          <ul class="headList2">
            <!-- 首页 -->
            <!-- <li @click="handelJump(`/Home`)">主页</li>
            <li @click="handelJump(`/`)">数据图表</li>
            <li @click="handelJump(`/research`)">研究报告</li> -->
            <!-- 个人中心 -->
            <!-- <li class="help">
              <el-dropdown
                trigger="click"
                :modal-append-to-body="true"
                szie="small"
                class="loginMenu"
              >
                <span class="el-dropdown-link">
                  {{ $t("login.personal") }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>

                <el-dropdown-menu slot="dropdown" class="header-new-dro">
                  <el-dropdown-item @click.native="handelPeople">
                    <span class="el-dropdown-link" style="text-transform: none">
                      {{ userName }}
                    </span></el-dropdown-item
                  >
              
                  <el-dropdown-item @click.native="handelHelp">{{
                    $t(`login.customerService`)
                  }}</el-dropdown-item>
                  <el-dropdown-item @click.native="handelJump(`/Alarm`)">
                    {{ $t(`login.subscribeBoard`) }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="handelJump(`/privilegeLevel`)"
                  >
                    账号升级
                  </el-dropdown-item>
                  <el-dropdown-item>发布研报</el-dropdown-item>
                  <el-dropdown-item>财务管理</el-dropdown-item>
                  <el-dropdown-item @click.native="handelJump(`/HelpBackstage`)"
                    >客服管理</el-dropdown-item
                  >
                  <el-dropdown-item>数据统计</el-dropdown-item>
                  <el-dropdown-item @click.native="handelExit">
                    {{ $t("login.exit") }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li @click="handelJump(`/Alarm`)">
              {{ $t(`login.subscribeBoard`) }}
            </li>
            <li @click="handelJump(`/privilegeLevel`)">升级账号</li>
            <li></li>
           
            <li class="langs" @click="handelSwitching">{{ langs }}</li> -->
          </ul>
        </div>
      </div>
    </div>

    <!-- 注册弹窗 -->
    <el-dialog
      class="registeredBox"
      :append-to-body="true"
      :modal-append-to-body="false"
      :title="$t('login.registered')"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="handelRegister"
    >
      <el-form class="registeredForm" :model="registered">
        <!-- 邮箱 -->
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t("login.mailbox") }}</span>
          <el-input
            @blur="handelFocus"
            :placeholder="$t(`login.placeholderTitle`)"
            v-model="registered.email"
            size="small"
            autocomplete="off"
          ></el-input>
          <span v-show="rewriteEmail" class="rewriteEmail">{{
            $t(`login.rewriteEmail`)
          }}</span>
        </el-form-item>
        <el-form-item class="registeredUserBox">
          <span
            ><span class="mandatory">*</span
            >{{ $t("login.registeredName") }}</span
          >
          <el-input
            :placeholder="$t(`login.placeholderTitle`)"
            v-model="registered.userName"
            size="small"
            autocomplete="off"
            class="inputBox"
          ></el-input>
          <p class="prompt">{{ $t(`login.userPrompt`) }}</p>
        </el-form-item>
        <!--注册密码 -->
        <el-form-item class="registeredPasswordBox">
          <span
            ><span class="mandatory">*</span>{{ $t("login.password") }}</span
          >
          <el-input
            :placeholder="$t(`login.placeholderTitle`)"
            size="small"
            v-model="registered.password"
            show-password
          ></el-input>
          <p class="prompt">{{ $t(`login.passwordPrompt`) }}</p>
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span
            >{{ $t(`login.ConfirmNewPassword`) }}</span
          >
          <el-input
            v-model="ConfirmNewPsd"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 电话 -->
        <!-- <el-form-item>
          <span>{{ $t("login.phone") }}</span>
          <el-input  :placeholder="$t(`login.placeholderTitle`)" size="small" v-model="registered.phone"></el-input>
        </el-form-item> -->
        <!-- 验证码 -->
        <el-form-item class="authCode">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="small"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="registered.emailCode"
            ></el-input>
          </div>
          <!-- 获取验证码 -->
          <el-button
            size="small"
            :disabled="codeBtn.btnStatus"
            :class="{ forbban: codeBtn.btnStatus }"
            @click="handelEmailCode"
            type="success"
            class="emailCodeButton"
            >{{ $t(codeBtn.btnText) }}</el-button
          >
        </el-form-item>

        <!-- 勾选同意 -->
        <div class="checkBox">
          <input type="checkbox" v-model="check" @click="checkbox($event)" />
          <span>{{ $t("login.terms") }}</span>
        </div>
        <div class="describe">
          <p v-show="show">{{ $t("login.agree") }}</p>
          <p>
            {{ $t("login.areAccount") }}
            <span @click="handelLogin">{{ $t("login.btn") }}</span>
          </p>
          <!-- <p>Haven't received email confirmation? Resend Confirmation Email</p> -->
        </div>
      </el-form>
      <div class="langBox">
        <el-radio
          class="radio"
          @change="handelRadio('zh')"
          v-model="radio"
          label="zh"
          >简体中文</el-radio
        >
        <el-radio
          class="radio"
          @change="handelRadio('en')"
          v-model="radio"
          label="en"
          >English</el-radio
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">{{
          $t("login.cancel")
        }}</el-button>
        <!-- 点击注册 -->
        <el-button type="primary" @click="handelRegisteredEmail" size="small">{{
          $t("login.registered")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 登录弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      class="loginBOx"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="$t('logins.data')"
      :visible.sync="dialogLoginVisible"
      style="z-index: 9999"
      @close="handelCancel"
    >
      <!-- :before-close="handelClose" -->
      <el-form
        class="loginForm"
        :model="form"
        ref="loginForm"
        @keydown.enter.native="handleSubmit"
      >
        <!-- 用户名 -->
        <el-form-item class="userBox">
          <span
            ><span class="mandatory">*</span>{{ $t("login.userName") }}</span
          >
          <el-input
            type="text"
            v-model="form.userName"
            :placeholder="$t(`login.PleaseEnterYourUserName`)"
            size="middle"
            autocomplete="on"
            name="userName111"
            id="enterName"
            class="enterName"
          ></el-input>
          <span class="prompt">{{ $t(`login.userPrompt`) }} </span>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item class="passwordBox1">
          <span
            ><span class="mandatory">*</span>{{ $t("login.password") }}</span
          >
          <el-input
            size="middle"
            :placeholder="$t(`login.PleasePassword`)"
            type="password"
            v-model="form.password"
            show-password
            class="enterName"
          ></el-input>
          <span class="prompt">{{ $t(`login.passwordPrompt`) }} </span>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item v-show="authCodeShow" class="authCode">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="middle"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="form.code"
            ></el-input>
          </div>
          <div>
            <img class="codeImg" :src="codeSrc" alt="" />
            <i @click="handelCode" class="icon el-icon-refresh"></i>
          </div>
        </el-form-item>

        <!-- 没有账户？ 注册 -->
        <div class="loginDescribe">
          <p>
            {{ $t("login.account") }}
            <span @click="clickregistered" style="color: #48a2ff">
              {{ $t("login.registered") }}</span
            >
          </p>
          <!-- 忘记密码？ 重置密码 -->
          <p>
            {{ $t("login.forgotPassword") }}
            <span @click="handelResetPassword" style="color: #48a2ff">{{
              $t("login.resetPassword")
            }}</span>
          </p>
          <!-- 邮件 -->
          <!-- <p>
            Haven't received email confirmation?
            <span @click="dialogEmailVisible = true">
              Resend Confirmation Email</span
            >
          </p> -->
        </div>
      </el-form>
      <div class="langBox">
        <el-radio
          class="radio"
          @change="handelRadio('zh')"
          v-model="radio"
          label="zh"
          >简体中文</el-radio
        >
        <el-radio
          class="radio"
          @change="handelRadio('en')"
          v-model="radio"
          label="en"
          >English</el-radio
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handelCancel" size="small">{{
          $t("login.cancel")
        }}</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          size="small"
          class="loadingBtn"
          :loading="loginLoading"
        >
          <span element-loading-spinner="el-icon-loading"></span>
          {{ $t("login.login") }}</el-button
        >
        <!-- <el-button
          type="primary"
          @click="handleSwitchLanguage"
          size="small"
          class="loadingBtn"
        >
          <span
            v-loading="loginLoading"
            element-loading-spinner="el-icon-loading"
          ></span>
          {{ $t("login.switchLanguages") }}</el-button
        > -->
        <!-- <el-button  :plain="true" @click="open4">1</el-button> -->
      </div>
    </el-dialog>
    <!-- 重置密码弹窗输入邮箱 -->
    <!-- @keydown.enter.native="handelResetPasswordEmail" -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="$t(`login.resetPassword`)"
      :visible.sync="dialogPasswordVisible"
      class="passwordBox"
    >
      <el-form
        class="passwordForm"
        :model="passwordForm"
        @submit.native.prevent
      >
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
          <el-input
            v-model="passwordForm.email"
            size="small"
            autocomplete="off"
            @keydown.enter.native="handelResetPasswordEmail"
          ></el-input>
        </el-form-item>

        <p>{{ $t(`login.inputEmail`) }}</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPasswordVisible = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button
          :loading="ResetPasswordLoading"
          type="primary"
          @click="handelResetPasswordEmail"
          size="small"
          >{{ $t(`login.emailVerification`) }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 重置密码填写新密码 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t(`login.resetPassword`)"
      :visible.sync="dialogNewPassword"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
    >
      <el-form class="passwordForm" :model="passwordForm">
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
          <el-input
            v-model="passwordForm.email"
            disabled
            size="small"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 输入新密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.newPassword`) }}</span
          >
          <el-input
            v-model="passwordForm.password"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
          <p class="prompt" style="margin-top: 5px">
            {{ $t(`login.passwordPrompt`) }}
          </p>
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span
            >{{ $t(`login.ConfirmNewPassword`) }}</span
          >
          <el-input
            v-model="ConfirmNewPassword"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="authCode">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="small"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="passwordForm.resetPwdCode"
            ></el-input>
          </div>
          <p style="margin-top: 2px">{{ $t(`login.emailCode`) }}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewPassword = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button type="primary" @click="handelNewPassword" size="small">{{
          $t(`login.resetPassword`)
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 重置邮箱弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t(`login.sendEmail`)"
      :visible.sync="dialogEmailVisible"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
    >
      <el-form class="passwordForm" :model="form">
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
          <el-input
            v-model="form.name"
            size="small"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <p>{{ $t(`login.inputEmail`) }}</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEmailVisible = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button
          type="primary"
          @click="dialogEmailVisible = false"
          size="small"
          >{{ $t(`login.submit`) }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 登录才能查看页面遮罩 -->
    <div class="loginMain" v-show="lgMask">
      <el-row>
        <el-col :span="24">
          <p>{{ $t(`login.loginMask`) }}</p>
          <div class="lodinMaskBox">
            <el-tag class="clickTag">{{ $t(`login.btn`) }}</el-tag>
            <el-tag class="clickTag" type="success">{{
              $t(`login.registered`)
            }}</el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 注册通知弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t(`login.registrationNotice`)"
      :visible.sync="registrationNotice"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
    >
      <div class="registrationNoticeBox">
        <p>{{ $t(`login.registrationPrompt`) }}</p>
        <p>{{ $t(`login.registrationPrompt2`) }}</p>
        <p>{{ $t(`login.registrationPrompt3`) }}</p>
        <p>{{ $t(`login.registrationPrompt4`) }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registrationNotice = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button type="primary" @click="goRegister" size="small">{{
          $t(`login.GoRegistered`)
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { POST, Delete } from "../api/http";
import { encryption } from "../util/fun";
import { Debounce } from "../util/processingData"; //防抖

export default {
  data() {
    return {
      registrationNotice: false,
      activeIndex: "",
      show: false,
      dialogEmailVisible: false,
      dialogPasswordVisible: false,
      dialogLoginVisible: false,
      dialogFormVisible: false,
      form: {
        userName: "",
        password: "",
        code: "",
        uuid: "",
      },
      formLabelWidth: "120px",
      buttonShow: false,
      token: "",
      loginstatus: true,
      loginLoading: false,
      userName: "",
      loginTime: "",
      registered: {
        userName: "",
        password: "",
        // phone: "",
        email: "",
        emailCode: "",
      },
      check: false,
      lang: "",
      radio: "",
      langs: "",
      codeSrc: "",
      token: null,
      registeredEmailCode: {
        userName: "",
        email: "",
      },
      dialogregisterCode: false,
      passwordForm: {
        email: "",
        password: "",
        resetPwdCode: "",
      },
      dialogNewPassword: false,
      passwordCode: {
        email: "",
      },
      codeBtn: {
        btnStatus: false,
        btnText: "login.getCode",
        btnType: "primary",
      },
      codeTimer: null,
      authCodeShow: false,
      lgMask: false,
      rewriteEmail: false,
      ConfirmNewPassword: "",
      checkVerification: "",
      outTimer: "",
      identity: {},
      identityLabel: "",
      navItem: "",
      ResetPasswordLoading: false,
      ConfirmNewPsd: "",
    };
  },

  mounted() {
    this.radio = this.$i18n.locale;
    if (this.$i18n.locale == "en") {
      this.langs = "简体中文";
    } else if (this.$i18n.locale == "zh") {
      this.langs = "English";
    }



    //取值token
    this.token = localStorage.token;
    // this.lgMask = localStorage.getItem("lgMask")
    this.dialogLoginVisible = JSON.parse(
      localStorage.getItem("dialogLoginVisible")
    );
    this.userName = localStorage.getItem("username");
    this.navItem = JSON.parse(localStorage.getItem("params"));
    //监听localstorage改变赋值
    window.addEventListener("setItem", (e) => {
      this.userName = localStorage.getItem("username") || ""; //用户名直接在缓存拿的
      this.loginTime = localStorage.getItem("loginTime");
      this.token = localStorage.token;
      this.dialogLoginVisible = JSON.parse(
        localStorage.getItem("dialogLoginVisible")
      );
      let arr = ["token", "username", "loginTime"];
      if (arr.includes(e.key)) {
        // this.lgMask = localStorage.getItem("lgMask")

        console.log();
      }
      this.navItem = JSON.parse(localStorage.getItem("params"));
    });
    this.show = false;

    this.identityLabel =
      JSON.parse(localStorage.getItem("identity")).roleKey || "";

    this.storeName = this.$store.state.user.userName;
  },
  watch: {
    //监听有token 登录弹窗不弹出
    token(val) {
      console.log(val,"token ");
      if (val) {
        this.dialogLoginVisible = false;
        this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
        this.loginstatus = false;
      } else {
        // this.dialogLoginVisible = false;
        // this.$addStorageEvent(
        //   1,
        //   "dialogLoginVisible",
        //   JSON.stringify(this.dialogLoginVisible)
        // );
        this.loginstatus = true;
        this.userName = "";
      }
    },
    //监听时间登录过期弹窗
    loginTime(val) {
      if (!val) {
        localStorage.removeItem("token");
        localStorage.removeItem("loginTime");
        //弹出警告
        if (this.$i18n.locale == "zh") {
          // this.$message({
          //   message: "登录超时，请重新登录",
          //   type: "warning",
          //   customClass: "messageClass",
          // });
        } else if (this.$i18n.locale == "en") {
          this.$message({
            message: "Login timed out. Please log in again",
            type: "warning",
            customClass: "messageClass",
          });
        }

        // this.dialogLoginVisible = true;
        // this.$addStorageEvent(
        //   1,
        //   "dialogLoginVisible",
        //   JSON.stringify(this.dialogLoginVisible)
        // );
        this.loginstatus = true;
      }
    },

    //监听登录弹窗弹出LOading失效
    dialogLoginVisible(val) {
      if (val) {
        this.dialogFormVisible = false;
      }
      this.$addStorageEvent(1, "loading", val);
    },
    //监听注册弹窗弹出LOading失效
    dialogFormVisible(val) {
      if (val) {
        this.dialogLoginVisible = false;
        this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
      } else {
        this.show = false;
      }
    },

    //监听语言切换
    "$i18n.locale"(newValue) {
      this.radio = this.$i18n.locale;
      if (newValue == "en") {
        this.langs = "简体中文";
      } else if (newValue == "zh") {
        this.langs = "English";
      }

    


    },
  },
  computed: {
    //映射VUEX数据使用
    ...mapState({
      loginUserName: (state) => state.user.userName,
    }),
  },
  methods: {
    //点击注册跳转至通知页
    clickregistered() {
      this.registrationNotice = true;
      this.dialogLoginVisible = false;
      this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
    },
    goRegister() {
      this.dialogFormVisible = true;
      this.registrationNotice = false;
      this.dialogLoginVisible = false;
      this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
    },
    //请求登录验证码图片
    fetchCode: Debounce(async function () {
      let list = await this.$API.getVerification();
      let src = list.data.img;
      this.codeSrc = "data:image/gif;base64," + src;
      this.form.uuid = list.data.uuid;
    }, 1000),

    //请求注册验证码图片
    fetchCodeEmail: Debounce(async function (userName, email) {
      let list = await POST(userName, email);

      //获取验证码后的提示信息
      this.checkVerification = list.data.data;
      if (list.data.code == 200) {
        this.$message({
          message: this.$t(`login.sendEmailCode`),
          type: "success",
          customClass: "messageClass",
        });
      } else {
        //获取验证码失败清除按钮倒计时
        clearTimeout(this.outTimer);
        clearInterval(this.codeTimer);
        //取消按钮禁用
        this.codeBtn.btnStatus = false;
        //按钮文字改成获取验证码
        this.codeBtn.btnText = "login.getCode";
      }
    }, 500),
    //请求重置密码验证码
    fetchPasswordCode: Debounce(async function (address, email) {
      this.ResetPasswordLoading = true;
      let list = await POST(address, email);
      //  let list = await this.$API.getpasswrodCode()
      if (list.data.code == 200) {
        this.$message({
          message: this.$t(`login.sendEmailCode`),
          type: "success",
          customClass: "messageClass",
        });
        this.dialogNewPassword = true;
        this.dialogPasswordVisible = false;
      } else {
        // this.$message({
        //   message: this.$t(`login.newPasswordCodeFail`),
        //   type: "error",
        //   customClass: "messageClass",
        // });
        this.dialogNewPassword = false;
        this.dialogPasswordVisible = true;
      }
      this.ResetPasswordLoading = false;
    }, 500),

    //请求重置密码
    fetchNewPassword: Debounce(async function (address, data) {
      let list = await POST(address, data);
      //  let list = await this.$API.getpasswrodCode()
      if (list.data.code == 200) {
        this.$message({
          message: this.$t(`login.newPasswordSuccess`),
          type: "success",
          customClass: "messageClass",
        });
        //输入新密码弹窗隐藏 显示登录弹窗
        this.dialogNewPassword = false;
        this.dialogLoginVisible = true;
        this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
        this.passwordForm.email = "";
        this.passwordForm.password = "";
        this.passwordForm.resetPwdCode = "";
        // this.dialogPasswordVisible = false;
      } else {
        // this.$message({
        //   message: this.$t(`login.newPasswordCodeFail`),
        //   type: "warning",
        // });
        this.dialogNewPassword = true;
      }
    }, 500),
    //请求个人中心
    async fetchPersonal() {
      const { data } = await this.$API.getpersonal();

      if (data.code == 200) {
        //拿到权限才跳转页面 关闭弹窗
        this.identity = data.data.role;
        this.identityLabel = data.data.role.roleKey;
        //存入用户等级信息
        this.$store.commit("handelIdentity", data.data.role);
        localStorage.setItem("identity", JSON.stringify(data.data.role));
        this.loginLoading = false;
        if (this.identityLabel) {
          if (this.$route.path !== "/") {
            this.$router.push({
              path: "/",
            });
          }
          // 登录成功刷新更新当前页面
          location.reload();
          this.dialogLoginVisible = false;
          this.loginstatus = false;
          this.authCodeShow = false;
          this.$addStorageEvent(
            1,
            "dialogLoginVisible",
            JSON.stringify(this.dialogLoginVisible)
          );
          this.form.userName = "";
          this.form.password = "";
          this.form.uuid = "";
          this.form.code = "";
        } else {
          //个人资料没拿到就删除token 重新登录
          localStorage.removeItem("token");
          this.form.userName = "";
          this.form.password = "";
          this.loginstatus = true;
          this.dialogLoginVisible = true;
          this.$addStorageEvent(
            1,
            "dialogLoginVisible",
            JSON.stringify(this.dialogLoginVisible)
          );
          this.$addStorageEvent(1, "token", "");
          localStorage.removeItem("username");
          localStorage.setItem("identity", JSON.stringify({}));
        }

        this.identity = data.data.role;
        this.identityLabel = data.data.role.roleKey;
        //存入用户等级信息
        localStorage.setItem("identity", JSON.stringify(data.data.role));
      }

    
      // this.personalList = data.data
    },
    //登录请求
    fetchLogin: Debounce(async function (address, data) {
      this.loginLoading = true;
      let list = await POST(address, data);

      //201 表示用户IP已变更
      if (list.data.code == 201) {
        //请求验证码
        this.fetchCode();
        this.authCodeShow = true;
        this.dialogLoginVisible = true;
        this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
        this.loginLoading = false;
        return;
      } else if (list.data.code == 200) {
        this.token = list.data.data.access_token;
        this.loginTime = list.data.data.expires_in;
        this.userName = list.data.data.userName;

        //存用户名 toekn 时间
        this.$store.commit("handelName", list.data.data.userName);
        this.storeName = list.data.data.userName;
        this.$addStorageEvent(1, "username", list.data.data.userName);
        this.$addStorageEvent(1, "token", list.data.data.access_token);
        this.$addStorageEvent(1, "loginTime", list.data.data.expires_in);

        //请求个人中心拿用户等级信息
        this.fetchPersonal();
        this.$addStorageEvent(1, "permissionMask", JSON.stringify(false));
      } else {
        this.loginLoading = false;
      }
    }, 500),

    //调用登出接口
    async handelDeleter(address, data) {
      let list = await Delete(address);
      this.$addStorageEvent(1, "maskShow", false);
    },
    //确认邮箱是否被注册
    async fetchCheckMail(email) {
      const data = await this.$API.getcheckMail(email);
      //邮箱已被注册 就不能点击获取验证码
      if (data.data.code == 301) {
        this.codeBtn.btnStatus = true;
        this.rewriteEmail = true; //警告邮箱已注册
      } else {
        this.codeBtn.btnStatus = false;
        this.rewriteEmail = false;
      }
    },
    //点击登录弹窗的取消
    handelCancel() {
      for (let key in this.form) {
        //关闭清空

        this.form[key] = null;
      }
      let flag = false;
      this.$addStorageEvent(1, "dialogLoginVisible", JSON.stringify(flag));
      this.dialogLoginVisible = false;
      this.loginLoading = false;
    },

    //点击登录弹窗切换语言
    handelRadio(value) {
      this.$i18n.locale = value;
      this.radio = this.$i18n.locale;
      localStorage.setItem("lang", value);
    },
    //点击页面内切换语言
    handelSwitching() {
      if (this.$i18n.locale == "en") {
        this.langs = "English";
        this.$i18n.locale = "zh";
      } else if (this.$i18n.locale == "zh") {
        this.langs = "简体中文";
        this.$i18n.locale = "en";
      }
      localStorage.setItem("lang", this.$i18n.locale);

    


    },
    //点击刷新验证码
    handelCode() {
      this.fetchCode();
    },
    //点击登录
    handleSubmit() {
      if (!this.form.userName) {
        this.$message({
              message: this.$t(`login.userNamePrompt`),
              type: "error",
              customClass: "messageClass",
            });
        return
      }

      if (!this.form.password) {
        this.$message({
            message: this.$t(`login.passwordPrompt1`),
            type: "error",
            customClass: "messageClass",
          });
        return
      }

      //去空格
      this.form.userName = this.form.userName.trim();
       this.form.password = this.form.password.trim();

      if (this.form.userName !== "admin") {
       
        //邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        let isMailbox = emailRegex.test(this.form.userName);
      
        if (!isMailbox ) {
        
          //用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
          const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
          const isValid = regex.test(this.form.userName);
      
          if (!isValid) {
            // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
            this.$message({
              message: this.$t(`login.userNamePrompt`),
              type: "error",
              customClass: "messageClass",
            });

            return;
          }
        }
        //密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
        let symbol = [];
        const regexPassword =
          /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式

        const PasswordIsValid = regexPassword.test(this.form.password);
        if (!PasswordIsValid) {
          // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
          this.$message({
            message: this.$t(`login.passwordPrompt1`),
            type: "error",
            customClass: "messageClass",
          });

          return;
        }
      }

      //加密
      const form = { ...this.form };
      form.password = encryption(this.form.password);

      this.fetchLogin("/auth/login", form);
    },
    //点击关闭
    handelClose() {
      this.dialogLoginVisible = false;
      this.$addStorageEvent(
        1,
        "dialogLoginVisible",
        JSON.stringify(this.dialogLoginVisible)
      );
    },
    //点击注册弹窗关闭X
    handelRegister() {
      this.check = false;
      this.registered.userName = "";
      this.registered.password = "";
      this.registered.email = "";
      this.registered.emailCode = "";
      this.rewriteEmail = false;
    },
    //点击退出
    handelExit() {
      this.handelDeleter("/auth/logout");
      localStorage.removeItem("token");
      //  this.$addStorageEvent(1, "token", "");
      this.form.userName = "";
      this.form.password = "";
      this.loginstatus = true;
      this.dialogLoginVisible = true;
      this.$addStorageEvent(
        1,
        "dialogLoginVisible",
        JSON.stringify(this.dialogLoginVisible)
      );
      this.$addStorageEvent(1, "token", "");
      localStorage.removeItem("username");
      // this.$addStorageEvent(1, "permissionMask", JSON.stringify(false));
      // let identity={
      //   roleId:0,
      //   roleName:"匿名用户",
      //   roleKey:"guest"

      // }
      localStorage.setItem("identity", JSON.stringify({}));
    },
    //点击获取邮箱验证码
    handelEmailCode() {
      this.registeredEmailCode.userName = this.registered.userName;
      this.registeredEmailCode.email = this.registered.email;
      if (
        //必须输入邮箱和用户名
        !(this.registeredEmailCode.userName && this.registeredEmailCode.email)
      ) {
        this.$message({
          message: this.$t(`login.warningEmailCode`),
          type: "error",
          customClass: "messageClass",
        });
        return;
      }
      this.fetchCodeEmail(`/auth/emailcode`, this.registeredEmailCode);

      // 获取验证码后禁用按钮
      this.codeBtn.btnStatus = true;
      // 按钮倒计时
      this.outTimer = setTimeout(() => {
        this.countDown(60);
      }, 5);
    },
    //点击注册弹窗的注册
    handelRegisteredEmail() {
      //判断同意条款是否选中
      if (!this.check) {
        this.show = true;
        // this.registered.userName = "";
        // this.registered.password = "";
        this.$message({
          message: this.$t(`login.check1`),
          type: "warning",
          customClass: "messageClass",
        });

        return;
      } else {
        this.show = false;
      }
      //判断密码不能为空
      if (!this.registered.password) {
        this.$message({
          message: this.$t(`login.passwordValidation`),
          type: "error",
          customClass: "messageClass",
        });
        return;
      }
      //判断两次密码必须相同
      if (this.registered.password !== this.ConfirmNewPsd) {
        this.$message({
          message: this.$t(`login.inconsistency`),
          type: "warning",
          customClass: "messageClass",
        });
        return;
      }

      //判断验证码不能为空
      if (!this.registered.emailCode) {
        this.$message({
          message: this.$t(`login.CodeFailNull`),
          type: "error",
          customClass: "messageClass",
        });
        return;
      }
      //判断邮箱不能为空或者格式是否正确
      // let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (this.registered.email == "" || !reg.test(this.registered.email)) {
        //弹出警告
        if (this.$i18n.locale == "zh") {
          this.$message({
            message: "请检查邮箱格式是否正确（邮箱不能为空）！",
            type: "error",
          });
        } else if (this.$i18n.locale == "en") {
          this.$message({
            message:
              "Please check the mailbox is correct (mailbox cannot be empty)!",
            type: "error",
            customClass: "messageClass",
          });
        }

        return;
      }
      if (this.rewriteEmail) {
        //判断邮箱已被注册不能发起请求
        //弹出警告
        this.$message({
          message: this.$t(`login.rewriteEmail`),
          type: "error",
          customClass: "messageClass",
        });

        return;
      }
      //判断用户是否点击了获取验证码 没有获取验证码随便输入不能点击注册\
      if (!this.checkVerification && !this.codeBtn.btnStatus) {
        this.$message({
          message: this.$t(`login.checkVerification`),
          type: "error",
          customClass: "messageClass",
        });
        return;
      }
      //用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
      const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
      const isValid = regex.test(this.registered.userName);
      if (!isValid) {
        // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
        this.$message({
          message: this.$t(`login.userNamePrompt`),
          type: "error",
          customClass: "messageClass",
        });

        return;
      }
      // 密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
      const regexPassword =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
      const PasswordIsValid = regexPassword.test(this.registered.password);
      if (!PasswordIsValid) {
        // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
        this.$message({
          message: this.$t(`login.passwordPrompt1`),
          type: "error",
          customClass: "messageClass",
        });

        return;
      }

      const registered = { ...this.registered };

      //加密
      registered.password = encryption(this.registered.password);

      this.fetchRegistered("/auth/register", registered);
    },

    //点击帮助
    handelHelp() {
      this.$router.push("help");
    },
    //个人中心
    handelPeople() {
      this.$router.push("/personal");
    },
    //注册请求
    async fetchRegistered(address, data) {
      let list = await POST(address, data);

      //注册成功关闭注册弹窗 邮箱输入码弹窗 弹出登录弹窗
      if (list.data.code == 200) {
        this.dialogFormVisible = false;
        this.dialogLoginVisible = true;
        this.$addStorageEvent(
          1,
          "dialogLoginVisible",
          JSON.stringify(this.dialogLoginVisible)
        );
        this.dialogregisterCode = false;
        this.registered.userName = "";
        this.registered.password = "";
        this.registered.email = "";
        this.registered.emailCode = "";
        this.ConfirmNewPsd = "";
        this.check = false;
        this.rewriteEmail = false;
      }
    },
    //点击获取重置密码验证码
    handelResetPasswordEmail() {
      if (!this.passwordForm.email) return;

      this.passwordCode.email = this.passwordForm.email;
      this.fetchPasswordCode(`/auth/resetPwdCode`, this.passwordCode);
      // if (code !== 200) {
      //   this.$message({
      //     message: this.$t(`login.newPasswordCodeFail`),
      //     type: "warning",
      //   });
      //   return;
      // }

      // this.dialogNewPassword = true;
      // this.dialogPasswordVisible = false;
    },
    //输入新密码，确认重置密码
    handelNewPassword() {
      //密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
      const regexPassword =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
      const PasswordIsValid = regexPassword.test(this.passwordForm.password);
      if (!PasswordIsValid) {
        // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
        this.$message({
          message: this.$t(`login.passwordPrompt1`),
          type: "error",
          customClass: "messageClass",
        });

        return;
      }

      //验证两次密码是否一致
      if (this.passwordForm.password !== this.ConfirmNewPassword) {
        this.$message({
          message: this.$t(`login.inconsistency`),
          type: "warning",
          customClass: "messageClass",
        });
        return;
      }

      if (!this.passwordForm.resetPwdCode) {
        this.$message({
          message: this.$t(`login.CodeFailNull`),
          type: "warning",
          customClass: "messageClass",
        });
        return;
      }

      const passwordForm = { ...this.passwordForm };

      //加密
      passwordForm.password = encryption(this.passwordForm.password);

      this.fetchNewPassword("/auth/resetPwd", passwordForm);
    },
    //判断CheckBOX是否选中
    checkbox(e) {
      // this.check = e.target.checked;
      this.check = !this.check;
    },
    //点击登录界面的重置密码按钮
    handelResetPassword() {
      this.dialogPasswordVisible = true;
      this.dialogLoginVisible = false;
      this.$addStorageEvent(
        1,
        "dialogLoginVisible",
        JSON.stringify(this.dialogLoginVisible)
      );
    },
    //点击注册界面的登录按钮
    handelLogin() {
      this.dialogLoginVisible = true;
      this.dialogFormVisible = false;
      this.$addStorageEvent(
        1,
        "dialogLoginVisible",
        JSON.stringify(this.dialogLoginVisible)
      );
    },
    //验证码倒计时
    countDown(val) {
      //判断定时器是否存在
      if (this.codeTimer) {
        clearInterval(this.codeTimer);
      }
      //按钮文字改成发送中
      this.codeBtn.btnText = "login.sending";
      this.codeBtn.btnStatus = false;
      //setTiemOut 执行一次
      // setInterval 不断执行，需要条件才会停止
      let tim = val;
      this.codeTimer = setInterval(() => {
        tim--;
        if (tim === 0) {
          clearInterval(this.codeTimer);
          this.codeBtn.btnStatus = false;
          //按钮文字改成获取验证码
          this.codeBtn.btnText = "login.getCode";
        } else {
          this.codeBtn.btnStatus = true;
          this.codeBtn.btnText = tim;
        }
      }, 1000);
    },
    //邮箱失焦验证是否注册过
    handelFocus() {
      setTimeout(() => {
        //添加定时器判断 失焦时要判断同时未关闭弹窗
        if (this.registered.email && this.dialogFormVisible) {
          this.fetchCheckMail(this.registered.email);
        }
      }, 100);
    },

    //清除倒计时
    clearCountDown() {
      this.codeBtn.btnStatus = false;
      this.codeBtn.btnText = "login.getCode";
      //清除倒计时
      clearInterval(this.codeTimer);
    },

    //跳转页面
    handelJump(address) {
      this.$router.push(address);
    },
  },
  beforeDestroy() {
    this.clearCountDown();
  },
};
</script>

<style lang="scss" scoped >
.header {
  position: relative;
  width: 100%;
  height: 60px;
  // background-color: red;
  // background: lavender;
  // background: #fff;
  // outline: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  line-height: 60px;
  color: #b3c0d1;
  left: 0%;
  top: 0%;
  z-index: 2000;
  padding: 0px 20px;
  // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: #383d71;
  box-shadow: 0px 2px 10px 2px #000;
  .headerNavBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    // background: red;
    padding: 0px 30px;
    height: 100%;

    // 头部导航菜单样式设置
    .el-menu {
      background: none;
      ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
        color: #fff;
        border: none !important;
        height: 100%;
        font-size: 14px;
      }
      .el-menu-item {
        color: #fff;
        border: none !important;
        font-size: 14px;
      }

      .el-menu-item:hover {
        background: none;
        color: #f7931a !important;
        font-weight: 500;
      }

      .el-menu--horizontal .el-menu .el-menu-item,
      .el-menu--horizontal .el-menu .el-submenu__title {
        font-size: 14px;
      }
    }
  }

  //   // 头部导航菜单样式设置 二级导航文字颜色设置
  ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
    // color: #fff;
    // background: none ;
    font-size: 14px;
  }
  .el-menu.el-menu--horizontal {
    border: none;
  }
}
// 头部导航菜单样式设置
::v-deep .el-menu--popup {
  background: none !important;
}

// 头部导航菜单样式设置
::v-deep .el-menu--popup-bottom-start {
  background: none !important;
}
// 头部导航菜单样式设置
//       ::v-deep   .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{

//         font-size: 14px;
//         background: rgba(0,0,0,0.8) ;
//          color: #fff ;
//       }
//  // 头部导航菜单样式设置
//       .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
//         font-size: 14px;
//         background: rgba(0,0,0,0.8) ;
//          color: #fff ;
//       }
//  // 头部导航菜单样式设置
//       ::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
//         font-size: 14px;
//         background: rgba(0,0,0,0.8) ;
//          color: #fff ;
//       }
.registrationNoticeBox {
  height: 200px;
  p {
    color: rgba(0, 0, 0, 0.8) !important;
    margin-top: 10px !important;
  }
}

.langs {
  // outline: 1px solid red;
  cursor: pointer;
  text-decoration: underline;
}

.headList2 .langs:hover {
  color: #f7931a;
}
.el-dialog {
  z-index: 9999;
}
.headList,
.headList2 {
  cursor: pointer;
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  padding-inline-start: 0px;
  margin-block-end: 0px;
  margin-block-start: 0px;
  top: 0px;
  color: #fff;
}
.headList {
  left: 50px;
}

.headList2 {
  right: 50px;
}
::-webkit-scrollbar {
  /* //隐藏滚动条 */
  width: 0 !important;
}
::-webkit-scrollbar {
  /* //隐藏滚动条 */
  width: 0 !important;
  height: 0;
}

.header li {
  list-style: none;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header li:hover {
  // color: #000;
  color: #f7931a;
}
.headList li {
  margin-left: 15px;
}
.headList2 li {
  margin-left: 15px;
}
.headList2 li {
  padding: 5px 5px;
}
.headList li {
  padding: 5px 5px;
}
.registered {
  /* outline: 1px solid red; */
  text-align: center;
  outline: 1px solid rgba(0, 0, 0, 0.2);
}
/* 注册弹窗样式 */
.el-dialog {
  z-index: 999999;
}
.registeredBox {
  /* background: hotpink; */
  z-index: 99998 !important;
  width: 1000px;
  margin: auto;
  border: none;
  outline: none;
  /* background: #b3c0d1; */
  text-align: left;
}
.registeredForm {
  /* background: gold; */
  margin-top: -30px;
}
.el-form-item {
  /* background: paleturquoise; */
  margin: 5px;
  // height: 100px;
}
.registeredUserBox {
  // outline: 1px solid red;
  height: 105px;
  position: relative;
  .prompt {
    position: absolute;
    top: 80px;
    left: 0px;
    height: 20px;
    line-height: 20px;
    //  display: none;
    font-size: 12px;
    color: #ff6365;
    margin: 0;
  }

  // .inputBox:hover + .prompt{
  //   display: inline-block;
  // }
}
.registeredPasswordBox {
  height: 105px;
  position: relative;
  .prompt {
    position: absolute;
    top: 80px;
    left: 0px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    //  display: none;
    font-size: 12px;
    color: #ff6365;
  }
}

/* ----------注册弹窗勾选--------------- */
.checkBox {
  display: flex;
  // outline: 1px solid red;
  /* outline: 1px solid red; */
  width: 100%;
  height: 40px;
  position: relative;
  align-items: center;
  margin-bottom: 10px;
}
.checkBox span {
  display: inline-block;
  /* width: 500px; */
  /* height: 50px; */
  line-height: 18px;
  /* outline: 1px solid red; */
  font-size: 12px;
  margin-left: 5px;
  padding: 0 5px;
  text-align: left;
}

.describe {
  height: 25px;
  /* outline: 1px solid red; */
  display: flex;
  flex-direction: column;
  position: relative;
  /* margin-top: -10px; */
  /* background: #b3c0d1; */
}
.describe p:nth-of-type(1) {
  color: #ff6365;
  position: absolute;
  top: -16px;
  left: 30px;
}
.describe p:nth-of-type(2) {
  // margin-top: 10px;
  padding: 5px 0px;
}
.describe p {
  // outline: 1px solid red;
  /* outline: 1px solid red; */
  line-height: 15px;
  margin: 2px 0px;
  text-align: left;
  font-size: 12px;
}
.mandatory {
  color: #ff6365;
}
.emailCodeButton {
  // outline: 1px solid red;
  // padding: 5px 10px;

  color: #67c23a;
  background: #f0f9eb;
  border-radius: 4px;
  cursor: pointer;
}
.emailCodeButton:hover {
  background: #fdf6ec;
  color: rgba(0, 0, 0, 0.5);
}
.forbban {
  // background: rgba(0, 0, 0, 0.2);
  width: 100px;
  text-align: center;
  // padding: 0px 10px;
  // color: #fff;
  // outline: 1px solid  rgba(0, 0, 0, 0.2);
}
.rewriteEmail {
  display: inline-block;
  color: #ff6365;
  // outline: 1px solid red;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 6px;
  top: 75px;
}
/* -------------登录弹窗样式---------------------- */
.loginBOx {
  /* background: #ff6365; */
  z-index: 99998 !important;
  width: 60%;
  /* height: 60%; */
  margin: 0 auto;
}
.loginForm {
  /* background: goldenrod; */
  margin-top: -40px;
  .authCode {
    // outline: 1px solid red;
    // display: flex;
    // justify-content: space-between;

    // background: gold;
    margin-top: 10px;
    // display: flex;
    // flex-direction: column;
    // flex-wrap: wrap;
    // justify-content: space-between;
    div:nth-of-type(1) {
      //  outline: 1px solid red;
      width: 100%;
    }

    div:nth-of-type(2) {
      //  outline: 1px solid red;

      .codeImg {
        // position: absolute;
        // top: 0px;
        // right: 0px;
        // outline: 1px solid red;
        margin-top: 5px;
        width: 150px;
        height: 39px;
      }
      .icon {
        font-size: 20px;
        cursor: pointer;
        // outline: 1px solid red;
        position: absolute;
        top: 95px;
        left: 157px;
      }
    }
  }
}

/* .loginDescribe{
  background: #b3c0d1;
} */
.loginDescribe p {
  line-height: 10px;
  font-size: 11px;
}
.loginDescribe p span {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 500;
  cursor: pointer;
}
.el-form-item span {
  font-size: 12px;
  /* outline: 1px solid red; */
}
.langBox {
  // outline: 1px  solid red;
  /* outline: 1px  solid red; */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 5px 0px;
}
.radio {
  /* outline: 1px  solid red; */
  font-size: 10px;
  /* color: red; */
}
/* .el-form-item .el-input__inner{
  margin-top: -20px;
} */
.dialog-footer {
  /* background: #ff6365; */
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: -30px;
}
.loadingBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.userBox {
  // outline: 1px solid red;
  height: 100px;
  position: relative;

  .prompt {
    // outline: 1px solid red;
    position: absolute;
    top: 80px;
    left: 0px;
    height: 20px;
    line-height: 20px;
    display: none;
    font-size: 12px;
    color: #ff6365;
  }
  .enterName:hover + .prompt {
    display: inline-block;
    transition: 0.5s;
  }
}

.passwordBox1 {
  // outline: 1px solid red;
  height: 110px;
  position: relative;

  .prompt {
    // outline: 1px solid red;
    position: absolute;
    top: 80px;
    left: 0px;
    height: 20px;
    line-height: 20px;
    color: #ff6365;
    display: none;
    font-size: 12px;
  }
  .enterName:hover + .prompt {
    display: inline-block;
    transition: 0.5s;
  }
}

/* -----------重置密码弹窗---------------- */
.passwordBox {
  /* background: #b3c0d1; */
  width: 70%;
  margin: 0 auto;
  z-index: 99998 !important;
}
.passwordForm {
  /* background: #ff6365; */
  margin-top: -40px;
}
.passwordBox p {
  /* outline: 1px solid red; */
  line-height: 15px;
  color: #ff6365;
  margin-top: -5px;
  padding-left: 2px;
  font-size: 12px;
}
// 登录才能查看页面的遮罩
.loginMain {
  z-index: 9999 !important;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 84%;
  height: 100vh;
  // outline: 1px solid red;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    // color: #000;
  }
  .lodinMaskBox {
    // outline: 1px solid red;
    display: flex;
    justify-content: space-around;
    // width: 100%;
  }
  .clickTag {
    display: inline-block;
    // outline: 1px solid red;
    padding: 0px 30px;
  }
}
</style>

<style lang="scss" scoped>
.header .v-modal {
  //所有弹窗的默认遮罩
  z-index: 99997 !important;
}
.el-input__inner {
  border-color: rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  margin-top: -20px;
  // background: red;
}
::v-deep.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}
// .el-popper[x-placement^=bottom] .popper__arrow{
//   display: none !important;
// }
// .el-popper .popper__arrow::after{
//   display: none !important;
// }
.el-input__inner:hover {
  border-color: rgba(0, 0, 0, 0.6);
  // color: #f7931a;
}

// ---------登录后显示的选择导航-------------------
.loginMenu {
  position: relative;
  color: rgba(0, 0, 0, 0.5);
  color: #fff;
  // z-index: 99999 !important;
}
.header-new-dro {
  //点击用户名 下拉框层级改到最高 高于遮罩

  z-index: 99999 !important;
}

.loginMenu:hover {
  color: #f7931a;
  // font-weight: 600;
}
.header-new-dro {
  background: rgba(0, 0, 0, 0.7);
  margin-left: 20px;
  // position: absolute;
  // width: 7%;
  // right: 0px;
  margin-left: 110px !important;
  // outline: 1px solid  red;
  z-index: 99;
}
.el-dropdown-menu__item {
  line-height: 25px;
  padding: 0px 10px !important;
  font-size: 12px;
  color: #fff;
}

.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  background: #67c23a;
  position: absolute;
  left: -200px;
  opacity: 0;
}
</style>

<style  >
/* 头部导航菜单样式设置 */
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  font-size: 14px;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff;
}
.el-menu--horizontal .el-menu .el-menu-item:hover,
.el-menu--horizontal:hover .el-menu:hover .el-submenu__title:hover {
  color: #f7931a !important;
  background: rgba(0, 0, 0, 0.9) !important;
  font-weight: 500;
}

.el-menu--popup {
  /* background: #fff !important; */
  padding: 0px;
  padding-top: 5px;
  background: none !important;
}
</style>