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

export default () => {
  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) => {
          let 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">处理中</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>
  )
}