<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 } 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);
</script>
