<script lang="ts" setup>
import * as R from 'ramda'
import {useLogicStore} from "@/pages-login/store/module/logic";
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore} from "@/store";
import {isEmail} from '@/utils'
import {appUserCheckEmailUniquePost, appUserCheckPhoneUniquePost} from '@/service'

interface LoginMethod {
  id: number;
  method: string;
  title: string;
  icon: string;
}

const {t} = useI18n()
const logicStore = useLogicStore()
const configStore = useConfigStore()

const loginMethods = computed<LoginMethod[]>(() => {
  const methods = [
    {
      id: 3,
      method: 'Google',
      title: t('pages-login.index.google-login'),
      icon: '/static/app/images/100204.png',
    },
    // {
    //   id: 2,
    //   method: 'Facebook',
    //   title: t('pages-login.index.facebook-login'),
    //   icon: '/static/app/images/100207.png',
    // },
    {
      id: 1,
      method: 'Apple',
      title: t('pages-login.index.apple-login'),
      icon: '/static/app/images/100208.png',
    },
    // {
    //   id: 4,
    //   method: 'Wechat',
    //   title: t('pages-login.index.wechat-login'),
    //   icon: '/static/app/images/100209.png',
    // },
  ]

  if (R.and(configStore.isApp, configStore.isIos)) {
    return methods
  }

  return methods.filter(item => item.method !== 'Apple')
})

const btnLoading = ref(false)

function handleSubmit() {
  const {email} = logicStore.registerForm
  let type = '';
  console.log('email', email)
  console.log('email', isEmail(email))
  if (!email) return
  if (isEmail(email)) {
    btnLoading.value = true
    appUserCheckEmailUniquePost({
      body: {
        email,
        userPort: 2, // 登录端口2 商户端
      },
      options: {} as any
    }).then(res => {
      console.log('email', res)
      if (res.data) {
        logicStore.loginForm.email = email;
        logicStore.loginForm.type = 'email';
        // 邮箱已存在
        uni.navigateTo({url: '/pages-login/pages/login/index'})
      } else {
        // 邮箱未存在
        type = 'email';
        // 用户没注册
        logicStore.registerForm.type = type;
        logicStore.registerForm.confirmEmail = email;
        uni.navigateTo({url: `/pages-login/pages/sign-up/index?type=${type}`})
      }
    }).finally(() => {
      btnLoading.value = false
    })
  } else {
    btnLoading.value = true
    // 手机号登录
    appUserCheckPhoneUniquePost({
      body: {
        phone: email,
        userPort: 2, // 登录端口2 商户端
      },
      options: {} as any
    }).then(res => {
      type = 'phone';
      if (res.data) {
        logicStore.loginForm.phone = email;
        logicStore.loginForm.type = type;
        // 手机已存在
        uni.navigateTo({url: '/pages-login/pages/login/index'})
      } else {
        // 用户没注册
        logicStore.registerForm.type = type;
        logicStore.registerForm.phone = email;
        logicStore.registerForm.email = '';
        logicStore.registerForm.confirmEmail = '';
        uni.navigateTo({url: `/pages-login/pages/sign-up/index?type=${type}`})
      }
    }).finally(() => {
      btnLoading.value = false
    })
  }
}

function loginByMethod(item: LoginMethod) {
  switch (item.method) {
    case 'Apple': {
      logicStore.appleLogin()
      break
    }
    case 'Facebook': {
      logicStore.facebookLogin()
      break
    }
    case 'Google': {
      logicStore.googleLogin()
      break
    }
    case 'Wechat': {
      logicStore.wechatLogin()
      break
    }
  }
}

const handleLoginByMethod = debounce(Config.debounceLongTime, loginByMethod, {
  atBegin: true
})


function handleGoBack() {
  uni.navigateBack()
}

onUnload(() => {
  logicStore.reset()
})

</script>

<template>
  <view>
    <status-bar/>
    <view class="pl-30rpx pt-72rpx mb-74rpx" @click="handleGoBack">
      <image class="w-34rpx h-30rpx shrink-0" src="@img/chef/2.png"></image>
    </view>
    <view class="px-27rpx">
      <view class="text-50rpx lh-50rpx text-#14181B font-bold">
        {{ t('pages-login.index.title') }}
      </view>
      <view class="mt-30rpx text-28rpx lh-28rpx text-#999 font-bold">
        {{ t('pages-login.index.description') }}
      </view>
      <view class="mt-80rpx">
        <view class="">
          <view v-for="(item,index) in loginMethods"
                :key="item.id" :class="[index>0&&'mt-22rpx']"
                class="center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx"
                @click="handleLoginByMethod(item)"
          >
            <image :src="item.icon" class="shrink-0 mr-16rpx w-40rpx h-40rpx"/>
            <text class="text-28-bold">{{ item.title }}</text>
          </view>
        </view>
        <view class="my-38rpx flex items-center justify-between">
          <view class="w-308rpx h-0rpx border-bottom"></view>
          <text class="text-28-bold">{{ t('common.or') }}</text>
          <view class="w-308rpx h-0rpx border-bottom"></view>
        </view>
        <view class="">
          <view class="flex px-24rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
            <wd-input
                v-model.trim="logicStore.registerForm.email"
                :focus-when-clear="false"
                :maxlength="255"
                :placeholder="t('pages-login.index.input-placeholder')"
                clearable
                custom-class="flex-1"
                no-border
                placeholderStyle="font-size: 32rpx;color: #999;line-height: 32rpx;"
                use-prefix-slot
            >
            </wd-input>
          </view>
        </view>
        <view class="mt-42rpx">
          <wd-button :loading="btnLoading" block custom-class="!h-108rpx !text-36rpx leading-36rpx !rounded-16rpx"
                     loading-color="#000" @click="handleSubmit"
          >
            {{ t('common.continue') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>

</template>

<style lang="scss">

page {
  background-color: #fff;
}
</style>
