import { Component } from 'react'
import { View, Text, Image } from '@tarojs/components'
import './index.less'
import statementRecordsIcon from '../../../images/statementRecordsIcon.png'
export default class Index extends Component {


  state = {
    records: [
      { month: '2020年06月结算单', amount: '70' },
      { month: '2020年05月结算单', amount: '85' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
      { month: '2020年04月结算单', amount: '92' },
    ]
  }

  render () {
    return (
      <View className='index'>
        {/* 结算单记录列表 */}
        <View className='record-list'>
          {this.state.records.map((item, index) => (
            <View className='record-item' key={index}>
              <View className='left'>
                <Image src={statementRecordsIcon} className='icon' />
                <Text className='month'>{item.month}</Text>
              </View>
              <View className='right'>
                <Text className='amount'>¥{item.amount}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>
    )
  }
}
