import Taro, { Component } from '@tarojs/taro';
import Authorize from '@components/authorize'
import FormIdCollector from '@components/formIdCollector'
import './index.scss'
import { AtTabs, AtTabsPane } from 'taro-ui'
import "taro-ui/dist/style/components/tabs.scss"
import { queryActivityList } from '@services/activity'
import Activity from './index'
import News from '../news/index'
import { savePoint, updatePoint } from '@services/common'
import { connect } from '@tarojs/redux'


let pageIndex = 1

@connect(({ user, city }) => ({ user, city }))
export default class active extends Component {

  config = {
    navigationBarTitleText: '活动资讯'
  }

  state = {
    current: 0,
    recordId: undefined, // 埋点ID
  }
  
  componentWillMount() {
    // App.zhuge.track('查看活动列表页面')
    savePoint({
      event: 'list',
      eventType: 'activity',
      propertyName: '活动列表',
      data: '{}'
    }).then(res => {
      this.setState({
        recordId: res.recordId
      })
      console.log('活动列表')
    })
  }

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }

  handleClick(value) {
    this.setState({
      current: value
    })
  }

  renderLogin() {
    return <Authorize></Authorize>
  }

  render() {
    const { person: { phone, tel } } = this.props.user.userInfo

    return !phone && !tel ? this.renderLogin() : (
      <View style="height:100vh">
        <AtTabs className="tab-box" scroll current={this.state.current} tabList={[{ title: '热门活动' }, { title: '最新资讯' }]} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <FormIdCollector>
              <Activity ></Activity >
            </FormIdCollector>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View >
              <News ></News>
            </View>
          </AtTabsPane>
        </AtTabs>
      </View>
    );
  }
}