<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getAssetWallet } from '@/api/wallet'
  import type { AssetWalletInfo, AssetType } from '@/api/wallet'
  import { onLoad } from '@dcloudio/uni-app'

  // 资产类型和ID (从URL参数获取)
  const assetType = ref<AssetType>('card')
  const assetId = ref<number>(0)

  // 钱包信息
  const walletInfo = ref<AssetWalletInfo | null>(null)

  // 加载状态
  const loading = ref(false)

  // 格式化金额（分转元）
  function formatAmount(amount : number) {
    return `¥${(amount / 100).toFixed(2)}`
  }

  // 获取钱包状态文本
  function getStatusText(status : number, statusText ?: string) {
    if (statusText) return statusText
    const map : Record<number, string> = {
      1: '正常',
      2: '冻结',
      3: '已停用',
    }
    return map[status] || '未知'
  }

  // 获取钱包状态颜色
  function getStatusColor(status : number) {
    const map : Record<number, { bg : string, text : string }> = {
      1: { bg: '#e8f5e9', text: '#2e7d32' }, // 正常
      2: { bg: '#fff3e0', text: '#e65100' }, // 冻结
      3: { bg: '#f5f5f5', text: '#999' }, // 已停用
    }
    return map[status] || { bg: '#f5f5f5', text: '#999' }
  }

  // 格式化时间
  function formatTime(time : string) {
    if (!time) return '-'
    const date = new Date(time)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minute}`
  }

  // 页面加载时获取参数
  onLoad((options) => {
    if (options.asset_type) {
      assetType.value = options.asset_type as AssetType
    }
    if (options.asset_id) {
      assetId.value = Number(options.asset_id)
    }
  })

  // 页面挂载
  onMounted(() => {
    if (assetId.value) {
      loadWalletInfo()
    }
  })

  // 加载钱包信息
  async function loadWalletInfo() {
    if (!assetId.value) {
      uni.$u.toast('缺少资产ID')
      return
    }

    loading.value = true

    try {
      const wallet = await getAssetWallet(assetType.value, assetId.value)
      walletInfo.value = wallet
    }
    catch (error) {
      console.error('加载资产钱包信息失败:', error)
    }
    finally {
      loading.value = false
    }
  }

  // 返回上一页
  function goBack() {
    uni.navigateBack()
  }
</script>

<template>
  <view class="bg-[#fafafa] min-h-screen pb-safe">
    <!-- 加载中 -->
    <view v-if="loading" class="pt-20 center">
      <i class="i-mdi-loading animate-spin text-40px text-[#999]" />
    </view>

    <!-- 钱包信息 -->
    <view v-else-if="walletInfo" class="px-4 pt-4">
      <!-- 余额卡片 -->
      <view
        class="bg-gradient-to-r from-[var(--brand-primary)] to-[var(--brand-primary-light)] rounded-16px shadow-brand-colored p-4 mb-3">
        <view class="flex items-center justify-between mb-3">
          <view>
            <text class="text-13px text-white/70 block mb-1">
              可用余额
            </text>
            <text class="text-32px font-700 text-white block">
              {{ formatAmount(walletInfo.available_balance) }}
            </text>
          </view>
          <view :style="{
              backgroundColor: getStatusColor(walletInfo.status).bg,
              color: getStatusColor(walletInfo.status).text,
            }" class="px-3 py-1 rounded-8px text-12px font-600">
            {{ getStatusText(walletInfo.status, walletInfo.status_text) }}
          </view>
        </view>

        <view class="grid grid-cols-2 gap-3 pt-3 border-t-1px border-white/20">
          <view>
            <text class="text-11px text-white/70 block mb-1">总余额</text>
            <text class="text-14px font-600 text-white">
              {{ formatAmount(walletInfo.balance) }}
            </text>
          </view>
          <view>
            <text class="text-11px text-white/70 block mb-1">冻结金额</text>
            <text class="text-14px font-600 text-white">
              {{ formatAmount(walletInfo.frozen_balance) }}
            </text>
          </view>
        </view>
      </view>

      <!-- 钱包详情 -->
      <view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
        <view class="flex items-center gap-2 mb-3">
          <i class="i-mdi-information-outline text-20px text-[var(--brand-primary)]" />
          <text class="text-15px font-600 text-[#212121]">
            钱包详情
          </text>
        </view>

        <view class="space-y-2">
          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">钱包ID</text>
            <text class="text-13px text-[#212121]">
              {{ walletInfo.wallet_id }}
            </text>
          </view>

          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">资产ID</text>
            <text class="text-13px text-[#212121]">
              {{ walletInfo.resource_id }}
            </text>
          </view>

          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">资产类型</text>
            <text class="text-13px text-[#212121]">
              {{ walletInfo.resource_type === 'iot_card' ? 'IoT卡' : '设备' }}
            </text>
          </view>

          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">币种</text>
            <text class="text-13px text-[#212121]">
              {{ walletInfo.currency }}
            </text>
          </view>

          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">创建时间</text>
            <text class="text-11px text-[#999]">
              {{ formatTime(walletInfo.created_at) }}
            </text>
          </view>

          <view class="flex items-center justify-between">
            <text class="text-13px text-[#666]">更新时间</text>
            <text class="text-11px text-[#999]">
              {{ formatTime(walletInfo.updated_at) }}
            </text>
          </view>
        </view>
      </view>

      <!-- 温馨提示 -->
      <view class="bg-[#fff3e0] rounded-12px p-3 mb-3">
        <view class="flex items-start gap-2">
          <i class="i-mdi-information text-16px text-[#e65100] mt-0.5" />
          <view class="flex-1">
            <text class="text-12px text-[#666] block">
              此钱包为资产专属钱包,余额仅可用于该资产相关的费用支付。
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="pt-20 center flex-col">
      <i class="i-mdi-wallet-outline text-60px text-[#ddd] mb-3" />
      <text class="text-14px text-[#999] mb-2">
        暂无钱包信息
      </text>
      <text class="text-12px text-[#ccc]">
        请检查资产ID是否正确
      </text>
    </view>

    <!-- 底部留白 -->
    <view class="h-8" />
  </view>
</template>

<style scoped>
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .space-y-2>view:not(:last-child) {
    margin-bottom: 8px;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }
</style>
