<script setup lang="ts">
import type { User } from '#/api/system/user/model';
import type { TaskInfo } from '#/api/workflow/task/model';

import { computed, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { ElDescriptions, ElDescriptionsItem, ElMessageBox } from 'element-plus';

import {
  getTaskByTaskId,
  taskOperation,
  terminationTask,
} from '#/api/workflow/task';

import { userSelectModal } from '.';

const emit = defineEmits<{ complete: [] }>();

const taskInfo = ref<TaskInfo>();

/**
 * 是否显示 加签/减签操作
 */
const showMultiActions = computed(() => {
  if (!taskInfo.value) {
    return false;
  }
  if (Number(taskInfo.value.nodeRatio) > 0) {
    return true;
  }
  return false;
});

const [BasicDrawer, drawerApi] = useVbenDrawer({
  title: '流程干预',
  class: 'w-[800px]',
  fullscreenButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const { taskId } = drawerApi.getData() as { taskId: string };
    taskInfo.value = await getTaskByTaskId(taskId);
  },
});

/**
 * 转办
 */
const [TransferDrawer, transferDrawerApi] = useVbenDrawer({
  connectedComponent: userSelectModal,
});
function handleTransfer(userList: User[]) {
  if (userList.length === 0 || !taskInfo.value) return;
  const current = userList[0];
  ElMessageBox.confirm(
    `确定转办给${current?.nickName}吗?`,
    '转办',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await taskOperation(
      { taskId: taskInfo.value!.id, userId: current!.userId },
      'transferTask',
    );
    emit('complete');
  }).catch(() => {});
}

/**
 * 审批终止
 */
function handleTermination() {
  if (!taskInfo.value) {
    return;
  }
  ElMessageBox.confirm(
    '确定终止当前审批流程吗？',
    '审批终止',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await terminationTask({ taskId: taskInfo.value!.id });
    emit('complete');
  }).catch(() => {});
}

const [AddSignatureDrawer, addSignatureDrawerApi] = useVbenDrawer({
  connectedComponent: userSelectModal,
});
function handleAddSignature(userList: User[]) {
  if (userList.length === 0 || !taskInfo.value) return;
  const userIds = userList.map((user) => user.userId);
  ElMessageBox.confirm(
    '确认加签吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await taskOperation(
      { taskId: taskInfo.value!.id, userIds },
      'addSignature',
    );
    emit('complete');
  }).catch(() => {});
}

const [ReductionSignatureDrawer, reductionSignatureDrawerApi] = useVbenDrawer({
  connectedComponent: userSelectModal,
});
function handleReductionSignature(userList: User[]) {
  if (userList.length === 0 || !taskInfo.value) return;
  const userIds = userList.map((user) => user.userId);
  ElMessageBox.confirm(
    '确认减签吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await taskOperation(
      { taskId: taskInfo.value!.id, userIds },
      'reductionSignature',
    );
    emit('complete');
  }).catch(() => {});
}
</script>

<template>
  <BasicDrawer>
    <ElDescriptions v-if="taskInfo" :column="2" border size="large">
      <ElDescriptionsItem label="任务名称">
        {{ taskInfo.nodeName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="节点编码">
        {{ taskInfo.nodeCode }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="开始时间">
        {{ taskInfo.createTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="流程实例ID">
        {{ taskInfo.instanceId }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="版本号">
        {{ taskInfo.version }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="业务ID">
        {{ taskInfo.businessId }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <TransferDrawer mode="single" @finish="handleTransfer" />
    <AddSignatureDrawer mode="multiple" @finish="handleAddSignature" />
    <ReductionSignatureDrawer
      mode="multiple"
      @finish="handleReductionSignature"
    />
    <template #footer>
      <template v-if="showMultiActions">
        <el-button @click="() => addSignatureDrawerApi.open()">加签</el-button>
        <el-button @click="() => reductionSignatureDrawerApi.open()">
          减签
        </el-button>
      </template>
      <el-button @click="() => transferDrawerApi.open()">转办</el-button>
      <el-button type="danger" @click="handleTermination">终止</el-button>
    </template>
  </BasicDrawer>
</template>
