<template>
  <ul id="cyp-conformance-result-dot">
    <li
      class="flex justify-start items-center py-1 pr-4"
      v-for="(act, index) in data"
      :key="index + act"
      :title="act"
    >
      <span class="material-symbols-outlined disc !text-sm align-middle mr-1"
        >fiber_manual_record</span
      >
      <span class="mr-2 block w-12">{{ act.category }}</span>
      <span
        class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block"
        >{{ act.task }}</span
      >
    </li>
  </ul>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ResultDot
 *   Conformance result display with dot icons showing category
 *   and task pairs.
 */

import { ref, watch, onBeforeUnmount } from "vue";
import emitter from "@/utils/emitter";

const props = defineProps(["timeResultData", "select"]);

const data = ref(props.select);

watch(
  () => props.timeResultData,
  (newValue) => {
    data.value = newValue;
  },
  { deep: true },
);

emitter.on("reset", (val) => (data.value = val));

onBeforeUnmount(() => {
  emitter.off("reset");
});
</script>
