<template>
  <LoginLayout>
    <div class="outer-page pos-relative 2xl:py-56px 2xl:px-130px lg:py-30px lg:px-60px">
      <div class="text-24px c-#000 fw-700">欢迎注册</div>
      <div class="my-18px w-100% h-1px bg-#D1D5DB"></div>
      <!-- 注册form -->
      <a-form class="w-376px" ref="postFormRef" :model="postForm" :rules="postFormRules" :colon="false">
        <a-form-item class="mb-20 custom-form-item" ref="account" label="手机号/邮箱" name="account" placehplder="手机号码">
          <a-input v-model:value="postForm.account" placeholder="请输入注册手机号/邮箱" size="large" />
        </a-form-item>

        <a-form-item class="custom-form-item error-form-item mb-20px" label="验证码" name="captcha">
          <a-input-group class="w-full flex justify-between">
            <a-input v-model:value="postForm.captcha" style="width: calc(100% - 134px)" placeholder="请输入验证码" :maxlength="6" size="large" />
            <a-button
              class="!w-120px !h-50px !text-14px !b-rd-6px !b-#8692a6"
              :disabled="seconds !== 0 || !postForm.account.length"
              @click="onSendCaptcha"
              size="large"
            >
              <span v-if="seconds === 0" class="c-666">获取验证码</span>
              <span v-else>{{ seconds }}s后重新发送</span>
            </a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item class="custom-form-item !mb-0" ref="password" label="密码" name="password">
          <a-input-password v-model:value="postForm.password" placeholder="请输入密码" size="large" />
        </a-form-item>
        <a-form-item class="custom-form-item error-form-item2 mb-0" name="isUnlock">
          <div class="flex justify-between mt-20px">
            <div class="flex items-center">
              <ToggleCircle class="mr-10px" v-model="postForm.isUnlock" />我已阅读并同意
              <span class="text-#0068FF cursor-pointer">《用户协议》</span> 及<span class="text-#0068FF cursor-pointer">《隐私协议》</span>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="" class="mt-20px mb-22px">
          <a-button class="w-full !bg-#0068FF !b-rd-6px text-#fff !fw-700 !h-56px !hover:text-#fff" @click="onRegister" size="large"
            >立即注册
          </a-button>
        </a-form-item>
        <div class="text-center c-666">已有账号？<router-link to="/login" class="text-#0068FF underline">立即登录</router-link></div>
      </a-form>
    </div>
  </LoginLayout>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
import useUserStore from 'Store/modules/user'
import type { UnwrapRef } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import type { CaptchaData } from 'Types/api'
import { apiSendCaptcha } from 'API/user'
import { validatePassword, validatePhoneOrEmail, genValidateTrue } from 'Utils/validate'
import { getUrlParamsObj, isEmptyObject } from '@/utils'

// 注册页面信息
const params_cache = getUrlParamsObj()
if (!isEmptyObject(params_cache)) {
  sessionStorage.setItem('cache_register', JSON.stringify(params_cache))
}

const postFormRef = ref()
// 当前注册阶段
let seconds = ref(0)

interface IRegisterForm {
  account: string
  password: string
  captcha: string
  isUnlock: boolean
}

const postForm: UnwrapRef<IRegisterForm> = reactive({
  account: '',
  password: '',
  captcha: '',
  isUnlock: false,
})
const postFormRules: Record<string, Rule[]> = {
  account: [{ required: true, validator: validatePhoneOrEmail, trigger: 'change' }],
  password: [{ required: true, validator: validatePassword, trigger: 'change' }],
  captcha: [{ required: true, message: '验证码未输入', trigger: 'change' }],
  isUnlock: [{ required: true, validator: genValidateTrue('请先阅读并选择同意'), trigger: 'change' }],
}

const onSendCaptcha = () => {
  postFormRef.value
    .validateFields(['account'])
    .then(async () => {
      const captcha: CaptchaData = {
        account: postForm.account,
        type: 's_register',
      }
      const data = await apiSendCaptcha(captcha)
      console.log(data)
      countSeconds()
    })
    .catch((error: Error) => {
      console.log('error', error)
    })
}

const countSeconds = () => {
  seconds.value = 60
  const timer = setInterval(() => {
    seconds.value--
    if (seconds.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
}

const onRegister = () => {
  postFormRef.value.validate().then(async () => {
    console.log('values', postForm, toRaw(postForm))
    const userStore = useUserStore()
    userStore.register(toRaw(postForm)).catch(() => {
      postForm.isUnlock = false
    })
  })
}
</script>

<style scoped lang="less">
@import '@/assets/styles/variables.less';

.page {
  .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 70px;

    .tab {
      padding-bottom: 10px;
      border-bottom: 4px solid transparent;
      transition: 0.3s;

      &.active {
        border-bottom: 4px solid @color-new-primary;
        color: @color-new-primary;
        font-weight: 700;
      }
    }
  }

  .outer-page {
    background-color: #fff;
    border-radius: 18px;
  }

  ::v-deep(.ant-form) {
    .ant-form-item {
      &.custom-form-item {
        .ant-form-item-row {
          display: block !important;
          width: 376px !important;

          .ant-form-item-label {
            color: #000000;
            margin-bottom: 10px;
          }

          .ant-form-item-control {
            .ant-input-affix-wrapper {
              border-radius: 6px;
              width: 376px;
              border-color: #8692a6;

              input {
                height: 34px;
              }
            }

            input {
              width: 376px;
              border-radius: 6px;
              border-color: #8692a6;
              height: 50px;

              &.ant-input-status-error {
                border-color: #ff4d4f;
              }
            }

            .ant-form-item-explain-error {
              text-align: right;
            }
          }
        }

        &.error-form-item {
          .ant-form-item-explain-error {
            padding-right: 140px;
          }
        }

        &.error-form-item2 {
          .ant-form-item-explain-error {
            text-align: left !important;
            padding-left: 30px;
          }
        }
      }

      .custom-radio {
        .ant-checkbox {
          margin-right: 10px;

          &.ant-checkbox-checked {
            .ant-checkbox-inner {
              background-color: #0068ff;
              border-color: #0068ff;
            }

            &:after {
              border: 1px solid #0068ff;
            }
          }

          .ant-checkbox-inner {
            &:hover {
              border-color: #0068ff !important;
            }
          }
        }
      }
    }
  }
}
</style>
