<script setup lang="ts">
import { ChapterType, ChapterTypeLabels } from "@/types/report.types";
import { ref } from "vue";

defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  }
});

const emits = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "ok", vaule: ChapterType[]): void;
}>();

const categoryOptions = ChapterTypeLabels.map((item) => ({
  label: item.label,
  value: item.key
}))

const checkedCategories = ref<ChapterType[]>([]);

function onOk() {
  let values: ChapterType[] = [];
  for (let item of categoryOptions) {
    if (checkedCategories.value.find(x => x == item.value)) {
      values.push(item.value)
    }
  }
  emits("ok", values);
  emits("update:visible", false);
  reset();
}

function onCancel() {
  emits("update:visible", false);
  reset();
}

function reset() {
  checkedCategories.value = [];
}
</script>

<template>
  <a-modal
    :visible="visible"
    title="选择章节类型"
    :ok-button-props="{ disabled: checkedCategories.length == 0 }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-checkbox-group v-model:value="checkedCategories" name="checkboxgroup">
      <div v-for="(item, index) in categoryOptions" :key="index" class="category-item">
        <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
      </div>
    </a-checkbox-group>
  </a-modal>
</template>

<style scoped lang="scss">
.category-item {
  height: 2em;
  line-height: 2em;
}
</style>
