<!-- 
  编辑财务应付明细
 -->
<template>
    <SysDialog class="financial-blldetail-set" :visible="dialog.visible" v-bind="getBindValue" @onClose="onclose"
        @onConfirm="confirm">
        <template #content>
            <el-divider content-position="left">
                <span class="title">
                    账单明细：
                </span>
            </el-divider>
            <el-form ref="financialBillDetailSetFormRef" :model="financialBillDetailSetForm"
                :rules="financialBillDetailSetState.rulesFinancialBillDetailSet" inline>
                <BaseFormItem :id="financialBillDetailSetForm.id" ref="basisListRef"
                    :schemas="financialBillDetailSetState.basisSchemas" :data-source="financialBillDetailSetForm"
                    @change-form="changeFinancialBillDetailSetForm" />
            </el-form>
        </template>
        <template #defineFooter>
            <span class="dialog-footer">
                <el-button type="primary" @click="confirm">保存</el-button>
                <el-button type="danger" @click="onclose">取消</el-button>
            </span>
        </template>
    </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import BaseFormItem from "@/components/BaseFormItem/BaseFormItem.vue";
import { reactive } from 'vue';
import { FinancialBillDetailDto } from "@/api/financial/financialBillDetailList/financialBillDetailListModle";
import { useFinancialBillDetailSet } from "@/composables/financial/financialBillDetailList/useFinancialBillDetailSet";

const emit = defineEmits<{
    (e: 'saveConfirm', params: FinancialBillDetailDto, onclose: Fn): void
}>()
// 弹框一些配置
const getBindValue = reactive({
    title: "编辑财务应付明细",
    width: "72%",
    height: 0,
    isFooter: true
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();
const {
    financialBillDetailSetForm,
    financialBillDetailSetState,
    financialBillDetailSetFormRef,
    basisListRef,
    show,
    onclose,
    confirm,
    changeFinancialBillDetailSetForm
} = useFinancialBillDetailSet(onClose, onShow, emit)
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show
});
</script>
<style lang="scss" scoped>
.financial-blldetail-set {
    .title {
        font-weight: bold;
    }
}
</style>