<script setup lang="ts">
definePageMeta({
  layout: "login-default",
});
let pageTitle: any = ref("HOTKING-注册");
useHead(() => ({
  title: pageTitle.value,
}));
import {
  Lock,
  User,
  ChatDotSquare,
  OfficeBuilding,
  Connection,
} from "@element-plus/icons-vue";
import type { increaseInterval } from "echarts/types/src/scale/helper.js";
import type { FormInstance } from "element-plus";
import { useLogin } from "~/api/login/loginService";
import { useAll } from "~/api/pubAll/service";
const { sendSMS } = useAll();
const userInfo: any = useCookie("userInfo");
const loginService = useLogin();
const codeImg = ref("");
let codeCountdown = ref(0);
let sendCodeShow = ref(true);
let sendBtnText = ref("获取验证码");
const sendCodeFalg: any = useCookie("sendCodeFalg");
const sendCodePhone: any = useCookie("sendCodePhone");
const savePhone: any = useCookie("savePhone", {
  maxAge: 60 * 60 * 24 * 30,
});
import type { SignupRequest } from "~/domain/Register";
const signupRequest: Ref<SignupRequest> = ref({} as SignupRequest);
signupRequest.value.from_type = 0
const signupRequestCheck = ref(false);
const signupForm = ref<FormInstance>();
const user = useUserStore();
user.value.adminTitle = "合晶芯城-注册中心";
const route = useRoute();
const tokenKey: any = useCookie("tokenKey");
const passwordValidator = function (rule: any, value: any, callback: any) {
  if (!value) return callback(new Error("设置6至20位登录密码"));
  if (value.length < 6 || value.length > 20)
    return callback(new Error("设置6至20位登录密码"));
  return callback();
};

const rules = {
  mobile: [{ required: true, message: "手机 必填", trigger: "blur" }],
  code: [{ required: true, message: "验证码 必填", trigger: "blur" }],
  password: [
    { required: true, validator: passwordValidator, trigger: "blur" },
  ],
};

async function getCodeFun() {
  if (!sendCodeShow.value) {
    return;
  }
  if (!signupRequest.value.mobile) {
    return ElMessage.error("请输入手机号码！");
  }
  sendCodeShow.value = false;
  sendBtnText.value = "发送中...";
  const res: any = await sendSMS(signupRequest.value.mobile as any);
  if (res.httpCode == 200) {
    sendBtnText.value = "获取验证码";
    ElMessage.success("发送成功");
    codeCountdown.value = 60;
    sendCodeFalg.value = codeCountdown.value;
    sendCodePhone.value = signupRequest.value.mobile;
    let intervalID = setInterval(function () {
      codeCountdown.value--;
      sendCodeFalg.value = codeCountdown.value;
      if (codeCountdown.value <= 0) {
        sendCodeShow.value = true;
        clearInterval(intervalID);
      }
    }, 1000);
  } else {
    sendCodeShow.value = true;
    sendBtnText.value = "获取验证码";
  }
}
async function signup() {
  if (!signupRequestCheck.value) {
    return ElMessage.error("请先阅读并同意用户协议");
  }
  if (!signupForm.value) return;
  await signupForm.value.validate(async (valid: any, fields: any) => {
    if (!valid) {
      return;
    }
    const res: any = await loginService.signup(signupRequest.value);
    if (res.httpCode == 200) {
      login();
    } else {
    }
  });
}
async function login() {
  let params:any = {
    mobile: signupRequest.value.mobile,
    password: signupRequest.value.password,
  };
  const res: any = await loginService.login(params);
  if (res.httpCode==200) {
    ElMessage.success("注册成功");
    savePhone.value = signupRequest.value.mobile;
    let token = res.data.modifyTime.replace(/access-token:/g, '')
    user.value.isLogin = token;
    tokenKey.value = token;
    userInfo.value = res.data
    user.value.userInfo = res.data
    user.value.regOpen = false;
    if (route.query.redirect) {
      navigateTo(route.query.redirect as string);
    } else {
      navigateTo("/");
    }
  }
}

const invite_register: any = useCookie(
  "ushopfy_promotion_hint_invite_register"
);
let registerInviteCode = ref("");
onMounted(async () => {
  let idx = invite_register.value?.indexOf("registerInviteCode-") || -1;
  if (idx > -1) {
    registerInviteCode.value = invite_register.value
      .substring(idx + 19)
      .replace(";", "");
    signupRequest.value.registerInviteCode = registerInviteCode.value;
  }
});
</script>
<template>
  <div class="login-bg">
    <NuxtLink to="/" class="logo"><img src="@/assets/img/logo.svg"></NuxtLink>
    <div class="login-from">
      <div class="el-form-wrap">
        <el-form ref="signupForm" label-width="0px" :model="signupRequest" :rules="rules">
          <div class="text-wrapper_title flex-row">
            <h1>注册</h1>
            <h2>欢迎来到合晶芯城</h2>
          </div>
          <el-form-item prop="mobile" class="inp-wrap">
            <el-input v-model="signupRequest.mobile" placeholder="请输入手机号" :prefix-icon="User" maxlength="11" />
          </el-form-item>
          <el-form-item prop="code" class="inp-wrap">
            <el-input v-model="signupRequest.code" placeholder="请输入验证码" :prefix-icon="ChatDotSquare" maxlength="6" />
            <a href="javascript:;" class="send-code" v-if="!sendCodeShow && codeCountdown!=0">{{ codeCountdown }}</a>
            <a href="javascript:;" class="send-code" @click="getCodeFun" v-else>{{sendBtnText}}</a>
          </el-form-item>
          <el-form-item prop="password" class="inp-wrap">
            <el-input v-model="signupRequest.password" type="password" show-password data="passworedtype" placeholder="设置6至20位登录密码" @keyup.enter.native="login" :prefix-icon="Lock" />
          </el-form-item>

          <el-form-item class="mb1_i">
            <el-checkbox v-model="signupRequestCheck" label="Option 1" size="large">注册即代表您已同意<NuxtLink to="/register/agreement" class="mainColor">《用户服务协议》</NuxtLink></el-checkbox>
          </el-form-item>
          <el-form-item class="mt25">
            <el-button class="btn_main" @click="signup">
              <span>注册并登录</span>
            </el-button>
          </el-form-item>
          <el-form-item class="forget-pass">
            已有账号？<NuxtLink to="login" class="nuxtLink mainColor">去登录</NuxtLink>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-from {
  padding: 0;
  margin: 0;
}
/** 取消按钮文字全大写 */
:deep(.el-button) {
  text-transform: none;
  font-weight: normal;
}
/** 禁用按钮的颜色变浅 */
:deep(.el-button.is-disabled) {
  opacity: 0.4;
}
/** 主按钮样式 */
.btn_main {
  width: 100% !important;
  height: 44px !important;
  box-shadow: 2px 10px 16px 0px #d0e4ff;
  border-radius: 38px 38px 38px 38px !important;
  border: unset !important;
}
:deep(.el-button.is-disabled) {
  opacity: 0.4 !important;
  color: #fff;
  background-color: $mainColor !important;
  border: unset !important;
}
.codeImg {
  position: absolute;
  right: 0;
  height: 60px;
  top: 0;
}
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #303133;
}
.Customer_Service {
  :deep(.el-form-item__content) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  img {
    width: 108px;
    display: block;
  }
  p {
    color: #666666;
    font-size: 12px;
  }
}
</style>
