import Taro, { Component } from '@tarojs/taro';
import { getWindowHeight } from '@utils/style'
import './index.scss'

import ready from '@utils/ready'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/shop'
import dayjs from 'dayjs'

@connect(state => ({ ...state.shop, ...state.user }), { ...actions })
export default class Shop extends Component {
  config = {
    navigationBarTitleText: '积分规则'
  }

  state = {
     pointRule:[]
  }

  componentWillMount() {
    this.loadRecords()
  }

  loadRecords() {
    Taro.showLoading()
    this.props.dispatchPointsRule().then(res => {
      this.setState({
        pointRule:res.records
      })
      Taro.hideLoading()
    })
  }

  render() {

    const {pointRule} = this.state

    return (
      <View className="page">
        <View className='rule_title'>
          <Text>积分项</Text>
          <Text>奖励积分</Text>
          <Text>时间</Text>
        </View>
        <ScrollView
          scrollY
          scroll-with-animation
          enable-back-to-top
          className="list"
          style={{
            height: '65vh'
          }}>
          {
            pointRule.length === 0 ? '' : (
                pointRule.map(item => (
                   <View className='rule_item'  key={item.ruleId}>
                     <Text>{item.ruleName}</Text>
                     <Text>+{item.pointsAmount}</Text>
                     <Text>{dayjs(item.updateDate).format('YYYY-MM-DD HH:mm:ss')}</Text>
                   </View>
                ))
            )
          }
         </ScrollView>
      </View>
    );
  }
}
