<template>
  <el-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
    class="register-form">
    <el-form-item prop="username">
      <el-input v-model="formInline.username" placeholder="请输入用户名">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <PersonOutline />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="mobile">
      <el-input v-model="formInline.mobile" placeholder="请输入手机号码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Iphone />
          </el-icon>
        </template>
      </el-input>

    </el-form-item>
    <el-form-item prop="code">
      <el-input v-model.trim="formInline.code" placeholder="验证码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <SafetyCertificateOutlined />
          </el-icon>
        </template>
        <template #suffix>
          <el-button type="text" :disabled="isGetCode" @click="getCode">
          {{ codeMsg }}<span v-if="isGetCode">s</span>
        </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="retPassword">
      <el-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item :show-label="false" class="mb-0">
      <el-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
        注册
      </el-button>
    </el-form-item>

    <div class="flex items-center justify-between">
      <div class="flex-initial">
        <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { rule } from '@/utils/validate';
import { PersonOutline } from '@vicons/ionicons5';
import { SafetyCertificateOutlined } from '@vicons/antd';

const formRef = ref();

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 rules = {
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.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',
    message: '请先勾选协议',
    validator: (_, value) => value === true,
  },
};

const handleSubmit = () => {
  loading.value = true;
  formRef.value.validate(async (valid) => {
    if (valid) {
      backLogin()
      loading.value = false;
    } else {
      loading.value = false;
      ElMessage({
        message: '请填写完整信息',
        type: 'error',
      });
    }
  });
};

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

function getCode() {
  if (!formInline.mobile) {
    formRef.value.validateField('mobile')
    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>

<style lang="scss" scoped></style>
