isl-vue3/src/components/IntimacyPower/SpecialItemsCard.vue

<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'

const {
  specialIntimacyItems,
  specialIntimacyItemsMinTotal,
  specialIntimacyItemsMaxTotal,
  specialIntimacyItemsAveTotal
} = storeToRefs(usePowerItems())

const headers = ref([
  {
    title: 'Name',
    align: 'start',
    sortable: true,
    value: '1.itemName'
  },
  {
    title: 'Min.',
    align: ' d-none d-lg-table-cell',
    sortable: true,
    key: '1.minItemPower'
  },
  {
    title: 'Max.',
    align: ' d-none d-lg-table-cell',
    sortable: true,
    key: '1.maxItemPower'
  },
  {
    title: 'Owned',
    align: 'end',
    sortable: true,
    key: `1.owned`
  },
  {
    title: 'Min. Total',
    align: ' d-none d-lg-table-cell',
    sortable: false,
    key: `1.minTotalPower`
  },
  {
    title: 'Max. Total',
    align: ' d-none d-lg-table-cell',
    sortable: false,
    key: `1.maxTotalPower`
  },
  {
    title: 'Mean Total',
    align: 'end',
    sortable: false,
    key: `1.aveTotalPower`
  }
])
const sortBy = ref([
  {
    key: '1.minItemPower',
    order: 'asc'
  }
])

const getColor = computed(() => (rarity: number): string => {
  if (rarity === 4) {
    return 'amber'
  } else if (rarity === 3) {
    return 'purple'
  } else if (rarity === 2) {
    return 'blue'
  } else {
    return 'green'
  }
})
</script>

<template>
  <v-card fluid>
    <v-card-title>Special Items</v-card-title>
    <v-card-subtitle>Items from events</v-card-subtitle>
    <v-card-item>
      <v-data-table
        density="compact"
        v-model:sort-by="sortBy"
        :items="[...specialIntimacyItems.entries()]"
        :headers="headers"
      >
        <template v-slot:item.1.itemName="{ item }">
          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
            <v-card variant="text" density="compact" max-width="25vw">
              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
            </v-card>
          </v-tooltip>
          <v-chip :color="`${getColor(item[1].rarity)}`">
            {{ item[1].itemName }}
          </v-chip>
        </template>
        <template v-slot:item.1.owned="{ item }">
          <v-text-field
            reverse
            density="compact"
            hide-details="auto"
            v-model.number="item[1].owned"
            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
          ></v-text-field>
        </template>
        <template v-slot:item.1.minTotalPower="{ item }">
          {{ item[1].minItemPower * item[1].owned }}
        </template>
        <template v-slot:item.1.maxTotalPower="{ item }">
          {{ item[1].maxItemPower * item[1].owned }}
        </template>
        <template v-slot:item.1.aveTotalPower="{ item }">
          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
        </template>
        <template v-slot:tfoot>
          <tfoot>
            <tr>
              <td></td>
              <td class="d-none d-lg-table-cell"></td>
              <td class="d-none d-lg-table-cell"></td>
              <td></td>
              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMinTotal }}</td>
              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMaxTotal }}</td>
              <td class="px-0 text-right font-weight-bold">{{ specialIntimacyItemsAveTotal }}</td>
            </tr>
          </tfoot>
        </template>
      </v-data-table>
    </v-card-item>
  </v-card>
</template>

<style lang="scss" scoped>
:global(.custom-tooltip) {
  padding: 0 !important;
}
</style>