import Taro, { Component } from '@tarojs/taro'
import getUserPhone from '@utils/getUserPhone'
import './index.scss'

const grantIcon = require('@assets/helpgroup/shouquan.png')
const logoImg = require('@assets/index/logo.png')
const bgImg = require('@assets/helpgroup/bg.png')

export default class Index extends Component {

  state = {}

  componentDidMount() {
    const { user = {}} = this.props
    if (user.phone && typeof this.props.onSuccess === 'function') {
      this.props.onSuccess();
    }

  }
  getPhoneNumber(e) {
    getUserPhone(e, (phoneNumber) => {
      if (!phoneNumber) {
        Taro.showToast({
          title: '获取手机号失败',
          icon: 'none'
        })
        return
      } else {        
        if (typeof this.props.onSuccess === 'function') {
          this.props.onSuccess();
        }
      }
    })
  }

  renderMaskBanner() {
    return (
      <View>
        <Image src={bgImg} className='bg_img'></Image>
        <View className="phone-page">
          <View className="content">
            <Image src={logoImg} className='logo_img'></Image>
            <View className="text">
              授权手机后,可享受以下功能
          </View>
            <View className="flex">
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>在线咨询
            </View>
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>收藏分享楼盘
            </View>
            </View>
            <View className="flex">
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>专属顾问
            </View>
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>参与助力活动            </View>
            </View>
            <View className="flex">
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>推荐客户
            </View>
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>参与拼团活动
            </View>
            </View>
            <View className="flex">
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>获取积分好礼
            </View>
              <View className="item">
                <Image className="shouquan" src={grantIcon} ></Image>更多精彩权益
            </View>
            </View>
            <Button className="btn" open-type="getPhoneNumber" lang="zh_CN" onGetphonenumber={this.getPhoneNumber}>授权手机</Button>
          </View>
        </View>
      </View>
    )
  }
  render() {
    const { user = {}} = this.props

    return (
      <Block>
        {!user.phone && this.renderMaskBanner()}
      </Block>
    )
  }
}
