<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, Message } from '@arco-design/web-vue';
import { useIntervalFn } from '@vueuse/core';
import useProviderApi from '@/api/provider';
import { union, map } from 'lodash-es';
import useLoading from '@/hooks/loading';

const emits = defineEmits(['login']);

const { loading, setLoading } = useLoading();

const countTime = ref<number>(0);

const areaOption = ref<string[]>([]);

onMounted(() => {
  useProviderApi.area().then(({ data }) => (areaOption.value = union(map(data, (item) => item.identifier))));
});

const formRef = ref<FormInstance>();
const formValue = reactive({ area: '+86', phone: '', code: '' });

const formRule = {
  phone: [{ required: true, message: '请输入手机号' }],
  code: [{ required: true, message: '请输入验证码' }],
};

const formatCode = (value: string) => {
  formValue.code = value.replace(/\D/g, '').slice(0, 6);
};

const { pause, resume } = useIntervalFn(() => {
  // eslint-disable-next-line no-unused-expressions
  countTime.value <= 0 ? pause() : (countTime.value -= 1);
}, 1000);

const onSend = async () => {
  if (countTime.value !== 0 || (await formRef.value?.validateField('phone'))) {
    return;
  }

  useProviderApi.sms('login', formValue.phone, formValue.area).then(() => {
    Message.success('短信发送成功，请注意查收！');
    countTime.value = 60;
    resume();
  });
};

const onLogin = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      setLoading(true);
      useProviderApi
        .login('phone', formValue)
        .then(({ data }) => emits('login', data))
        .finally(() => setLoading(false));
    }
  });
};
</script>

<template>
  <a-form ref="formRef" :model="formValue" :rules="formRule" class="login-form" layout="vertical">
    <a-form-item field="phone" hide-label>
      <a-select v-model="formValue.area" style="flex: 100px; margin-right: 15px" :options="areaOption"
        :virtual-list-props="{ height: 200 }" />
      <a-input v-model="formValue.phone" style="flex: auto" placeholder="请输入登陆手机号" :max-length="11">
        <template #prefix>
          <icon-phone />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item field="code" hide-label>
      <a-input v-model="formValue.code" hide-button :max-length="6" placeholder="验证码" @input="formatCode">
        <template #prefix>
          <icon-message />
        </template>
        <template #suffix>
          <a-link type="text" class="form-sms-btn" :disabled="countTime !== 0" @click="onSend()">
            {{ countTime <= 0 ? '获取验证码' : countTime + 's' }} </a-link>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item style="margin-bottom: 0" hide-label>
      <a-button type="primary" :long="true" :loading="loading" @click="onLogin">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<style lang="less" scoped>
.login-form {
  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }
}

.form-sms-btn {
  padding-left: -12px;
  font-size: 12px;
}
</style>