import { Button, Canvas, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useCallback, useEffect, useState } from 'react'
import InfiniteScrollPaging from '@/components/InfiniteScrollPaging'
import AddressList from '@/components/AddressList'
import { depositListApi } from '@/api/deposit'
import './index.scss'
import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
import useLogin from '@/use/useLogin'

const DepositList = () => {
  useLogin()
  const { fetchData, state } = depositListApi()
  // 渲染（数据）
  const [data, setData] = useState({
    list: [],
    total: 0,
  })
  // 数据更新
  const handleChange = useCallback((result) => {
    setData({
      list: result.data.list,
      total: result.data.total,
    })
  }, [])

  return (
    <View className="credit-used">
      <InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
        {data.list?.map((item, index) => {
          const res: any = item
          return (
            res.amount_received_this_time != 0 && (
              <View key={index} className="credit-used-list">
                <View className="credit-used-list-left">
                  <View className="credit-used-list-type">{res.type_name}</View>
                  <View className="credit-used-list-date">{formatDateTime(res.create_time)}</View>
                </View>
                <View className="credit-used-list-right">
                  <View className="credit-used-list-right-price">
                    <View className={`credit-used-list-price ${[1, 2, 3].includes(res.type as never) ? 'red' : 'green'}`}>
                      {[1, 2, 3].includes(res.type as never) ? '+' : '-'}
                      {formatPriceDiv(res.amount_received_this_time)}
                    </View>
                    <View className="credit-used-list-orderno">余额：{formatPriceDiv(res.wallet_balance)}</View>
                  </View>
                  <Text className="iconfont icon-a-moreback"></Text>
                </View>
              </View>
            )
          )
        })}
        {/* {data.length>0&&<View className="credit-used-list"></View>} */}
        <View className="credit-used-list"></View>
      </InfiniteScrollPaging>
    </View>
  )
}

export default DepositList
