From 4345ba6b6e1b26d905ef9b62bacacdf213222ce9 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sat, 16 Apr 2022 02:37:25 +0800
Subject: [PATCH] feat: add emojis for recipe

---
 src/components/DishTag.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/DishTag.vue b/src/components/DishTag.vue
index ce58aaa..ea0b4ad 100644
--- a/src/components/DishTag.vue
+++ b/src/components/DishTag.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useGtm } from '@gtm-support/vue-gtm'
+import { meat, staple, vegetable } from '~/data/food'
 import type { RecipeItem } from '~/types'
 defineProps<{
   dish: RecipeItem
@@ -15,6 +16,21 @@ const triggerGtm = (val: string) => {
     label: '跳转菜谱',
   })
 }
+
+const getDishName = (dish: RecipeItem) => {
+  const name = dish.name
+  const emojis: string[] = []
+  dish.stuff.forEach((item) => {
+    const kinds = [vegetable, meat, staple]
+    kinds.forEach((kind) => {
+      kind.forEach((m) => {
+        if (m.name === item)
+          emojis.push(m.emoji)
+      })
+    })
+  })
+  return `${emojis.join(' ')} ${name}`
+}
 </script>
 
 <template>
@@ -24,6 +40,6 @@ const triggerGtm = (val: string) => {
     bg="blue-300 opacity-20"
     @click="triggerGtm(dish.name)"
   >
-    <span text="sm blue-700 dark:blue-200">{{ dish.name }}</span>
+    <span text="sm blue-700 dark:blue-200">{{ getDishName(dish) }}</span>
   </a>
 </template>