boursecu_user/src/views/base/home/components/BoursecuAssetsSummary.vue

<template>
  <div ref="rootRef" class="boursecu-assets" :class="`boursecu-assets--${variant}`">
    <div
      v-for="(row, index) in rows"
      :key="row.id"
      :class="['boursecu-assets__row', index > 0 ? 'boursecu-assets__row--spaced' : '']"
    >
      <span class="boursecu-assets__label">{{ row.label }}:</span>
      <strong class="boursecu-assets__value">{{ row.value }}</strong>
      <div class="boursecu-assets__info-wrap">
        <button
          type="button"
          class="boursecu-assets__info-btn"
          :aria-expanded="openRowId === row.id"
          aria-label="اطلاعات بیشتر"
          @click.stop="toggleRow(row.id)"
        >
          <BasicIcon icon="vuesax-linear:info-circle" size="18" :color="iconColor" />
        </button>
      </div>
      <div
        v-if="openRowId === row.id"
        class="boursecu-assets__popup"
        @click.stop
      >
        <div
          v-for="line in row.popupLines"
          :key="line.label"
          class="boursecu-assets__popup-line"
          :class="{
            'boursecu-assets__popup-line--profit': line.tone === 'profit',
            'boursecu-assets__popup-line--loss': line.tone === 'loss',
          }"
        >
          <span class="boursecu-assets__popup-label">{{ line.label }}</span>
          <span class="boursecu-assets__popup-value">{{ line.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { useWalletAssets } from '@/composables/useWalletAssets'
import {
  buildBoursecuHomeAssetRows,
  type BoursecuHomeAssetRowId,
} from '@/utils/productAssets'
import { getTradeBuyPrice, lastPrice } from '@/utils/price'

withDefaults(
  defineProps<{
    variant?: 'mobile' | 'desktop'
    iconColor?: string
  }>(),
  {
    variant: 'mobile',
    iconColor: 'primary',
  }
)

const { assetsSummary } = useWalletAssets()
const rootRef = ref<HTMLElement | null>(null)
const openRowId = ref<BoursecuHomeAssetRowId | null>(null)

const rows = computed(() =>
  buildBoursecuHomeAssetRows(assetsSummary.value, getTradeBuyPrice(lastPrice.value))
)

function toggleRow(rowId: BoursecuHomeAssetRowId) {
  openRowId.value = openRowId.value === rowId ? null : rowId
}

onClickOutside(rootRef, () => {
  openRowId.value = null
})
</script>

<style scoped lang="less">
.boursecu-assets {
  position: relative;
  z-index: 20;
}

.boursecu-assets__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--app-color-primary, #133050);
  font-size: 0.875rem;
}

.boursecu-assets__row--spaced {
  margin-top: 0.5rem;
}

.boursecu-assets__value {
  font-size: 1rem;
  font-weight: 700;
}

.boursecu-assets__info-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.boursecu-assets__info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.boursecu-assets__popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 40;
  width: min(18rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #d4e3de;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.boursecu-assets__popup-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: #374151;

  &:not(:last-child) {
    border-bottom: 1px solid #eef2f1;
  }
}

.boursecu-assets__popup-label {
  flex: 1;
  color: #6b7280;
}

.boursecu-assets__popup-value {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.boursecu-assets__popup-line--profit .boursecu-assets__popup-value {
  color: #16a34a;
}

.boursecu-assets__popup-line--loss .boursecu-assets__popup-value {
  color: #dc2626;
}

.boursecu-assets--desktop {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 12px;

  .boursecu-assets__row {
    justify-content: flex-start;
    font-size: 0.9375rem;
  }

  .boursecu-assets__popup {
    left: 0;
    right: auto;
    transform: none;
    width: min(20rem, calc(100% - 1rem));
    max-width: 20rem;
  }
}
</style>