import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import Disclaimer from '@/components/Disclaimer'
import '@/assets/css/iconfont.css'
import useAuth from '../useAuth'
import './index.scss'

export default (props) => {
  const {
    consultant,
    router,
    page,
  } = props

  const [loading, setLoading] = useState(false)
  const { updatePhoneNumber } = useAuth(consultant, router, page)
  
  const handlePhoneNumber = (e) => {
    const { errMsg, ...data } = e?.detail || {}
    // debugger
    if (errMsg === 'getPhoneNumber:ok') {
      setLoading(true)
      updatePhoneNumber(data).then(() => {
        setLoading(false)
      }).catch((err) => {
        console.error(err)
        setLoading(false)
      })
    } else {
      console.error(errMsg);
      Taro.showToast({
        title: '授权手机失败',
        icon: 'none',
        duration: 2000
      })
    }
  }

  return (
    <View className='components NeedLogin flex-v'>
      <View className='Logo'>
        <Image mode='aspectFit' className='centerLabel' src={require('@/assets/logo.png')} />
      </View>
      <View className='LoginBtn'>
        <button loading={loading} openType='getPhoneNumber' onGetPhoneNumber={handlePhoneNumber}>微信登录</button>
      </View>
      <View className='flex-item'></View>
      <View className='Bottom'>
        <Disclaimer />
      </View>
    </View>
  )
}