import {useState, useEffect, CSSProperties} from 'react'
import {Cell, InfiniteLoading} from '@nutui/nutui-react-taro'
import {pageUserBalanceLog} from "@/api/user/balance-log";
import {UserBalanceLog} from "@/api/user/balance-log/model";
import {formatCurrency} from "@/utils/common";
import {View} from '@tarojs/components'

const InfiniteUlStyle: CSSProperties = {
  height: '100vh',
  width: '100%',
  padding: '0',
  overflowY: 'auto',
  overflowX: 'hidden',
}

const Wallet = () => {
  const [list, setList] = useState<UserBalanceLog[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)

  useEffect(() => {
    reload()
  }, [])

  const loadMore = async () => {
    setPage(page + 1)
    reload();
  }

  const reload = () => {
    pageUserBalanceLog({page}).then(res => {
      console.log(res)
      const newList = res?.list || [];
      setList([...list, ...newList])
      setHasMore(newList.length > 0)
    })
  }

  return (
    <>
      <ul style={InfiniteUlStyle} id="scroll">
        <InfiniteLoading
          target="scroll"
          hasMore={hasMore}
          onLoadMore={loadMore}
          onScroll={() => {
            console.log('onScroll')
          }}
          onScrollToUpper={() => {
            console.log('onScrollToUpper')
          }}
          loadingText={
            <>
              加载中
            </>
          }
          loadMoreText={
            <>
              没有更多了
            </>
          }
        >
          <View className="p-4">
            {list.map((item, index) => (
              <Cell.Group key={`${item.logId}-${index}`} className="mb-4">
                <Cell className="flex flex-col gap-2 p-4">
                  <View className="flex justify-between items-start w-full">
                    <View className="flex-1">
                      <View className="font-medium text-base text-gray-800 mb-1">
                        {item.scene === 10 ? '会员充值' : item.scene === 20 ? '用户消费' : item.scene === 30 ? '管理员操作' : '订单退款'}
                      </View>
                      <View className="text-sm text-gray-500">
                        {item.comments}
                      </View>
                    </View>
                    <View className={`text-lg font-bold ${
                      item.scene === 10 ? 'text-orange-500' : ''
                    }`}>
                      {item.scene === 10 ? '+' : '-'}
                      {formatCurrency(Number(item.money), 'CNY') || '0.00'}
                    </View>
                  </View>

                  <View className="flex justify-between w-full items-center text-xs text-gray-400 mt-2">
                    <View>
                      {item.createTime}
                    </View>
                    <View>余额：{item?.balance}</View>
                  </View>

                  {item.remark && (
                    <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
                      备注: {item.remark}
                    </View>
                  )}
                </Cell>
              </Cell.Group>
            ))}
          </View>
        </InfiniteLoading>
      </ul>
    </>
  )
}
export default Wallet
