<template>
  <view class="tx-item" @tap="$emit('tap', item)" @longpress="$emit('longpress', item)">
    <view class="icon-wrap" :style="{ background: item.category_color + '20' }">
      <text class="icon-text" :style="{ color: item.category_color }">{{ item.category_name?.[0] || '?' }}</text>
    </view>
    <view class="info">
      <text class="name">{{ item.note || item.category_name || '未分类' }}</text>
      <text class="meta">{{ item.category_name || '未分类' }}{{ hideDate ? '' : ' · ' + formatDate(item.date) }}</text>
    </view>
    <text class="amount" :class="item.type">{{ item.type === 'expense' ? '-' : '+' }}{{ formatAmount(item.amount) }}</text>
  </view>
</template>

<script setup lang="ts">
import { formatAmount, formatDate } from '@/utils/format'

withDefaults(defineProps<{
  item: {
    id: number
    amount: number
    type: 'expense' | 'income'
    note?: string
    date: string
    category_name?: string
    category_icon?: string
    category_color?: string
  }
  hideDate?: boolean
}>(), { hideDate: false })

defineEmits(['tap', 'longpress'])
</script>

<style lang="scss" scoped>
.tx-item {
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  gap: 24rpx;
  border-radius: 20rpx;
  transition: background 0.15s;

  &:active {
    background: #FFF0E6;
  }
}

.icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-text {
  font-size: 36rpx;
  font-weight: 600;
}

.info {
  flex: 1;
  min-width: 0;
}

.name {
  font-size: 28rpx;
  font-weight: 500;
  color: #2D1B1B;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta {
  font-size: 24rpx;
  color: #8B7E7E;
  display: block;
  margin-top: 4rpx;
}

.amount {
  font-family: 'Fredoka', sans-serif;
  font-size: 32rpx;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  &.expense { color: #2D1B1B; }
  &.income { color: #7BC67E; }
}
</style>
