import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { useModel } from '@/store'
import { Label, RadioGroup } from '@tarojs/components'
import index from '@/assets/icons/login/LOGO.png'
import './login.less'


export default (props) => {
  const { getPhone } = useModel('person')

  const [loading, setLoading] = useState(false)
  const [checked, setChecked] = useState(false)

  const handleChange = () => {
    setChecked(true)
  }

  const handlePhoneNumber = (e) => {
    const { errMsg, ...data } = e.detail || {}
    if (errMsg === 'getPhoneNumber:ok') {
      const sessionKey = Taro.getStorageSync('sessionKey')
      getPhone({ ...data, sessionKey }).then(() => {
        setLoading(false)
      }).catch(() => setLoading(false))
    }
  }

  return (
    <view>
      <image className='logo' src={index} />
      <view className='v1'>登录后可继续当前操作</view>
      <button
        disabled={!checked}
        loading={loading}
        className='login'
        openType='getPhoneNumber'
        onGetPhoneNumber={handlePhoneNumber}
      >微信手机号一键登录</button>
      <view className='buttom'>
        <Label>
          <RadioGroup onChange={handleChange}>
            <radio checked={checked} />
          </RadioGroup>
          <view>
            我已阅读知晓并同意 <text>《平台用户服务协议》</text>
          </view>
        </Label>
      </view>
    </view>
  )
}