import Taro, { Component } from '@tarojs/taro';
import getUserPhone from '@utils/getUserPhone'
import { dispatchSignin, dispatchSigninCheck } from '@actions/activity'
import { connect } from '@tarojs/redux'
import './index.scss'
import ready from '@utils/ready'

@connect(state => ({ ...state.user }), { dispatchSignin, dispatchSigninCheck })
export default class Index extends Component {
  config = {
    navigationBarTitleText: '签到'
  }
  state = {
    isSigned: false
  }
  componentWillMount() {
    // App.zhuge.track('进入活动签到页面')

    ready.queue(() => {
      this.props.dispatchSigninCheck(1).then(res => {
        this.setState({
          isSigned: res
        })

        if (res) {
          setTimeout(() => {
            Taro.switchTab({
              url: `/pages/project/index`
            })
          }, 2000)
        }
      })
    })

  }

  getPhoneNumber(e) {
    getUserPhone(e, (phoneNumber) => {
      if (!phoneNumber) {
        Taro.showToast({
          title: '签到失败',
          icon: 'none'
        })
        return
      }

      // App.zhuge.track('获取手机号', {
      //   '手机号': phoneNumber
      // })

      this.props.dispatchSignin(1).then(res => {
        // App.zhuge.track('签到成功', {
        //   '活动主题': '悦见姑苏新营销之美'
        // })
        Taro.showToast({
          title: '签到成功'
        })
        this.setState({
          isSigned: true
        })
        setTimeout(() => {
          Taro.switchTab({
            url: `/pages/project/index`
          })
        }, 3000)
      })
    })
  }
  render() {
    const { userInfo: { person: { nickname } } } = this.props
    const { isSigned } = this.state

    return (
      <View className="page">
        {/* <Image className="bg" mode="aspectFit" src={require('@assets/poster-bg.jpg')}></Image> */}
        {
          (isSigned) ? (
            <Button type="primary" className="btn">{nickname},您已签到成功</Button>
          ) : (
              <Button type="warn" className="btn" open-type="getPhoneNumber" onGetphonenumber={this.getPhoneNumber}>签到 </Button>
            )
        }
      </View>
    );
  }
}