import {useState, useEffect} from 'react'
import {View, Text} from '@tarojs/components'
import {Empty, Loading} from '@nutui/nutui-react-taro'
import {useRouter} from '@tarojs/taro'
import {getShopDealerCapital} from '@/api/shop/shopDealerCapital'
import type {ShopDealerCapital} from '@/api/shop/shopDealerCapital/model'

const DealerCapitalDetail = () => {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(false)
  const [item, setItem] = useState<ShopDealerCapital>()

  // 获取订单数据
  const reload = async () => {
    const data = await getShopDealerCapital(Number(params.id))
    setItem(data)
  }

  const getFlowType = (index?: number) => {
    if (index === 10) return '电费收益'
    if (index === 20) return '提现支出'
    if (index === 30) return '转账支出'
    if (index === 40) return '转账收入'
    if (index === 50) return '新注册奖励'
    return 'warning'
  }

  // 初始化加载数据
  useEffect(() => {
    reload().then(() => {
      setLoading(true)
    })
  }, [])

  return (
    <View className="min-h-screen bg-gray-50">
      <View className="p-4">
        {loading && !item ? (
          <View className="text-center py-8">
            <Loading/>
            <Text className="text-gray-500 mt-2">加载中...</Text>
          </View>
        ) : item ? (
          <View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
            <View className="flex flex-col justify-center items-center py-8">
              <Text className="text-lg text-gray-300">
                {getFlowType(item.flowType)}
              </Text>
              <View className="text-4xl mt-1 font-semibold flex justify-start">
                <Text className={'subscript text-xl mt-1'}>￥</Text>
                <Text className={'text-4xl'}>{Number(item.money).toFixed(2)}</Text>
              </View>
            </View>

            <View className="flex flex-col justify-between mb-1">
              <Text className="text-sm my-1 text-gray-500">
                收益描述：{item.comments}
              </Text>
              {item.orderNo && (
                <Text className="text-sm my-1 text-gray-500">
                  订单编号：{item.orderNo}
                </Text>
              )}
              <Text className="text-sm my-1 text-gray-500">
                创建时间：{item.createTime}
              </Text>
            </View>
          </View>
        ) : (
          <Empty description="账单不存在" style={{
            backgroundColor: 'transparent'
          }}/>
        )}
      </View>
    </View>
  )
}

export default DealerCapitalDetail
