<script setup lang="ts">
import { computed } from 'vue'
import num from '@/utils/num'

const props = defineProps<{
  bg: string
  icon: string
  iconSize: any
  amount: any
  popover: {
    title: string
    icon: string
  }
}>()

defineOptions({ name: 'UserAssetsItem' })

const amountText = computed(() => num.formatAmount(props.amount))
</script>

<template>
  <ItemPopover
    placement="bottom"
    :data="{
      iconName: popover.icon,
      personalCount: amount,
      rewardName: popover.title,
    }"
  >
    <div
      class="user-assets-item"
      :style="{
        background: bg,
      }"
    >
      <span>{{ amountText }}</span>
      <Icon :name="icon" :size="iconSize" />
    </div>
  </ItemPopover>
</template>

<style lang="scss" scoped>
.user-assets-item {
  width: 18.33vh;
  height: 4vh;
  border-radius: 4vh;
  position: relative;
  color: #fff;
  margin-left: $space-6;
  cursor: pointer;

  .x-icon {
    position: absolute;
    left: -0.33vh;
    top: -1.5vh;
  }
  $ml: 5.67vh;
  span {
    width: calc(100% - $ml);
    height: 4vh;
    line-height: 4vh;
    display: inline-block;
    margin-left: $ml;
    margin-top: -0.17vh;
    font-family: $font-special;
    font-size: $font-size-3;
    text-align: center;
    padding-right: $space-1;
  }
}
</style>
