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 = {}

  statusMap = {
    0: {
      text: '未领取',
      cls: 'yilingqu'
    },
    1: {
      text: '已领取',
      cls: 'yihexiao'
    },
  }

  componentWillMount() {
    this.loadRecords()
  }

  loadRecords() {
    const { userInfo: { person: { personId } } } = this.props
    const payload = { personId }
    Taro.showLoading()
    this.props.dispatchGoodsExchangeRecords(payload).then(res => {
      Taro.hideLoading()
    })
  }

  getStaTxt(status) {
    return this.statusMap[status].text
  }
  getStaCls(status) {
    return this.statusMap[status].cls
  }
  onViewDetail(item) {
    Taro.navigateTo({
      url: `/pages/shop/detail/index?id=${item.targetId}&from=record`
    })
  }
  render() {
    const { exchangeRecords: { records = [] } } = this.props
    return (
      <ScrollView
        scrollY
        scroll-with-animation
        enable-back-to-top
        className="list"
        style={{
          height: '100vh'
        }}>
        {
          records.length === 0 ? <EmptyPage text="暂无兑换记录哦~" /> : (
            records.map(item => (
              <View className="list-item" key={item.recId} onClick={this.onViewDetail.bind(this, item)}>
								<Image className="cardBg" mode="aspectFill"  src={item.status==0?require('@assets/person/card2.png'):require('@assets/person/card1.png')}/>
								<View className="top">
									<View className="title-time">兑换时间:{dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</View>
									<View className="title-state">{item.status==0?"未领取":"已领取"}</View>
								</View>
								<View className="bottom">
									<Image className="botttom_img" mode="aspectFill" src={item.image} />
									<View className="bottom-right">
										<View className="bottom-right-top">
											<View className="product-name">{item.targetName}</View>
											<View className="product-score">{item.points}积分</View>
										</View>
										<View className="bottom-right-down">领取地址:{item.address}</View>
									</View>
								</View>
							</View>
            ))
          )
        }
        
      </ScrollView>
    );
  }
}