<template>
  <div class="aui-content">
    <div class="aui-container">
      <div class="aui-form">
        <div class="aui-image">
          <div class="aui-image-text">
            <img :src="jeecgAdTextImg" alt="" />
          </div>
        </div>
        <div class="aui-formBox">
          <div class="aui-formWell">
            <Form ref="formRef" :model="formData">
              <div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px">
                <div class="aui-flex-box activeNav on">
                    <% if (enableTranslation) { %>{{ t('sys.login.signUpFormTitle') }}<% } else { %>t$t('sys.login.signUpFormTitle')$t$<% } %>
                </div>
              </div>
              <div class="aui-form-box">
                <div class="aui-account aui-account-line">
                  <FormItem>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:user-outlined"/>
                      <Input class="fix-auto-fill" type="text" <% if (enableTranslation) { %>:placeholder="t('sys.login.userName')"<% } else { %>t$t('sys.login.userName')$t$<% } %> v-model:value="formData.username" />
                    </div>
                  </FormItem>
                  <FormItem>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:mobile-outlined"/>
                      <Input class="fix-auto-fill" type="text" <% if (enableTranslation) { %>:placeholder="t('sys.login.mobile')"<% } else { %>placeholder="t$t('sys.login.mobile')$t$"<% } %> v-model:value="formData.mobile" />
                    </div>
                  </FormItem>
                  <FormItem>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:mail-outlined"/>
                      <Input class="fix-auto-fill" type="text" <% if (enableTranslation) { %>:placeholder="t('sys.login.smsCode')"<% } else { %>placeholder="t$t('sys.login.smsCode')$t$"<% } %> v-model:value="formData.smscode" />
                      <div v-if="showInterval" class="aui-code-line" @click="getLoginCode"><% if (enableTranslation) { %>{{t('component.countdown.normalText')}}<% } else { %>t$t('component.countdown.normalText')$t$<% } %></div>
                      <div v-else class="aui-code-line">{{ <% if (enableTranslation) { %>t('component.countdown.sendText',[unref(timeRuning)])<% } else { %>`${unref(timeRuning)}秒后重新获取`<% } %> }}</div>
                    </div>
                  </FormItem>
                  <FormItem>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:lock-outlined"/>
                      <Input class="fix-auto-fill" :type="pwdIndex==='close'?'password':'text'" <% if (enableTranslation) { %>:placeholder="t('sys.login.password')"<% } else { %>placeholder="t$t('sys.login.password')$t$"<% } %> v-model:value="formData.password" />
                      <div class="aui-eye">
                        <img :src="eyeKImg" alt="开启" v-if="pwdIndex==='open'"  @click="pwdClick('close')" />
                        <img :src="eyeGImg" alt="关闭"  v-else-if="pwdIndex==='close'"  @click="pwdClick('open')" />
                      </div>
                    </div>
                  </FormItem>
                  <FormItem>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:lock-outlined"/>
                      <Input class="fix-auto-fill" :type="confirmPwdIndex==='close'?'password':'text'" <% if (enableTranslation) { %>:placeholder="t('sys.login.confirmPassword')"<% } else { %>placeholder="t$t('sys.login.confirmPassword')$t$"<% } %> v-model:value="formData.confirmPassword" />
                      <div class="aui-eye">
                        <img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex==='open'" @click="confirmPwdClick('close')" />
                        <img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex==='close'" @click="confirmPwdClick('open')" />
                      </div>
                    </div>
                  </FormItem>
                  <FormItem name="policy">
                    <div class="aui-flex">
                      <div class="aui-flex-box">
                        <div class="aui-choice">
                          <Checkbox  v-model:checked="formData.policy" />
                          <span style="color: #1b90ff;margin-left: 4px"><% if (enableTranslation) { %>{{ t('sys.login.policy') }}<% } else { %>t$t('sys.login.policy')$t$<% } %></span>
                        </div>
                      </div>
                    </div>
                  </FormItem>
                </div>
              </div>
              <div class="aui-formButton">
                <div class="aui-flex">
                  <a class="aui-link-login aui-flex-box" @click="registerHandleClick"><% if (enableTranslation) { %> {{ t('sys.login.registerButton') }}<% } else { %>t$t('sys.login.registerButton')$t$<% } %></a>
                </div>
                <div class="aui-flex">
                  <a class="aui-linek-code aui-flex-box" @click="goBackHandleClick"><% if (enableTranslation) { %>{{ t('sys.login.backSignIn') }}<% } else { %>t$t('sys.login.backSignIn')$t$<% } %></a>
                </div>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, unref, toRaw } from 'vue';
  import { Form, FormItem, Input, Checkbox } from 'ant-design-vue';
  import { Icon } from '@begcode/components';
  import { getSmsCaptcha, register } from '@/api-service/sys/user';
  import { SmsEnum } from '@/views/account/login/useLogin';
  import { useMessage } from '@/hooks/web/useMessage';
  import jeecgAdTextImg from '@/assets/loginmini/icon/jeecg_ad_text.png';
  import eyeKImg from '@/assets/loginmini/icon/icon-eye-k.png';
  import eyeGImg from '@/assets/loginmini/icon/icon-eye-g.png';
  <%_ if (enableTranslation) { _%>
  import { useI18n } from '@/hooks/web/useI18n';
  <%_ } _%>

  defineOptions({
    name: 'MiniRegister',
  });

  const emit = defineEmits(['go-back', 'success', 'register']);

  <%_ if (enableTranslation) { _%>
  const { t } = useI18n();
  <%_ } _%>
  const { notification, createMessage } = useMessage();
  const formRef = ref();
  const formData = reactive<any>({
    username: '',
    mobile: '',
    smscode: '',
    password: '',
    confirmPassword: '',
    policy: false,
  });
  //是否显示获取验证码
  const showInterval = ref<boolean>(true);
  //60s
  const timeRuning = ref<number>(60);
  //定时器
  const timer = ref<any>(null);
  //密码眼睛打开关闭
  const pwdIndex = ref<string>('close');
  //确认密码眼睛打开关闭
  const confirmPwdIndex = ref<string>('close');

  /**
   * 返回
   */
  function goBackHandleClick() {
    emit('go-back');
    initForm();
  }

  /**
   * 获取手机验证码
   */
  async function getLoginCode() {
    if (!formData.mobile) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.mobilePlaceholder')<% } else { %>'t$t('sys.login.mobilePlaceholder')$t$'<% } %>);
      return;
    }
    const result = await getSmsCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.REGISTER });
    if (result) {
      const TIME_COUNT = 60;
      if (!unref(timer)) {
        timeRuning.value = TIME_COUNT;
        showInterval.value = false;
        timer.value = setInterval(() => {
          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
            timeRuning.value = timeRuning.value - 1;
          } else {
            showInterval.value = true;
            clearInterval(unref(timer));
            timer.value = null;
          }
        }, 1000);
      }
    }
  }

  function registerHandleClick() {
    if (!formData.username) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.accountPlaceholder')<% } else { %>'t$t('sys.login.accountPlaceholder')$t$'<% } %>);
      return;
    }
    if (!formData.mobile) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.mobilePlaceholder')<% } else { %>'t$t('sys.login.mobilePlaceholder')$t$'<% } %>);
      return;
    }
    if (!formData.smscode) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.smsPlaceholder')<% } else { %>'t$t('sys.login.smsPlaceholder')$t$'<% } %>);
      return;
    }
    if (!formData.password) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.passwordPlaceholder')<% } else { %>'t$t('sys.login.passwordPlaceholder')$t$'<% } %>);
      return;
    }
    if (!formData.confirmPassword) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.confirmPassword')<% } else { %>'t$t('sys.login.confirmPassword')$t$'<% } %>);
      return;
    }
    if (formData.password !== formData.confirmPassword) {
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.diffPwd')<% } else { %>'t$t('sys.login.diffPwd')$t$'<% } %>);
      return;
    }
    if(!formData.policy){
      createMessage.warn(<% if (enableTranslation) { %>t('sys.login.policyPlaceholder')<% } else { %>'t$t('sys.login.policyPlaceholder')$t$'<% } %>);
      return;
    }
    registerAccount();
  }

  /**
   * 注册账号
   */
  async function registerAccount() {
    try {
      const resultInfo = await register(
        toRaw({
          username: formData.username,
          password: formData.password,
          phone: formData.mobile,
          smscode: formData.smscode,
        })
      );
      if (resultInfo && resultInfo.data.success) {
        notification.success({
          message: <% if (enableTranslation) { %>t('sys.api.successTip')<% } else { %>'t$t('sys.api.successTip')$t$'<% } %>,
          description: resultInfo.data.message || <% if (enableTranslation) { %>t('sys.api.registerMsg')<% } else { %>'t$t('sys.api.registerMsg')$t$'<% } %>,
          duration: 3,
        });
        emit('success', { username: formData.username, password: formData.password });
        initForm();
      } else {
        notification.warning({
          message: <% if (enableTranslation) { %>t('sys.api.errorTip')<% } else { %>'t$t('sys.api.errorTip')$t$'<% } %>,
          description: resultInfo.data.message || <% if (enableTranslation) { %>t('sys.api.networkExceptionMsg')<% } else { %>'t$t('sys.api.networkExceptionMsg')$t$'<% } %>,
          duration: 3,
        });
      }
    } catch (error: any) {
      notification.error({
        message: <% if (enableTranslation) { %>t('sys.api.errorTip')<% } else { %>'t$t('sys.api.errorTip')$t$'<% } %>,
        description: error.message || <% if (enableTranslation) { %>t('sys.api.networkExceptionMsg')<% } else { %>'t$t('sys.api.networkExceptionMsg')$t$'<% } %>,
        duration: 3,
      });
    }
  }

  /**
   * 初始化表单
   */
  function initForm() {
    Object.assign(formData,{username:'',mobile: '', smscode: '', password: '', confirmPassword: '', policy: false})
    if(!unref(timer)){
      showInterval.value = true;
      clearInterval(unref(timer));
      timer.value = null;
    }
    formRef.value.resetFields();
  }

  /**
   * 密码打开或关闭
   * @param value
   */
  function pwdClick(value) {
    pwdIndex.value = value;
  }

  /**
   * 确认密码打开或关闭
   * @param value
   */
  function confirmPwdClick(value) {
    confirmPwdIndex.value = value;
  }

  defineExpose({
    initForm
  })
</script>
<style lang="less" scoped>
@import '@/assets/loginmini/style/home.less';
@import '@/assets/loginmini/style/base.less';
.aui-input-line .aui-icon{
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  font-size: 20px !important;
}
</style>
