<template>
  <w-dialog ref="dialogRef" :title="$t('lcdp.bpm.completeTask.dialog.title')" width="800px" :can-maximize="false">
    <template #buttons>
      <w-workflow-action
        ref="workflowActionRef"
        :task-id="taskIdRef"
        :data="formModelValue"
        :action-url="Environment.apiContextPath('/api/flowable/process/operation/complete')"
        @before-submit="beforeSubmit"
        @after-submit="afterSubmit"
      >
      </w-workflow-action>
    </template>
    <w-form
      v-model="formModelValue"
      :cols-num="1"
      :fields="[{ name: 'treatment', label: $t('re.workflow.dialog.entity.treatment'), type: 'textarea', rows: 5, required: true }]"
    >
    </w-form>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Environment } from 'platform-core';

/**
 * 定义组件支持的自定义事件
 */
const emit = defineEmits([
  'afterTaskCompleted', // 提交成功后
]);

const dialogRef = ref();
const taskIdRef = ref<string>('');
const workflowActionRef = ref();
const formModelValue = reactive({
  treatment: undefined,
});

const open = (taskId: string) => {
  taskIdRef.value = taskId;
  formModelValue.treatment = undefined;
  dialogRef.value.show();
};

const close = () => {
  dialogRef.value.hide();
};

const beforeSubmit = async (action, callback) => {
  callback(true);
};

const afterSubmit = () => {
  close();
  emit('afterTaskCompleted');
};

defineExpose({
  open,
  close,
});
</script>
