<template>
  <div class="results">
    <div
      v-for="evaluation in evaluations"
      :key="evaluation.id"
      class="list-item"
    >
      <label class="acpw-item">
        <div>
          <input
            type="radio"
            :value="evaluation"
            v-model="selectedEvaluation"
            name="item"
          />
        </div>

        <accompanying-period-work-evaluation-item :eval="evaluation" />
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AccompanyingPeriodWorkEvaluation } from "../../../types";
import { defineProps, ref, watch } from "vue";
import AccompanyingPeriodWorkEvaluationItem from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  evaluations: AccompanyingPeriodWorkEvaluation[];
}>();
const selectedEvaluation = ref<AccompanyingPeriodWorkEvaluation | null>(null);

// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits();

watch(selectedEvaluation, (newValue) => {
  emit("update:selectedEvaluation", newValue);
});
</script>

<style>
.acpw-item {
  display: flex;
}
</style>
