<template>
  <div
    id="c-register-page"
    :style="{ 'background-image': 'url(' + props.backImg + ')' }"
  >
    <div class="registerPage">
      <Spin :spinning="loading">
        <!-- 标题 -->
        <div id="title">{{ props.title }}</div>

        <!-- 表单 -->
        <a-form
          :model="userForm"
          ref="userFormRef"
          :rules="formRules"
          name="basic"
          @finish="handleFinish"
          @finishFailed="handleFinishFailed"
        >
          <!-- 邮箱 -->
          <a-form-item name="email">
            <c-input
              v-model:value.trim="userForm.email"
              placeholder="请输入您的邮箱"
              size="large"
            ></c-input>
          </a-form-item>

          <!-- 密码 -->
          <a-form-item name="password">
            <Popover
              placement="rightTop"
              trigger="focus"
              class="formItem-password"
              :overlayStyle="{
                width: '282px',
                height: '126px',
              }"
            >
              <template #content>
                <div
                  class="progress-title"
                  :style="{ color: passStrength.color }"
                >
                  强度：{{ passStrength.txt }}
                </div>
                <Progress
                  class="progress"
                  :percent="passStrength.level"
                  :show-info="false"
                />
                <p class="progress-tip">
                  {{ passStrength.remarks }}
                </p>
              </template>
              <c-input-password
                v-model:value.trim="userForm.password"
                placeholder="请输入密码，区分大小写"
                size="large"
              ></c-input-password>
            </Popover>
          </a-form-item>

          <!-- 确认密码 -->
          <a-form-item name="confirmPassword">
            <c-input-password
              v-model:value.trim="userForm.confirmPassword"
              placeholder="请确认密码"
              size="large"
            ></c-input-password>
          </a-form-item>

          <!-- 手机号 -->
          <a-form-item name="countryCode">
            <c-input-group compact class="mobile">
              <a-select
                v-model:value="userForm.countryCode"
                size="large"
                class="mobile-sel"
              >
                <a-select-option
                  :value="item.value"
                  :key="item.value"
                  v-for="item in countryCodeOptios"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
              <a-form-item name="mobile">
                <c-input
                  v-model:value.trim="userForm.mobile"
                  placeholder="11位手机号"
                  size="large"
                  class="mobile-ipt"
              /></a-form-item>
            </c-input-group>
          </a-form-item>

          <!-- 验证码 -->
          <a-form-item name="verifyCode">
            <div class="verification">
              <c-input
                v-model:value.trim="userForm.verifyCode"
                placeholder="请输入六位数验证码"
                class="code-ipt"
                size="large"
              ></c-input>
              <a-button
                class="code-btn"
                @click="handerPhoneCode"
                :loading="btnLoading"
                size="large"
              >
                {{
                  codeInfo.disabled ? `已发送(${codeInfo.count})` : "获取验证码"
                }}
              </a-button>
            </div>
          </a-form-item>

          <!-- 注册按钮 -->
          <a-form-item>
            <div class="buttonGroup">
              <c-button
                class="register-btn"
                type="primary"
                html-type="submit"
                size="large"
                >注册</c-button
              >
              <span @click="hasAccountLogin">使用已有账号登录</span>
            </div>
          </a-form-item>
        </a-form>
      </Spin>
    </div>

    <!-- footer -->
    <div class="bottom">
      Copyright © 广东赛博威信息科技有限公司 粤ICP备 17158128号
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";
import { Popover, Progress, Spin, message as CMS } from "ant-design-vue";
import prop from "../prop";
import {
  countDownTime,
  countryCodeOptios,
  passStrengthOptions,
  verifyPasswordStrong,
} from "../config";
import { formRulesFn } from "../config/rules";
export default defineComponent({
  name: "c-register-page",
});
</script>

<script lang="ts" setup>
interface FormState {
  email: string;
  password: string;
  confirmPassword: string;
  verifyCode: string;
  mobile: string;
  countryCode: 86;
}

const props = defineProps({ ...prop });
const emit = defineEmits([
  "handerCaptchaSuccess",
  "handerRegisterSuccess",
  "toLogin",
]);
const loading = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const userFormRef = ref();

//表单
const userForm = reactive<FormState>({
  email: "",
  password: "",
  confirmPassword: "",
  verifyCode: "",
  mobile: "",
  countryCode: 86,
});

//密码强度默认值
let passStrength = ref(passStrengthOptions[0]);

// 验证码参数
const codeInfo = reactive({
  count: countDownTime, //倒计时数
  disabled: false, //是否被禁用
});

let formRules = formRulesFn(userForm);

//点击获取手机验证码按钮
const handerPhoneCode = async () => {
  await userFormRef.value.validateFields("mobile");
  if (!codeInfo.disabled) {
    btnLoading.value = true;
    emit(
      "handerCaptchaSuccess",
      userForm.mobile,
      // 成功回调
      () => {
        CMS.info("短信验证码已发送，请注意查收!");
        codeInfo.disabled = true;
        btnLoading.value = false;
        countdownHandler();
      },
      // 错误回调
      () => {
        CMS.error("短信验证码发送失败，请重试!");
      }
    );
  }
};

// 点击注册按钮
const handleFinish = (value: any) => {
  loading.value = true;
  emit(
    "handerRegisterSuccess",
    value,
    // 成功回调
    () => {
      CMS.success("注册成功!");
      loading.value = false;
    },
    // 错误回调
    () => {
      loading.value = false;
    }
  );
};

//密码强度气泡
watch(
  () => userForm.password,
  (newVal) => {
    passStrength.value = { ...verifyPasswordStrong(newVal) };
  }
);

// 表单验证
const handleFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

//已有账户登录
const hasAccountLogin = () => {
  emit("toLogin");
};

// 发送验证码的倒计时
const countdownHandler = () => {
  var countdown = function () {
    if (codeInfo.count == 0) {
      codeInfo.disabled = false;
      codeInfo.count = countDownTime;
      // localStorage.removeItem("remainderTime");
      return;
    } else {
      codeInfo.disabled = true;
      codeInfo.count--;
    }
    setTimeout(countdown, 1000);
  };
  setTimeout(countdown, 1000);
};

let clientHeight = document.body.clientHeight + "px";
const curHeight = ref(clientHeight);
window.onresize = function () {
  clientHeight = document.body.clientHeight + "px";
  curHeight.value = clientHeight;
};
// console.log(clientHeight, "client");
</script>

<style lang="less" scoped>
#c-register-page {
  width: 100%;
  height: v-bind(curHeight);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.progress-tip {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 22px;
}

.registerPage {
  width: 518px;
  background-color: #ffffff85;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  padding: 80px 70px 52px;
  #title {
    width: 112px;
    height: 28px;
    font-size: 28px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 28px;
  }

  .verification {
    display: flex;
    justify-content: space-between;

    .code-ipt {
      flex: 1;
    }
    .code-btn {
      display: block;
      overflow-wrap: break-word;
      white-space: nowrap;
      margin-left: 8px;
    }
  }

  .mobile {
    height: 40px;
    .mobile-sel {
      width: 80px;
    }
    .mobile-ipt {
      width: 298px;
    }
  }

  .ant-btn-primary {
    background-color: #0074ff;
    width: 100%;
  }

  .buttonGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .register-btn {
      width: 176px;
      background: #0074ff;
      border-radius: 2px;
      margin-top: 0;
    }
    span {
      width: 112px;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #0074ff;
      line-height: 22px;
      cursor: pointer;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 34px;
  background: #e0e6f585;
  text-align: center;
  color: #678fac;
  line-height: 34px;
  font-family: PingFang SC;
}
</style>
