<template>
  <view class="flex items-center gap-[26rpx] text-[22rpx] text-[#000]">
    <view v-for="(model, index) of tModel" :key="model.type" class="flex items-center gap-[6rpx]">
      <view
        class="w-[16rpx] h-[16rpx] rounded-full"
        :style="{ backgroundColor: calcTypeName(model.type).roundedBgColor }"
      ></view>
      <text class="text-[22rpx]">{{ calcTypeName(model.type)?.text }}({{ model.count }})</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { countModel, calcTypeName } from '../composable/useWishesList'

const userStore = useUserStore()
const userWhishList = computed(() => userStore.userInfo.wishList)
const { tModel } = countModel(userWhishList.value)
tModel.value = tModel.value
</script>
