<template>
  <div>
    <el-button type="primary" @click="completeTask()">{{ $t("process.completeTask") }}</el-button>
    <el-button type="warning" @click="rejectTask()">{{ $t("process.rejectTask") }}</el-button>
    <el-button type="info" @click="delegateTask()">{{ $t("process.entrustTask") }}</el-button>
    <my-task-delegate v-if="myTaskDelegateVisible" ref="myTaskDelegateRef"></my-task-delegate>
    <my-task-handle v-if="myTaskHandleVisible" ref="myTaskHandleRef"></my-task-handle>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from "vue";
import MyTaskDelegate from "./my-task-delegate.vue";
import MyTaskHandle from "./my-task-handle.vue";
import { useRoute } from "vue-router";
const route = useRoute();

const myTaskDelegateVisible = ref(false);
const myTaskHandleVisible = ref(false);
const myTaskDelegateRef = ref();
const myTaskHandleRef = ref();
const dataForm = reactive({
  taskId: route.query.taskId
});

const completeTask = () => {
  myTaskHandleVisible.value = true;
  nextTick(() => {
    myTaskHandleRef.value.dataForm.taskId = dataForm.taskId;
    myTaskHandleRef.value.init("complete");
  });
};

const rejectTask = () => {
  myTaskHandleVisible.value = true;
  nextTick(() => {
    myTaskHandleRef.value.dataForm.taskId = dataForm.taskId;
    myTaskHandleRef.value.init("reject");
  });
};

const delegateTask = () => {
  myTaskDelegateVisible.value = true;
  nextTick(() => {
    myTaskDelegateRef.value.dataForm.taskId = dataForm.taskId;
    myTaskDelegateRef.value.init();
  });
};
</script>
