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

import EmptyPage from '@components/empty-page'
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 Index extends Component {

  config = {
    navigationBarTitleText: '积分明细'
  }

  state = {
    choose:1,
    recordAll:[],
    record1:[],
    record2:[],
    records:[],
    points:0
  }

  componentWillMount() {
    const { points, from } = this.$router.params
    this.loadRecords()
    this.setState({
      points:points
    })
  }

  loadRecords() {
    Taro.showLoading()
    this.props.dispatchPointsRecords().then(res => {
      this.checkChoose(res.records)
      Taro.hideLoading()
    })
  }

  checkChoose(data){
     const record1=[]
     const record2=[]
     data.forEach(function(val,index){
       if(val.pointsAmount>0){
         record1.push(val)
       }else{
          record2.push(val)
       }
     })
     this.setState({
       recordAll:data,
       record1:record1,
       record2:record2,
       records:data
     })
  }

  onViewDetail(item) {
     this.setState({
       choose:item,
     })
     if(item==1){
       var records=this.state.recordAll
       this.setState({
         records:records
       })
     }
     if(item==2){
       var records=this.state.record1
       this.setState({
         records:records
       })
     }
     if(item==3){
       var records=this.state.record2
       this.setState({
         records:records
       })
     }
    // Taro.navigateTo({
    //   url: `/pages/shop/detail/index?id=${item.targetId}&from=record`
    // })
  }

  goRule(){
    Taro.navigateTo({
      url: `/pages/shop/rule/index`
    })
  }

  render() {

    // const { pointsRecords: { records = [] } } = this.props,

    return (
    <View>
      <Image className="bg" src={require('@assets/shop/bg.jpg')}/>
      <View className='topBox'>
          <View className='jifen'>{points}</View>
          <View className='tip'>当前积分</View>
          <View onClick={this.goRule} className='ruleBtn'>
              <Image className="lie" src={require('@assets/shop/list.png')}/>
              <View className='rule'>积分规则</View>
          </View>
      </View>
      <View className='chooseBox'>
         <Text onClick={this.onViewDetail.bind(this,1)} className={choose==1?'choose':''}>全部</Text>
         <Text onClick={this.onViewDetail.bind(this,2)} className={choose==2?'choose':''}>积分收入</Text>
         <Text onClick={this.onViewDetail.bind(this,3)} className={choose==3?'choose':''}>积分支出</Text>
      </View>
      <View className='line'></View>
      <ScrollView
        scrollY
        scroll-with-animation
        enable-back-to-top
        className="list"
        style={{
          height: '65vh'
        }}>
        {
          this.state.records.length === 0 ? '' : (
              this.state.records.map(item => (
                <View className="list-item" key={item.recId}>
                  <View className="top">
                    <View className="title-state">{item.recordName}</View>
                    <View className="title-time">{dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</View>
                  </View>
                  <View className="bottom">
                    <View className={item.pointsAmount>0?'coin1':'coin2'}>{item.pointsAmount>0?'+'+item.pointsAmount:item.pointsAmount}</View>
                  </View>
                </View>
              ))
          )
        }

      </ScrollView>
      </View>
    );
  }
}
