<template>
  <BasicDialog ref="basicDialogRef" :title="dialogTitle + '审批节点'" @refresh="refreshFromData">
    <template #form>
      <ApprovalNodeCreateForm
        v-if="formOpened"
        ref="approvalNodeFormRef"
        :init-data="props.initData"
        :order-list="props.orderList"
        @success="handleSuccess"
      />
    </template>
    <template #footer>
      <el-button type="primary" @click="handleSumbit">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </BasicDialog>
  <UploadLoading :form-loading="formLoading" v-if="formLoading" />
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import BasicDialog from '@/components/BasicDialog.vue';
  import UploadLoading from '@/components/UploadLoading.vue';
  import ApprovalNodeCreateForm from './ApprovalNodeCreateForm.vue';
  import { ApprovalNodeInstanceRuleForm } from '../types';

  const props = defineProps<{
    isCreate: boolean;
    initData?: ApprovalNodeInstanceRuleForm;
    orderList?: number[];
  }>();

  const emits = defineEmits<{
    (e: 'success'): void;
  }>();

  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
  const approvalNodeFormRef = ref<InstanceType<typeof ApprovalNodeCreateForm>>();

  const dialogTitle = computed(() => (props.isCreate ? '添加' : '编辑'));
  const formLoading = ref(false);
  const formOpened = ref(false);

  const openDialog = () => {
    basicDialogRef.value?.openDialog();
    formOpened.value = true;
  };
  const handleSumbit = () => {
    approvalNodeFormRef.value?.onSumbit();
  };

  const handleSuccess = () => {
    emits('success');
    handleClose();
  };

  const handleClose = () => {
    basicDialogRef.value?.closeDialog();
    formOpened.value = false;
  };
  const refreshFromData = () => {};

  defineExpose({
    openDialog,
  });
</script>

<style scoped lang="scss"></style>
