/**
* 封装内容显示为form的对话框，外部只需传入form相关的配置，以及对话框尺寸标题等即可。
*/
<script lang="ts" setup name="Dialog_form">
import { ref } from 'vue';

const emits = defineEmits(["formDialogBtnClick", "formDialogSelectChange", "formDialogRadioGroupChange"]);

/** { visible: false, size: number, title: string, submitBtnLoading: false, formInfo: { id: xx, items: xx, rules:xx }, btns: { 'cancel': xx, } } */
const props = defineProps({
  dialogConfigInfo: {
    type: Object,
    default: {},
  },
});

const dialogRef = ref();

const dialogInfo = computed(() => {
  return {
    visible: props.dialogConfigInfo.visible,
    size: props.dialogConfigInfo.size,
    direction: "column",
    header: {
      title: props.dialogConfigInfo.title,
    },
    contents: [
      {
        type: 'form',
        title: '',
        formInfo: props.dialogConfigInfo.formInfo
      }
    ],
    footer: {
      btns: [
        { type: "default", label: "取消", value: "cancel" },
        { type: "primary", label: "确定", value: "submit", loading: props.dialogConfigInfo.submitBtnLoading ?? false },
      ],
    },
  }
})

const formDialogBtnClick = (btn, info) => {
  props.dialogConfigInfo.btns[btn.value]?.(btn, info);
};

const formDialogRadioGroupChange = (val, row, item) => {
  emits('formDialogRadioGroupChange', val, row, item);
}

const formDialogSelectChange = (val, item, row) => {
  emits('formDialogSelectChange', val, row, item);
}
defineExpose({
  dialogRef,
});

</script>

<template>
  <Dialog ref="dialogRef" :dialogInfo="dialogInfo" @btnClick="formDialogBtnClick"
    @radioGroupChange="formDialogRadioGroupChange" @select-change="formDialogSelectChange">
    <!-- 默认插槽内容 -->
    <slot></slot>
  </Dialog>
</template>