import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { transferImage } from '@/utils/tools'
import ready from '@/utils/ready'
import { connect } from '@tarojs/redux'
import * as actions from '@/actions/shop'
import { View } from '@tarojs/components';
import { queryUserInfo, doUserSignin } from '@/services/user'
import { ROLE_CODE } from '@/constants/user'
import { withDetail } from '@/utils/page'
const ruleBg = 'https://njcj.oss-cn-shanghai.aliyuncs.com/miniapp/rulebg.png'

@connect(state => ({ ...state.shop, ...state.user, ...state.city, }), { ...actions })
@withDetail({
  track: {
    event: 'points_rule',
    eventType: 'integral',
    propertyName: '查看积分规则',
    data: '{}',
  }
})
export default class Shop extends Component {
  config = {
    navigationBarTitleText: '积分规则'
  }

  state = {
    pointRule: [],
    user: {},
  }

  componentWillMount() {

    this.loadUserInfo()

  }
  loadUserInfo() {
    queryUserInfo().then(user => {
      this.setState({
        user,
      }, () => {
        this.loadRecords(user)
      })
    })
  }
  loadRecords(user) {
    Taro.showLoading()
    this.props.dispatchPointsRule().then(res => {
      if (user.personType == ROLE_CODE['CONSULTANT']) {
        const rules = (res.records || []).filter(item => item.code != 'recommend-customer')
        this.setState({
          pointRule: rules
        })
      } else {
        this.setState({
          pointRule: res.records || []
        })
      }
      this._$_dataReady()
      Taro.hideLoading()
    })
  }

  getBtnName(code) {
    const { user: { havaSigned, phone } } = this.state
    switch (code) {
      case 'checkin':
        return havaSigned ? '已签到' : '签到'
      case 'share-poster':
        return '去分享'
      case 'recommend-customer':
        return '去推荐'
      case 'signup-agent':
        return phone ? '已授权' : '去授权'
      case 'document_verify':
        return '去提交'
      default:
        return '立即参与'
    }
  }
  // 签到
  doSign(pointsAmount) {
    const { user: { id, havaSigned } } = this.state
    if (havaSigned) {
      return
    }
    doUserSignin({ id }).then(res => {
      Taro.showToast({
        title: `签到成功，获取${pointsAmount}积分`,
        icon: 'none'
      })
      setTimeout(() => {
        this.loadUserInfo()
      }, 1000)
    })
  }
  handleItemClick(item) {
    switch (item.code) {
      case 'checkin':
        this.doSign(item.pointsAmount)
        return
      case 'share-poster':
        Taro.switchTab({
          url: '/pages/project/index'
        })
        return
      case 'recommend-customer':
        Taro.navigateTo({
          url: `/useless/pages/agent/recommend/index?type=index&cityId=` + this.props.curCity.id
        })
        return
      case 'signup-agent':
        Taro.navigateTo({
          url: '/pages/person/personDetail/index'
        })
        return
      case 'document_verify':
        Taro.navigateTo({
          url: '/useless/pages/person/profile/index'
        })
        return
      default:
        Taro.getApp().props.projectIndex = 2
        Taro.switchTab({
          url: `/pages/activity/activity`,
          fail: res => {
            Taro.getApp().props.projectIndex = 0
          }
        })
        return
    }

  }

  render() {

    const { pointRule } = this.state

    return (
      // <View className="page" style={`background: url(${transferImage(buildBg)}) no-repeat center;background-size: 100% 100%;`}>
      <View className="page" >
        <Image className="bg-img" src={transferImage(ruleBg)} mode='widthFix'></Image>
        <ScrollView
          scrollY
          scroll-with-animation
          enable-back-to-top
          className="list"
          style={{
            maxHeight: '78vh'
          }}>
          {
            pointRule.length === 0 ? '' : (
              pointRule.map(item => (
                <View className='rule_item' key={item.ruleId}>
                  <View className="item-name">{item.ruleName || "　"}<Text className="item-num">+{item.pointsAmount || 0}</Text><Text className="jifen">积分</Text></View>
                  <View className="item-rule">{item.remark || "　"}</View>
                  <View className={(this.getBtnName(item.code) == '已签到' || this.getBtnName(item.code) == '已授权') ? 'yiqiandao' : "item-btn"} onClick={(this.getBtnName(item.code) == '已签到' || this.getBtnName(item.code) == '已授权') ? "" : this.handleItemClick.bind(this, item)}>{this.getBtnName(item.code)}</View>
                </View>
              ))
            )
          }
        </ScrollView>
      </View >
    );
  }
}
