<script lang="ts" setup>
import type { WorkflowEdgeDto, WorkflowNodeDto } from '#/api/core';

import { computed, ref, watch } from 'vue';

import { Drawer, Form, Input, InputNumber, message, Select } from 'ant-design-vue';

import { deleteEdgeApi, EdgeType, NodeType, updateEdgeApi } from '#/api/core';

const props = defineProps<{
  definitionId: string;
  edgeId: string;
  edges: WorkflowEdgeDto[];
  nodes: WorkflowNodeDto[];
}>();

const emit = defineEmits<{
  close: [];
  deleted: [edgeId: string];
  updated: [edge: WorkflowEdgeDto];
}>();

const edgeTypeOptions = [
  { value: EdgeType.Normal, label: '普通' },
  { value: EdgeType.Approved, label: '通过' },
  { value: EdgeType.Rejected, label: '拒绝' },
];

const formState = ref({
  label: '',
  edgeType: EdgeType.Normal as EdgeType,
  condition: '',
  order: 0,
});

const currentEdge = computed(() =>
  props.edges.find((e) => e.id === props.edgeId),
);

const sourceNode = computed(() => {
  const edge = currentEdge.value;
  if (!edge) return null;
  return props.nodes.find((n) => n.id === edge.sourceNodeId);
});

const showCondition = computed(
  () => sourceNode.value?.nodeType === NodeType.Condition,
);

watch(
  () => props.edgeId,
  () => {
    const edge = props.edges.find((e) => e.id === props.edgeId);
    if (edge) {
      formState.value = {
        label: edge.label ?? '',
        edgeType: edge.edgeType,
        condition: edge.condition ?? '',
        order: edge.order,
      };
    }
  },
  { immediate: true },
);

const loading = ref(false);

async function handleSave() {
  loading.value = true;
  try {
    const result = await updateEdgeApi(props.definitionId, props.edgeId, {
      label: formState.value.label || undefined,
      edgeType: formState.value.edgeType,
      condition: formState.value.condition || undefined,
      order: formState.value.order,
    });
    message.success('保存成功');
    emit('updated', result);
  } catch {
    message.error('保存失败');
  } finally {
    loading.value = false;
  }
}

async function handleDelete() {
  loading.value = true;
  try {
    await deleteEdgeApi(props.definitionId, props.edgeId);
    message.success('连线已删除');
    emit('deleted', props.edgeId);
    emit('close');
  } catch {
    message.error('删除连线失败');
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <Drawer :open="!!edgeId" title="连线属性" :width="360" @close="emit('close')">
    <Form layout="vertical">
      <Form.Item label="标签">
        <Input v-model:value="formState.label" placeholder="请输入连线标签" />
      </Form.Item>
      <Form.Item label="连线类型">
        <Select v-model:value="formState.edgeType" :options="edgeTypeOptions" />
      </Form.Item>
      <Form.Item v-if="showCondition" label="条件表达式">
        <Input
          v-model:value="formState.condition"
          placeholder="请输入条件表达式"
        />
      </Form.Item>
      <Form.Item label="排序">
        <InputNumber
          v-model:value="formState.order"
          :min="0"
          placeholder="排序值"
          class="w-full"
        />
      </Form.Item>
    </Form>
    <div class="flex gap-2">
      <button
        class="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600 disabled:opacity-50"
        :disabled="loading"
        @click="handleSave"
      >
        保存
      </button>
      <button
        class="rounded bg-red-500 px-4 py-2 text-sm text-white hover:bg-red-600 disabled:opacity-50"
        :disabled="loading"
        @click="handleDelete"
      >
        删除连线
      </button>
    </div>
  </Drawer>
</template>
