<template>
  <div>
    <template v-for="(item, index) in getOptions" :key="index">
      <span>{{ index != 0 ? "、" : "" }}{{ item[config.label] }}</span>
    </template>
  </div>
</template>
<script lang="ts" setup>
// const props = withDefaults(
//     defineProps<{
//         options: any[]
//         value: any
//         config: Record<string, string>
//     }>(),
//     {
//         options: () => [],
//         config: () => ({
//             label: 'name',
//             value: 'value'
//         })
//     }
// )
const props = defineProps({
  options: {
    type: Object,
    default: () => [],
  },
  value: {
    type: [Object, String, Number],
    default: () => 0,
  },
  config: {
    type: Object,
    default: () => {
      return {
        label: "name",
        value: "value",
      };
    },
  },
});

const values = computed(() => {
  if (props.value !== null && typeof props.value !== "undefined") {
    return Array.isArray(props.value)
      ? props.value
      : String(props.value).split(",");
  } else {
    return [];
  }
});

const getOptions = computed(() => {
  return props.options.filter((item) =>
    values.value.includes(item[props.config.value])
  );
});
</script>
