<template>
  <div class="login_page">
    <div class="page_content">
      <!-- 账号密码和邮箱登录  start-->
      <div class="login_content" v-if="isLogin === 1">
        <div class="login_content_left">
          <!-- v-show="loginType == 'username'" -->
          <div>
            <div class="login_form_content" :state="emailStap">
              <!-- <div class="login_form_title">Name</div>
                            <input
                                class="login_form_input"
                                placeholder="Enter your username"
                                v-model="username"
                            /> -->
              <div v-show="emailStap === 1">
                <div class="login_form_title marign_top30">Email</div>
                <input
                  class="login_form_input"
                  placeholder="Enter your email address"
                  v-model="email"
                  @keydown.enter="submitPerLogin()"
                />
                <div class="login_form_title marign_top30">
                  <div>Password</div>
                </div>
                <div class="password_input_block">
                  <input
                    class="login_form_input"
                    :type="passwordType"
                    placeholder="Enter your password"
                    v-model="password"
                    @keydown.enter="submitPerLogin()"
                  />
                  <div
                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
                    @click="changePasswordType()"
                  ></div>
                </div>
              </div>

              <!-- 邮箱登录 start -->
              <div
                v-show="emailStap === 2"
                class="login_form_email"
                :class="{ active: emailStap === 2 }"
              >
                <div v-show="emailStap === 2" class="email_last_step">
                  <div class="email_last_step_block">
                    <span class="email_last_step_content"
                      >Verify with one-time verification code</span
                    >
                    <i
                      class="fi fi-br-cross email_last_step_block_icon"
                      @click="emailLastStepFun()"
                    ></i>
                  </div>
                  <div class="email_last_step_bottom">
                    <div class="email_last_step_des">
                      <div class="sent_email_content">Sent to {{ email }}</div>
                      <div class="tip_content">
                        <span v-show="time">{{ time }}s</span>
                        <span v-show="!time" @click="emailNextStepFun()"
                          >Resend</span
                        >
                      </div>
                    </div>
                    <VerificationCodeInput
                      :ct="emailCode"
                      @sendCaptcha="submitEmailLogin($event)"
                    ></VerificationCodeInput>

                    <div class="email_last_step_des">
                      <div class="sent_email_content email_tip_content">
                        Please check the junk box if you haven't received
                        verification code
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="login_form_title marign_top30">
              <label :class="{ active: emailStap == 2 }">
                <input :state="emailStap" type="checkbox" v-model="checked" />
                <span>I agree to all Term, Privacy Policy and Fees</span>
              </label>
            </div>
            <div class="thirdPartyLogin marign_top30">
              <div class="label">
                <div
                  class="mask"
                  v-show="!checked"
                  @click="isCheckAgreement"
                ></div>
                <googleLogin @googelLogin="googelLogin"></googleLogin>
              </div>
              <div class="label">
                <div
                  class="mask"
                  v-show="!checked"
                  @click="isCheckAgreement"
                ></div>
                <weiXinLogin></weiXinLogin>
              </div>
              <!-- <phoneLogin></phoneLogin> -->
            </div>
            <div
              class="login_submit_button marign_top40"
              :state="emailStap"
              @click="submitPerLogin()"
            >
              Sign in
            </div>

            <div class="login_text">
              <div class="forget_password_text" @click="changeIsLogin(2)">
                Forgot your password
              </div>
            </div>
          </div>
          <!-- 账号密码登录 end -->
        </div>

        <!-- 邮箱登录 end -->
      </div>

      <!-- 忘记密码 start -->
      <div class="forget_password_content" v-else>
        <div
          class="forget_password_content_block"
          @click="forgetPasswordLastStepFun()"
        >
          <!-- <span class="icon iconfont fi-br-arrow-left"></span
                    > -->
          <i class="fi fi-br-arrow-left"></i>
          <span class="forget_password_content_title">Retrieve password</span>
        </div>
        <div v-show="frogetPasswordStep === 1">
          <div class="forget_passored_form_content">
            <div class="forget_passored_form_title">Email</div>
            <input
              class="forget_passored_form_input"
              placeholder="Enter your email"
              v-model="forgetPasswordEmail"
              @keydown.enter="forgetPasswordNextStepFun()"
            />
          </div>
          <div
            class="forget_submit_button marign_top40"
            @click="forgetPasswordNextStepFun()"
          >
            Next step
          </div>
        </div>

        <div v-show="frogetPasswordStep === 2">
          <div class="forget_verif_code_des">Verification Code</div>
          <div class="email_last_step_des">
            <div class="sent_email_content">
              Sent to {{ forgetPasswordEmail }}
            </div>
            <div class="tip_content">
              <span v-show="time">{{ time }}s</span>
              <span v-show="!time" @click="forgetPasswordNextStepFun()"
                >Resend</span
              >
            </div>
          </div>
          <VerificationCodeInput
            :ct="emailCode"
            @sendCaptcha="submitPasswordCode($event)"
          ></VerificationCodeInput>
        </div>

        <div v-show="frogetPasswordStep === 3">
          <div class="forget_passored_form_content">
            <div class="forget_passored_form_title">Password</div>
            <input
              class="forget_passored_form_input"
              placeholder="Enter a new password"
              v-model="newPassword"
              @keydown.enter="submitResetPassword()"
            />
          </div>
          <div
            class="forget_submit_button marign_top40"
            @click="submitResetPassword()"
          >
            Submit
          </div>
        </div>
      </div>
      <!-- 忘记密码 end -->
    </div>

    <!-- <div class="login_footer">
            <div class="login_footer_item">
                <div class="login_footer_item_text">
                    ©2025 Code-Create Limited
                </div>
            </div>
            <div class="login_footer_item">
                <div
                    class="login_footer_item_text footer_item_text_pointer"
                    @click="
                        turnToWindow(
                            'https://code-create.com.hk/aida-terms-and-conditions/'
                        )
                    "
                >
                    Terms&Conditions
                </div>
                <div class="login_footer_line"></div>
                <div
                    class="login_footer_item_text footer_item_text_pointer"
                    @click="
                        turnToWindow(
                            'https://code-create.com.hk/aida-subscription-agreement/'
                        )
                    "
                >
                    Privacy Policy
                </div>
            </div>
        </div> -->
    <div class="mark_loading" v-show="loadingShow">
      <a-spin size="large" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie, WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import googleLogin from "@/component/LoginPage/googleLogin.vue";
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
import md5 from "md5";
export default defineComponent({
  components: {
    VerificationCodeInput,
    googleLogin,
    weiXinLogin,
    phoneLogin,
  },
  setup() {
    let timer: any = 0;
    const { locale } = useI18n();
    const store = useStore();
    let loadingShow = ref(false);
    return {
      store,
      timer,
      locale,
      loadingShow,
    };
  },
  data() {
    return {
      checked: false,
      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
      loginType: "username",
      emailStap: 1, // 邮箱登录步骤
      emailCode: ["", "", "", "", "", ""], //邮箱验证码
      emailNextStep: true,
      username: "",
      password: localStorage.getItem("loginPassword") || "",
      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
      frogetPasswordStep: 1, //忘记密码的步骤
      forgetPasswordEmail: "",
      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
      newPassword: "", //新密码
      isCheckRobot: false,
      time: 60, //60秒倒计时
      passwordType: "password",
      userId: "",
      loginTime: true,
    };
  },

  methods: {
    changeLoginType(type: string) {
      this.loginType = type;
    },

    //是否忘记密码页面
    changeIsLogin(isLogin: number) {
      if (isLogin === 1) {
        //登录
        this.forgetPasswordEmail = "";
        this.frogetPasswordStep = 1;
        this.forgetEmailCode = ["", "", "", "", "", ""];
        this.emailStap = 1;
        this.clearTimer();
      } else {
        this.username = "";
        this.password = "";
      }
      this.isLogin = isLogin;
    },

    //邮箱登录的下一步
    emailNextStepFun() {
      if (!isEmail(this.email)) {
        message.info("The email format is incorrect");
        return;
      }
      let data = {
        email: this.email,
        operationType: "LOGIN",
      };
      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
        if (rv) {
          this.emailStap = 2;
          this.time = 60;
          this.emailCode = ["", "", "", "", "", ""];
          this.createTimer();
        }
      });
    },

    //邮箱登录的上一步
    emailLastStepFun() {
      this.emailStap = 1;
      (this.username = ""), (this.password = ""), (this.email = "");
      (this.checked = false),
        (this.loginType = "username"),
        (this.emailCode = ["", "", "", "", "", ""]),
        this.clearTimer();
    },

    //忘记密码的下一步
    forgetPasswordNextStepFun() {
      if (!isEmail(this.forgetPasswordEmail)) {
        message.info("The email format is incorrect");
        return;
      }
      let data = {
        email: this.forgetPasswordEmail,
        operationType: "FORGET_PWD",
      };
      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
        if (rv) {
          this.frogetPasswordStep = 2;
          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
        }
      });
    },
    //忘记密码的上一步
    forgetPasswordLastStepFun() {
      if (this.frogetPasswordStep === 1) {
        this.changeIsLogin(1);
      } else {
        this.frogetPasswordStep = this.frogetPasswordStep - 1;
        this.forgetPasswordEmail = "";
        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
      }
    },

    //忘记密码填写完邮箱验证码进行下一步
    submitPasswordCode(emailVerifyCode: any) {
      // console.log(123123);
      let data = {
        email: this.forgetPasswordEmail,
        emailVerifyCode: emailVerifyCode,
        password: "",
        verifyEmail: true,
      };
      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
        if (rv) {
          this.forgetEmailValue = emailVerifyCode;
          this.frogetPasswordStep = 3;
          this.clearTimer();
        }
      });
    },

    //改变勾选是否是机器人
    checkRobot() {
      this.isCheckRobot = !this.isCheckRobot;
    },

    //提交账号密码预先登录
    submitPerLogin() {
      //输入账号密码
      if (this.emailStap >= 2) {
        return;
      } else {
        if (!this.password) {
          message.info("Please enter your account number or password");
          return;
        }
        //输入邮箱
        if (!this.email) {
          message.info("Please enter your email address");
          return;
        }
        //判断邮箱格式是否正确
        if (!isEmail(this.email)) {
          message.info("The email format is incorrect");
          return;
        }
        //判断是否同意隐私政策
        if (!this.checked) {
          message.info("Agree to all terms, privacy fees and policies");
          return;
        }
        let data = {
          password: md5(this.password + "abc"),
          userName: "a",
          // userName: this.username,
          email: this.email,
          operationType: "LOGIN",
          ip: "",
        };
        // this.loginType = 'email'

        if (this.loginTime) {
          this.loginTime = false;
          Https.axiosPost(Https.httpUrls.preLogin, data)
            .then((rv: any) => {
              // if (rv) {
              //     this.loginType = 'email'
              // }
              if (rv) {
                this.clearTimer();
                this.time = 60;
                this.emailStap = 2;
                this.emailCode = ["", "", "", "", "", ""];
                this.createTimer();

                this.userId = rv.userId;
                this.loginType = "email";

                localStorage.setItem("loginEmail", this.email);
                localStorage.setItem("loginPassword", this.password);
              }
            })
            .catch((res) => {});
          setTimeout(() => {
            this.loginTime = true;
          }, 2000);
        }
      }
    },

    changePasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },

    //邮箱登录提交
    submitEmailLogin(emailVerifyCode: any) {
      let data = {
        email: this.email,
        emailVerifyCode: emailVerifyCode,
        loginType: "EMAIL",
        userId: this.userId,
      };
      Https.axiosPost(Https.httpUrls.accountLogin, data)
        .then((rv: any) => {
          this.setSuccessLogin(rv);
        })
        .catch((res) => {});
    },
    isCheckAgreement() {
      message.info("Agree to all terms, privacy fees and policies");
    },
    //微信登录
    wechatLogin(value: any) {
      let data = {
        code: value.code,
        type: 2,
      };
      this.loadingShow = true;
      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
        .then((rv: any) => {
          this.loadingShow = false;
          this.setSuccessLogin(rv);
        })
        .catch((res) => {
          this.loadingShow = false;
        });
    },
    //谷歌登录
    googelLogin(value: any) {
      let data = { credential: value, type: 2 };
      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
        .then((rv: any) => {
          this.setSuccessLogin(rv);
        })
        .catch((res) => {});
    },
    //登陆成功设置参数
    setSuccessLogin(rv: any) {
      if (rv) {
        if (rv.systemUser == 4) {
          rv.systemUser = 1;
        }
        this.createTimer();
        let isTest = rv.systemUser == 3 ? true : false;
        let isBeginner = rv.isBeginner == 1 ? true : false;
        let token = rv.token;
        setCookie("isMurmur", false);
        setCookie("token", token);
        setCookie("isTest", isTest);
        setCookie("isBeginner", isBeginner);
        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
        setCookie("userInfo", JSON.stringify(rv));
        let userid: any = {
          ueserId: rv.userId,
          systemUser: rv.systemUser,
        };
        if (rv.email) userid.email = rv.email;
        this.store.commit("upUserDetail", userid);

        if (window.innerWidth < 768) {
          message.info(
            "If you need to design, please log in using an iPad or computer."
          );
          this.turnToHomePage("/Square");
        } else {
          this.turnToHomePage("/home");
        }
        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
        let randomNum: any =
          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
        sessionStorage.setItem("sessionId", randomNum);
        sessionStorage.setItem("record", JSON.stringify([]));
      }
    },
    //修改密码提交
    submitResetPassword() {
      let data = {
        email: this.forgetPasswordEmail,
        emailVerifyCode: this.forgetEmailValue,
        password: md5(this.newPassword + "abc"),
        verifyEmail: false,
      };
      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
        if (rv) {
          message.success("Changing the password successfully");
          this.changeIsLogin(1);
        }
      });
    },

    //创建定时器
    createTimer() {
      this.timer = setInterval(() => {
        this.time--;
        if (!this.time) {
          clearInterval(this.timer);
        }
      }, 1000);
    },

    //清除定时器
    clearTimer() {
      this.time = 60;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },

    //跳转到首页
    turnToHomePage(str: any) {
      // this.getLang();
      // this.$router.push("/home");
      // console.log(window.location.search.substring(1));
      this.store.commit("clearAllData");
      this.store.commit("clearAllCollection");
      this.store.commit("setAllBoardDataChoose", {});
      this.store.commit("clearShowSketchboard", {});
      this.$router.push(str);
    },
    //获取当前语言
    // getLang() {
    //     let data = {};
    //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
    //         (rv: any) => {
    //             if (rv) {
    //                 this.locale = rv;
    //                 setLang(rv);
    //             }
    //         }
    //     );
    // },
  },
  mounted() {
    const data = this.$route.query;
    if (data?.state == "weiXin") {
      this.wechatLogin(data);
    }
  },
});
</script>
<style lang="less" scoped>
.login_page {
  width: 100%;
  height: 100%;
  .page_content {
    .login_content {
      margin: 0 auto;
      position: relative;
      width: 100%;
      // height: 100%;
      // width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (max-width: 768px) {
        width: 100%;
      }
      .login_content_left {
        width: 100%;
        @media (max-width: 768px) {
          width: 100%;
        }
        .login_form_email {
          margin-top: 3rem;
          position: relative;
          width: 100%;
          height: 100%;
          background: #fff;
          transform: scale(0);
          transition: 0.3s all;
          border: 2px solid;
          border-radius: 20px;
          .email_last_step {
            width: 100%;
            height: 100%;
            #app {
              height: auto;
            }
          }
        }
        .active {
          transform: scale(1);
        }
      }
      .login_form_title {
        font-size: 1.6rem;
        // color: #666666;
        font-weight: 900;
        color: #000;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        label {
          display: flex;
          span {
            font-size: 1.6rem;
            margin-left: 10px;
            font-weight: normal;
          }
          &.active {
            pointer-events: none;
            input {
              pointer-events: none;
            }
          }
        }
      }

      .login_form_content {
        position: relative;
        &[state="2"] {
          > * {
            opacity: 0;
          }
          .login_form_email {
            opacity: 1;
          }
        }
        .password_input_block {
          position: relative;

          .password_show_icon {
            position: absolute;
            font-size: 2.4rem;
            right: 2rem;
            top: 1.7rem;
            cursor: pointer;
          }
        }

        .login_form_input {
          width: 100%;
          height: 5rem;
          margin-top: 1rem;
          border: 0.1rem solid #dfdfdf;
          border-radius: 2.5rem;
          padding-left: 2.1rem;
          line-height: 5rem;
          font-size: 1.4rem;
          box-sizing: border-box;
          outline: none;
          transition: all 0.3s;
          &:hover {
            border: 0.1rem solid #000;
          }
          &::placeholder {
            color: #a5b0c2;
          }
        }
      }

      .email_last_step {
        // margin-top: 4rem;
        .email_last_step_bottom {
          padding: 0 40px;
        }
        .email_last_step_block {
          padding: 10px;
          border-bottom: 2px solid;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .email_last_step_content {
            margin-left: 1rem;
            font-size: 2.2rem;
            font-weight: bold;
            color: #030303;
          }
          .email_last_step_block_icon {
            cursor: pointer;
            margin-right: 1rem;
            height: 20px;
          }
        }

        .fi-br-arrow-left {
          font-size: 2.5rem;
          font-weight: bold;
          color: #030303;
          transform: translateY(1rem);
          display: inline-block;
        }
      }

      .login_submit_button {
        height: 5rem;
        background: #000;
        border-radius: 2.5rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background: #3c3c3c;
        }
        &[state="2"] {
          cursor: not-allowed;
        }
      }
      .login_text {
        font-size: 1.6rem;
        margin-top: 4rem;
        color: #151515;
        display: flex;
        justify-content: flex-end;

        .forget_password_text {
          cursor: pointer;
        }
      }
    }

    .forget_password_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60rem;
      background: #ffffff;
      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
      border-radius: 1rem;
      padding: 3rem 6rem 6.5rem;
      box-sizing: border-box;

      .forget_password_content_block {
        cursor: pointer;
      }

      .fi-br-arrow-left {
        font-size: 3.8rem;
        font-weight: bold;
        color: #030303;
        transform: translateY(1rem);
        display: inline-block;
      }
      .forget_password_content_title {
        font-size: 3.2rem;
        font-weight: bold;
        color: #030303;
        margin-left: 2rem;
      }

      .forget_passored_form_content {
        margin-top: 3.5rem;

        .forget_passored_form_title {
          font-size: 2.4rem;
          font-weight: bold;
          color: #030303;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
        }

        .forget_passored_form_input {
          width: 100%;
          height: 5rem;
          margin-top: 1rem;
          border: 0.1rem solid #dfdfdf;
          border-radius: 2.5rem;
          padding-left: 2.1rem;
          line-height: 5rem;
          font-size: 1.4rem;
          box-sizing: border-box;
          outline: none;

          &::placeholder {
            color: #a5b0c2;
          }
        }
      }

      .forget_verif_code_des {
        font-size: 2.4rem;
        font-weight: bold;
        color: #030303;
        margin-top: 3.5rem;
      }

      .forget_submit_button {
        height: 5rem;
        background: #000;
        border-radius: 2.5rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }

  .login_footer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    bottom: 3.5rem;
    width: 100%;
    padding: 0 4rem;

    .login_footer_item {
      display: flex;
      align-items: center;

      .login_footer_item_text {
        font-size: 1.3rem;
        color: #151515;
      }

      .footer_item_text_pointer {
        cursor: pointer;
      }

      .login_footer_line {
        width: 0.1rem;
        height: 2rem;
        margin: 0 2rem;
        background: #b9b9b9;
      }
    }
  }

  .marign_top20 {
    margin-top: 2rem;
  }

  .marign_top22 {
    margin-top: 2.2rem;
  }

  .marign_top30 {
    margin-top: 3rem;
  }
  .marign_top40 {
    margin-top: 4rem;
  }
  .thirdPartyLogin {
    display: flex;
    // justify-content: flex-start;
    > div {
      position: relative;
      margin-right: 1rem;
      > .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
        cursor: pointer;
      }
    }
  }
  .tip_content {
    font-size: 1.3rem;
    font-weight: bold;
    color: #000;
    cursor: pointer;
  }

  .email_last_step_des {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4rem;
    margin-bottom: 2rem;

    .sent_email_content {
      font-size: 1.8rem;
      font-weight: bold;
      color: #a5b0c2;
    }

    .email_tip_content {
      font-size: 1.4rem;
      color: #030303;
    }
  }
}
</style>
