<template>
  <view class="phone">
    <view class="phone-topclose" @click="emit('editLoginStateHandler', 1)">
      <u-icon name="close" size="22" color="#000"></u-icon>
    </view>
    <view class="phone-title">手机验证登录</view>
    <view>
      <up-input placeholder="请输入手机号" border="bottom" placeholderClass="placeholderClass" v-model="params.phoneNum">
        <template #suffix>
          <view class="phone-suffix" @click="sendCodeHandler">{{ countdown === 60 ? '获取验证码' : `${countdown}秒后可重新获取` }}</view>
        </template>
      </up-input>
      <view style="height: 24rpx"></view>
      <up-input placeholder="请输入验证码" border="bottom" placeholderClass="placeholderClass" v-model="params.code"></up-input>
    </view>
    <view class="bluetext" style="margin-top: 28rpx" @click="emit('editLoginStateHandler', 3)">账号密码登录</view>
    <view style="color: red; margin-top: 20rpx">*未注册用户在登录后自动注册</view>
  </view>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance, ComponentPublicInstance } from 'vue'
import useTimeHandler from '@/hooks/useTimeChange'
import { getSendMessage, getMessageLogin, getIndex } from '@/api'
import type { PhoneCodeLoginType, IndexType } from '../../../types'
import { DebounceBy } from '../../../utils/debounceBy'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const [countdown, startCountdown] = useTimeHandler()

const emit = defineEmits(['editLoginStateHandler'])

const params = reactive({
  phoneNum: '',
  code: ''
})

const loginHandler = async () => {
  console.log(uni.getStorageSync('cid'), 'cid---------------------')
  const { result }: { result: PhoneCodeLoginType } = await getMessageLogin({ ...params, cid: uni.getStorageSync('cid') })

  uni.setStorageSync('token', result.token)

  uni.setStorageSync('im_token', result.im_token)

  uni.setStorageSync('userId', result.userId)

  console.log(uni.getStorageSync('cid'), 'cid传值')

  // const { result: IndexData }: { result: IndexType } = await getIndex()

  // if (IndexData?.isHavePwd == 1) return proxy.$h.jumpUrl()

  setTimeout(() => {
    uni.$u.toast('登录成功')
  }, 1000)

  uni.reLaunch({ url: '/pages/index/index' })
}

const clickGetCodeHandler = async () => await getSendMessage({ phoneNum: params.phoneNum })

const sendCodeHandler = DebounceBy(() => {
  if ([null, undefined, ''].includes(params.phoneNum)) return uni.$u.toast('请输入手机号')

  if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(params.phoneNum)) return uni.$u.toast('请输入正确的手机号')

  startCountdown(clickGetCodeHandler)
}, 2000)

defineExpose({ loginHandler })
</script>

<style lang="scss" scoped>
.phone {
  box-sizing: border-box;
  padding: 0 64rpx;
  margin: 236rpx 0 0;

  &-title {
    color: #323233;
    font-size: 60rpx;
    font-weight: 700;
    margin-bottom: 98rpx;
  }
  &-topclose {
    position: fixed;
    top: 100rpx;
    left: 32rpx;
  }
  &-suffix {
    color: #c1c1c6;
    font-size: 28rpx;
    font-weight: 700;
  }
}
:deep(.u-input) {
  padding: 26rpx 9px !important;
  font-size: 36rpx !important;
}
.placeholderClass {
  color: #c1c1c6;
  font-size: 36rpx;
  font-weight: 700;
}
</style>