<script setup lang="ts">
import type { AggItem } from "@/types/search.types";
import { onMounted, ref, type PropType } from "vue"

const props = defineProps({
  title: String,
  checked: {
    type: Array<String>,
    default: [],
  },
  aggs: {
    type: Object as PropType<AggItem[]>,
    required: true,
  }
});

const selected = ref<string[]>([])

const emits = defineEmits<{
  (e: "change", selected: string[]): void;
}>()

function onChange(selected: string[]) {
  emits("change", selected)
}

onMounted(() => {
  selected.value = props.checked as string[]
})
</script>

<template>
  <a-card :title="title">
    <a-checkbox-group v-model:value="selected" style="width: 100%" @change="onChange">
      <a-row v-for="(item, index) in aggs" :key="index">
        <a-col :span="20">
          <a-checkbox :value="item.key">{{ item.key }}</a-checkbox>
        </a-col>
        <a-col :span="4"> {{ item.count }}</a-col>
      </a-row>
    </a-checkbox-group>
  </a-card>
</template>