<template>
  <n-form
    ref="formRef"
    :show-label="false"
    :show-require-mark="false"
    size="large"
    :model="formInline"
    :rules="rules"
    class="register-form"
  >
    <n-form-item path="username">
      <n-input v-model:value="formInline.username" placeholder="请输入用户名">
        <template #prefix>
          <n-icon size="18" color="#808695">
            <UserOutlined />
          </n-icon>
        </template>
      </n-input>
    </n-form-item>
    <n-form-item path="mobile">
      <n-input v-model:value="formInline.mobile" placeholder="请输入手机号码">
        <template #prefix>
          <n-icon size="18" color="#808695">
            <MobileOutlined />
          </n-icon>
        </template>
      </n-input>
    </n-form-item>
    <n-form-item path="code">
      <n-input v-model:value.trim="formInline.code" placeholder="验证码">
        <template #prefix>
          <n-icon size="18" color="#808695">
            <SafetyCertificateOutlined />
          </n-icon>
        </template>
        <template #suffix>
          <n-button quaternary :disabled="isGetCode" @click="getCode">
            {{ codeMsg }}<span v-if="isGetCode">s</span>
          </n-button>
        </template>
      </n-input>
    </n-form-item>
    <n-form-item path="password">
      <n-input
        v-model:value="formInline.password"
        type="password"
        show-password-on="mousedown"
        placeholder="请输入密码"
      >
        <template #prefix>
          <n-icon size="18" color="#808695">
            <LockOutlined />
          </n-icon>
        </template>
      </n-input>
    </n-form-item>
    <n-form-item path="retPassword">
      <n-input
        v-model:value="formInline.retPassword"
        type="password"
        show-password-on="mousedown"
        placeholder="请再次输入密码"
      >
        <template #prefix>
          <n-icon size="18" color="#808695">
            <LockOutlined />
          </n-icon>
        </template>
      </n-input>
    </n-form-item>
    <n-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
      注册
    </n-button>
    <n-form-item class="default-color" path="agreement">
      <div class="flex items-center justify-between">
        <div class="flex-initial">
          <n-checkbox v-model:checked="formInline.agreement">我同意隐私协议</n-checkbox>
        </div>
      </div>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { rule } from '@/utils/validate';
  import {
    UserOutlined,
    MobileOutlined,
    SafetyCertificateOutlined,
    LockOutlined,
  } from '@vicons/antd';

  const formRef = ref();
  const message = useMessage();
  const loading = ref(false);
  const codeMsg: any = ref('获取验证码');
  const isGetCode = ref(false);

  const emit = defineEmits(['backLogin']);

  const formInline = reactive({
    username: '',
    password: '',
    retPassword: '',
    mobile: '',
    code: '',
    agreement: false,
  });

  const validatePhone = async (_rule, value: string) => {
    var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
    if (!value) {
      return Promise.reject('请输入手机号');
    } else if (!isPhone.test(value)) {
      return Promise.reject('请输入合法手机号');
    } else {
      return Promise.resolve();
    }
  };
  const rules = {
    username: { required: true, message: '请输入用户名', trigger: 'blur' },
    mobile: [{ key: 'a', required: true, validator: validatePhone, trigger: 'blur' }],
    code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
    retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
    agreement: {
      required: true,
      type: 'boolean',
      trigger: 'change',
      validator: async (_, value) => {
        if (!value) {
          return Promise.reject('请先勾选协议');
        } else {
          return Promise.resolve();
        }
      },
    },
  };

  const handleSubmit = () => {
    formRef.value
      .validate()
      .then(async () => {
        loading.value = true;
        backLogin();
        loading.value = false;
      })
      .catch((error) => {
        message.error('请填写完整信息');
      });
  };

  const backLogin = () => {
    emit('backLogin', true);
  };

  function getCode() {
    if (!formInline.mobile) {
      formRef.value?.validate(
        (errors) => {},
        (rule) => {
          return rule?.key === 'a';
        },
      );
      return;
    }
    codeMsg.value = 60;
    isGetCode.value = true;
    let time = setInterval(() => {
      codeMsg.value--;
      if (codeMsg.value <= 0) {
        clearInterval(time);
        codeMsg.value = '获取验证码';
        isGetCode.value = false;
      }
    }, 1000);
  }
</script>
