<script setup lang="ts">
import type { MenuLeafFlat } from '@/request/model/manage.model';

const props = defineProps<{ menus?: MenuLeafFlat[]; loading?: boolean }>();
const selected = defineModel('selected', { default: [] });

const label = shallowRef<string[]>([]);
watch(
  [() => props.menus, selected],
  ([menus, selected], oldValue, onCleanup) => {
    for (const id of selected) {
      const menu = menus.find((menu) => menu.id === id);
      if (menu) label.value.push(menu.label);
    }
    triggerRef(label);
    onCleanup(() => (label.value = []));
  },
  { immediate: true }
);
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <van-tag plain type="primary" v-for="item in label" :key="item">{{ item }}</van-tag>
  </div>
</template>

<style scoped lang="scss"></style>
