import React from 'react'
import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import './style.scss'

export default (props) => {
  const { loading, title, openType, onGetUserInfo, onGetPhoneNumber, onCancel = (x => x) } = props

  const handleGetUserInfo = () => {
    Taro.getUserProfile({
      lang: 'zh_CN',
      desc: '用于完善个人资料',
      success: (res) => {
        onGetUserInfo(res)
      }
    })
  }

  const handlePhoneNumber = (e) => {
    const { errMsg } = e.detail || {}
    if (errMsg === 'getPhoneNumber:ok') {
      onGetPhoneNumber(e.detail || {})
    }
  }

  return (
    <View className='auth-box'>
      <View className='auth-header'>{title}</View>
      <View className='auth-body'>
        {props.children}
      </View>
      <View className='auth-footer'>
        <Button className='auth-btn' type='default' plain onClick={onCancel}>取消</Button>
        {
          openType === 'getUserInfo' ? (
            <Button
              className='auth-btn'
              type='default'
              onClick={handleGetUserInfo}
              loading={loading}
            >确定</Button>
          ) : (
            <Button
              className='auth-btn'
              type='default'
              openType='getPhoneNumber'
              lang='zh_CN'
              onGetPhoneNumber={handlePhoneNumber}
              loading={loading}
            >确定</Button>
          )
        }
      </View>
    </View>
  )
}
