<!-- 报告模板选择  -->
<script setup lang="ts">
import { onMounted, ref } from "vue"
import * as reportTemplateService from "@/services/reportTemplate.service"
import type { ReportTemplatesResponse } from "@/types/report.types";

const visible = ref(false)

const selectedTemplate = ref<number | null>(null)

const templates = ref<ReportTemplatesResponse>({total: 0, items: []})

const emits = defineEmits<{
  (e: "ok", id: number | null): void;
}>();

function fetchTemplates() {
  reportTemplateService.list().then((resp) => {
    templates.value = resp
  })
}

function onOk() {
  emits("ok", selectedTemplate.value)
}

onMounted(() => {
  fetchTemplates()
})

defineExpose({
  show: () => visible.value = true,
  hide: () => visible.value = false,
})
</script>

<template>
  <a-modal v-model:visible="visible" title="报告模板选择" @ok="onOk">
    <a-radio-group v-model:value="selectedTemplate">
      <a-radio class="radio" :value="item.id" v-for="(item, index) in templates.items" :key="index">
        {{ item.name }}
      </a-radio>
      <a-radio class="radio" :value="null">空白报告</a-radio>
    </a-radio-group>
  </a-modal>
</template>

<style scoped lang="scss">
.radio {
  display: flex;
  height: 2em;
  line-height: 2em;
}
</style>