import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { AtDivider, AtList, AtListItem, AtGrid, AtButton } from 'taro-ui'

// import achievePhone from '@components/achievePhone'
import { checkinDetails, checkinActive } from '@services/checkin'
import { parseQueryString } from '@utils/tools'

export default class checkin extends Component {

  state = {
    id: undefined,
    type: undefined,
    data: {},
  }

  componentWillMount () {
    const router = Taro.getStorageSync('router')
    const { id, type } = parseQueryString(router.query.params)
    this.setState({ id, type })
    this.getcheckinDetails(id, type)
  }
  // dynamicId
  getcheckinDetails (id, type) {
    Taro.showLoading()

    checkinDetails(id, type).then(res => {
      Taro.hideLoading()
      this.setState({
        data: res,
      })      
    })
  }

  checkinActive () {
    const enlistId = this.state.data.enlist.enlistId
    Taro.showLoading()
    checkinActive(enlistId).then(res => {
      Taro.hideLoading()

      // TODO: 需要依据 type 跳转
      Taro.navigateTo({
        url: '/pages/checkin/checkinsuccess/index?addPoints=' + res.addPoints,      
      })

    }).catch((err) => {
      Taro.showToast({
        title: `失败: ${err.message}`
      })

      console.error(err)
    })
  }

  toactivity = (id) => {
    Taro.navigateTo({
      url: '/pages/activity/detail/index',
      query: { id }
    })
  }

  render () {
    const { dynamic = {}, enlist = {}, person = {} } = this.state.data || {}

    return (
      <View className="checkin" style="width:100vw;height:100vh;" >

        {/* <checkinsuccess></checkinsuccess> */}
        {/* <achievePhone></achievePhone> */}
        <View>
          <Image className="img" src={dynamic.imgUrl}  ></Image>
        </View>
        <View style="margin-bottom:20px"  >
          <View className="text1"> <Text>{dynamic.title}</Text></View>
        </View >

        {enlist.enlistId != null && <View>
          <View style="text-align: center;display:inline-block;width:100vw;">
            <View style="text-align: center;display:inline-block;" className="line">- - - - - - - - - - - - - -   </View>
            <View style="display:inline-block;" className="text2">活动报名信息</View>
            <View style="text-align: center;display:inline-block;" className="line">- - - - - - - - - - - - -  </View>
          </View>

          <View className="text3">
            <View className='at-row'>
              <View className='at-col at-col-3'>用户名：</View>
              <View className='at-col at-col-9'>{person.name || person.nickname}</View>
            </View>
            <View className='at-row'>
              <View className='at-col at-col-3'>手机号：</View>
              <View className='at-col at-col-9'>{person.tel || person.phone}</View>
            </View>
            <View className='at-row'>
              <View className='at-col at-col-3'>参与人数：</View>
              <View className='at-col at-col-9'>{(enlist.attendNum || 1)}人</View>
            </View>
          </View>

          {!enlist.isCheckin && <Image className="checkinImg" src={require('@assets/checkin/checkin.png')} onClick={this.checkinActive}></Image>}
          {enlist.isCheckin === 1 && <Image className="checkinImg" src={require('@assets/checkin/checkined.png')}></Image>}
          {/* {console.log(data.person.status)} */}
        </View>}
        {enlist.enlistId == null && <View className="unregistered">
        {dynamic.activityStatus === 1 && <View style="text-align: center;color:#666666">
          活动未开始
        </View>
          }
          {dynamic.activityStatus === 2 && <View style="text-align: center;color:#666666">
          活动已结束
        </View>
          }

          {!dynamic.activityStatus && 
            <View>
              <View>
                <Image className="img1" src={require('@assets/checkin/noentry.png')} ></Image>
              </View>
              <View className="message">
                <Text className="messageText" >您还未报名当前活动,请先前往活动报名页报名成功后再进行扫码签到~ </Text>

              </View>

              <AtButton type='primary' className="toactivebutton" onClick={() => { this.toactivity(dynamic.dynamicId) }}>立即前往</AtButton>
            </View>
          }        
        </View>
      }
      </View>

    );
  }
}