<template>
  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
    <FormItem name="mobile" class="enter-x">
      <Input size="large" v-model:value="formData.mobile" <% if (enableTranslation) { %>:placeholder="t('sys.login.mobile')"<% } else { %>placeholder="t$t('sys.login.mobile')$t$"<% } %> />
    </FormItem>
    <FormItem name="code" class="enter-x">
      <CountdownInput size="large" v-model:value="formData.code" <% if (enableTranslation) { %>:placeholder="t('sys.login.smsCode')"<% } else { %>placeholder="t$t('sys.login.smsCode')$t$"<% } %> :sendCodeApi="sendCodeApi" />
    </FormItem>
    <FormItem class="enter-x">
      <Button type="primary" size="large" block @click="handleNext" :loading="loading"> 下一步 </Button>
      <Button size="large" block class="mt-4" @click="handleBackLogin">
          <% if (enableTranslation) { %>{{ t('sys.login.backSignIn') }}<% } else { %>t$t('sys.login.backSignIn')$t$<% } %>
      </Button>
    </FormItem>
  </Form>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, computed, unref, toRaw } from 'vue';

  import { Form, Input, Button } from 'ant-design-vue';
  import { CountdownInput } from '@begcode/components';

  <%_ if (enableTranslation) { _%>
  import { useI18n } from '@/hooks/web/useI18n';
  <%_ } _%>
  import { useMessage } from '@/hooks/web/useMessage';
  import { useLoginState, useFormRules, useFormValid, LoginStateEnum, SmsEnum } from '../login/useLogin';
  import { phoneVerify, getSmsCaptcha, phoneLoginApi, getUserInfo} from '@/api-service/sys/user';
  import { useUserStore } from '@/store/modules/user';
  import accountService from '@/api-service/account/account.service';

  export default defineComponent({
    name: 'step1',
    components: {
      Button,
      Form,
      FormItem: Form.Item,
      Input,
      CountdownInput,
    },
    emits: ['nextStep'],
    setup(_, { emit }) {
      <%_ if (enableTranslation) { _%>
      const { t } = useI18n();
      <%_ } _%>
      const userStore = useUserStore();
      const { handleBackLogin } = useLoginState();
      const { notification } = useMessage();

      const formRef = ref();
      const { validForm } = useFormValid(formRef);
      const { getFormRules } = useFormRules();

      const loading = ref(false);
      const formData = reactive({
        mobile: '',
        code: '',
        resetKey: '',
      });

      /**
       * 下一步
       */
      async function handleNext() {
        const data = await validForm();
        if (!data) return;
        const resultInfo = await phoneLoginApi(
          toRaw({
            mobile: data.mobile,
            code: data.code,
          })
        );
        if (resultInfo.id_token) {
          userStore.setToken(resultInfo.id_token);
          const userInfo = await getUserInfo()
          let accountInfo = {
            login: userInfo.login,
            mobile: data.mobile,
            code: data.code,
            resetKey: formData.resetKey,
          };
          emit('nextStep', accountInfo);
        } else {
          notification.error({
            message: <% if (enableTranslation) { %>t('sys.api.errorTip')<% } else { %>'t$t('sys.api.errorTip')$t$'<% } %>,
            description: resultInfo.message || <% if (enableTranslation) { %>t('sys.api.networkExceptionMsg')<% } else { %>'t$t('sys.api.networkExceptionMsg')$t$'<% } %>,
            duration: 3,
          });
        }
      }
      //倒计时执行前的函数
      async function sendCodeApi() {
        const resetKey = await accountService.resetPasswordSmsCode({ mobile: formData.mobile });
        if (resetKey) {
          formData.resetKey = resetKey;
        }
        return new Promise((resolve) => {
          resolve(!!resetKey);
        });
      }
      return {
        <%_ if (enableTranslation) { _%>
        t,
        <%_ } _%>
        formRef,
        formData,
        getFormRules,
        handleNext,
        loading,
        handleBackLogin,
        sendCodeApi,
      };
    },
  });
</script>
