import { Component } from 'react'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import './index.less'
import wallet from '../../../images/wallet.png'
import { get_withdraw_record } from '../../../service/money_api'

export default class Index extends Component {
  state = {
    withdraw_record_list: [],
    page: 1,
    page_size: 7, // 每页加载20条
    total: 0,
    loading: false, // 加载状态
    translate_already_money: 0,
  }

  componentDidShow () {
    this.get_withdraw_record()
  }


  get_withdraw_record = async () => {
    if (this.state.loading) return; // 防止重复加载
    this.setState({ loading: true });
    const res = await get_withdraw_record({
      page: this.state.page,
      page_size: this.state.page_size
    })
    console.log(res, 'res')
    this.setState(prevState => ({
      withdraw_record_list: prevState.page === 1 ? res.data.record_list : [...prevState.withdraw_record_list, ...res.data.record_list],
      translate_already_money: res.data.translate_already_money,
      total: res.data.total_count,
      loading: false
    }))
  }

  onReachBottom = () => {
    console.log(this.state.page + 1, 'this.state.page + 1',this.state.page);
    
    if (this.state.withdraw_record_list.length < this.state.total) {
      this.setState(prevState => ({ page: prevState.page + 1 }), this.get_withdraw_record)
    }
  }

  stateToMoney = (status) => {
    console.log(status, 'status');

    switch (status) {
      case 0:
        return { text: '提现中', color: 'orange' }
      case 1:
        return { text: '审核通过，打款中...', color: 'blue' }
      case 7:
        return { text: '已到账', color: '#07d807' }
      case 4:
        return { text: '已拒绝，请联系客服', color: 'red' }
      default:
        return { text: '未知状态', color: 'gray' }
    }
  }

  render () {
    return (
      <ScrollView
        className='index'
        scrollY
        onScrollToLower={this.onReachBottom}
      >
        {/* 累计提现金额 */}
        <View className='total-amount'>
          <View className='left'>
            <Image src={wallet} className='icon' />
            <Text className='title'>累计提现金额</Text>
          </View>
          <View className='amount'>
            <Text className='integer'>{`￥${this.state.translate_already_money}`}</Text>
          </View>
        </View>
        {/* 提现记录 */}
        {this.state.withdraw_record_list.map((item, index) => {
          const statusInfo = this.stateToMoney(item.state);
          return (
            <View className='record-item' key={index}>
              <View className='item-time'>{item.time.replace('T', ' ')}</View>
              <View className='item-amount'>
                <View className='amount'>￥{item.amount}</View>
                <View className='status' style={{ color: statusInfo.color }}>
                  {statusInfo.text}
                </View>
              </View>
            </View>
          )
        })}
      </ScrollView>
    )
  }
}