<script setup lang="ts">
import type { PropType } from "vue";
import CompanySelectItem from "./CompanySelectItem.vue";
import type { Prop } from "./CompanySelectItem.vue";

defineProps({
  data: {
    type: Array as PropType<Prop[]>,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "change", event: {index: number, checked: boolean}): void;
}>();

function onItemChange(index: number, checked: boolean) {
  emits("change", {index, checked});
}
</script>

<template>
  <CompanySelectItem
    v-for="(item, i) in data"
    :key="i"
    :data="item"
    @change="onItemChange(i, $event)"
    class="select-item"
    :class="{'kede-checked': item.checked}"
  />
</template>

<style scoped lang="scss">
.select-item {
  margin-top: 0.5em;
}

.kede-checked {
  background-color: #E4F4FF;
}
</style>