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

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

<script setup lang="ts">
import AccompanyingPeriodWorkItem from "./AccompanyingPeriodWorkItem.vue";
import { AccompanyingPeriodWork } from "../../../types";
import { defineProps, ref, watch } from "vue";

const props = defineProps<{
  accompanyingPeriodWorks: AccompanyingPeriodWork[];
  selectedAcpw?: AccompanyingPeriodWork | null;
}>();
const selectedAcpw = ref<AccompanyingPeriodWork | null>(
  props.selectedAcpw ?? null,
);

const emit = defineEmits<{
  "update:selectedAcpw": [value: AccompanyingPeriodWork | null];
}>();

watch(
  () => props.selectedAcpw,
  (val) => {
    selectedAcpw.value = val ?? null;
  },
);

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

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