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 {
  getCodeScene,

} from '@services/common'
import { parseQueryString, getQueryString } from '@utils/tools'
import { NONAME } from 'dns';
import ready from '@utils/ready'
export default class checkin extends Component {

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

  componentWillMount () {
    ready.queue(() => {
      const router = Taro.getStorageSync('router')

      const { id = router.query.id, type = router.query.type || '' } = parseQueryString(router.query.params)
     
      if (!id) {
        getQrCodeParams(this.$router.params.scene).then(res => {
          this.setState({ id: res.id, type: res.type }, () => {
            this.setState({ id, type })
            this.getcheckinDetails(id, type)
          })
        }).catch(err => {
          Taro.showToast({
            title: '没有找到活动',
            icon: 'none'
          })
        })
      } else {
        this.setState({ id, type })
        this.getcheckinDetails(id, type)
      }
      console.log(id, 'id-----')

      // const routers = wx.getLaunchOptionsSync()

      // const { query: { scene } } = routers
      // console.log(routers, 'routers-----')


      // console.log(scene, 'query-----')
      // getCodeScene(scene).then(res => {

      //   let params = JSON.parse(res).scene

      //   let id = getQueryString(params, 'id')
      //   let type = getQueryString(params, 'type')

      //   this.setState({ id, type })
      //   this.getcheckinDetails(id, type)
      // })

    })



  }
  // const router = Taro.getStorageSync('router')



  // const { id = router.query.id , type = router.query.type || '' } = parseQueryString(router.query.params)
  // console.log(id, 'id-----')
  // this.setState({ id, type })
  componentDidShow () {
    // const { id, type } = this.state
    // this.getcheckinDetails(id, type)
  }
  // dynamicId
  getcheckinDetails (id, type) {
    Taro.showLoading()

    checkinDetails(id, type).then(res => {
      console.log('data:', 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}`,
        icon: 'none'
      })

      console.error(err)
    })
  }

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

  render () {
    const { dynamic = {}, enlist = {}, person = {} } = this.state.data || {}
    const { activityStatus } = dynamic || {}
    // console.log(enlist, 'enlist')
    return (
      <View className="checkin" style="width:100vw;height:100vh;" >

        {/* <checkinsuccess></checkinsuccess> */}
        {/* <achievePhone></achievePhone> */}
        <View>
          <Image className="img" mode="aspectFill" src={dynamic.listImgUrl}  ></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">
          {activityStatus === 1 && <View style="text-align: center;color:#666666">
            活动未开始
        </View>
          }
          {activityStatus === 2 && <View style="text-align: center;color:#666666">
            活动已结束
        </View>
          }

          {activityStatus===0 &&
            <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>

    );
  }
}