<script setup lang="ts">
import type { AnalysisOverviewItem } from '../typing';

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  VbenCountToAnimator,
  VbenIcon,
} from '@vben-core/shadcn-ui';

import { desensitize } from '../../../../../../../apps/web-antd/src/util/tool';

interface Props {
  items: AnalysisOverviewItem[];
  myCard: any;
}

defineOptions({
  name: 'AnalysisOverview',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
    <Card v-if="myCard" class="bank-card w-full" title="我的银行卡">
      <CardHeader>
        <CardTitle class="text-xl">{{ myCard?.bank_name }}</CardTitle>
      </CardHeader>

      <CardContent class="card-content flex items-center justify-between">
        <span class="card-number">
          {{ desensitize(myCard?.bank_card, 'bankCard') }}
        </span>
        <VbenIcon
          class="credit-card-icon size-8 flex-shrink-0"
          icon="fluent-emoji-flat:credit-card"
        />
      </CardContent>
      <CardFooter class="card-footer justify-between">
        <span>{{ myCard?.bank_user_name }}</span>
        <span>{{ myCard?.bank_account_type_txt }}</span>
      </CardFooter>
    </Card>
    <template v-for="item in items" :key="item.title">
      <Card :title="item.title" class="w-full">
        <CardHeader>
          <CardTitle class="text-xl">{{ item.title }}</CardTitle>
        </CardHeader>

        <CardContent class="flex items-center justify-between">
          <VbenCountToAnimator
            :decimals="3"
            :end-val="item.value"
            :start-val="0"
            class="text-xl"
            prefix=""
          />
          <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
        </CardContent>
        <CardFooter class="justify-between">
          <span>{{ item.totalTitle }}</span>
          <VbenCountToAnimator
            :decimals="3"
            :end-val="item.totalValue"
            :start-val="0"
            prefix=""
          />
        </CardFooter>
      </Card>
    </template>
  </div>
</template>

<style scoped>
.bank-card {
  padding: 20px;
  color: white;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
  transition: transform 0.2s ease-in-out;
}

.dark .bank-card {
  padding: 20px;
  color: #cd853f; /* 白色文字 */
  background: linear-gradient(
    135deg,
    #3f3f3f 0%,
    #1a1a1a 100%
  ); /* 深色渐变背景 */

  border-radius: 12px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 60%); /* 更深的阴影 */
  transition: transform 0.2s ease-in-out;
}

.bank-card:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: rgb(255 255 255 / 10%);
  border-radius: 8px;
}

.card-number {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji' !important;
  font-size: 24px;
  font-weight: bold;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.credit-card-icon {
  font-size: 24px;
}
</style>
