<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import { $t } from '../locales';
import { useFlowStore } from '../stores';
import { contentTypeRecord, taskBatchStatusEnum } from '../constants/business';
import AddNode from './add-node.vue';

defineOptions({
  name: 'CallbackNode'
});

interface Props {
  modelValue?: Flow.NodeModelType;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  modelValue: () => ({})
});

interface Emits {
  (e: 'update:modelValue', modelValue: Flow.NodeModelType): void;
}

const emit = defineEmits<Emits>();

const store = useFlowStore();

const nodeConfig = ref<Flow.NodeModelType>({});
const popoverVisible = ref<Record<number, boolean>>({});

watch(
  () => props.modelValue,
  val => {
    nodeConfig.value = val;
  },
  { immediate: true, deep: true }
);

const reData = (data: Flow.NodeModelType, addData: Flow.NodeModelType) => {
  if (!data.childNode) {
    data.childNode = addData;
  } else {
    reData(data.childNode, addData);
  }
};

const delTerm = () => {
  if (nodeConfig.value.childNode) {
    if (nodeConfig.value.conditionNodes![0].childNode) {
      reData(nodeConfig.value.conditionNodes![0].childNode, nodeConfig.value.childNode);
    } else {
      nodeConfig.value.conditionNodes![0].childNode = nodeConfig.value.childNode;
    }
  }
  nextTick(() => {
    emit('update:modelValue', nodeConfig.value.conditionNodes![0].childNode!);
  });
};

const currentIndex = ref<number>(0);
const drawer = ref<boolean>(false);
const detailDrawer = ref<boolean>(false);
const form = ref<Flow.ConditionNodeType>({});

// const save = (val: Flow.ConditionNodeType) => {
//   nodeConfig.value.conditionNodes![currentIndex.value] = val;
//   emit('update:modelValue', nodeConfig.value);
// };

const show = (index: number) => {
  if (store.type === 0) {
    currentIndex.value = index;
    form.value = JSON.parse(JSON.stringify(nodeConfig.value.conditionNodes![index]));
    drawer.value = true;
  } else {
    detailDrawer.value = true;
  }
};

const cardDrawer = ref<boolean>(false);
const detailId = ref<string>('');
const detailIds = ref<string[]>([]);

const showDetail = (item: Flow.ConditionNodeType, index: number) => {
  detailIds.value = [];
  if (store.type === 2) {
    item.jobBatchList?.forEach(job => {
      if (job.id) {
        detailIds.value?.push(job.id);
      } else if (job.jobId) {
        detailId.value = job.jobId.toString();
      }
    });
    if (detailIds.value.length === 0) {
      detailDrawer.value = true;
      return;
    }
    cardDrawer.value = true;
  } else if (store.type === 1) {
    detailDrawer.value = true;
  } else {
    show(index);
  }
};

const getClass = (item: Flow.ConditionNodeType) => {
  if (props.disabled) {
    if (store.type === 2) {
      return `node-error node-error-${
        item.taskBatchStatus ? taskBatchStatusEnum[item.taskBatchStatus].name : 'default'
      }`;
    }
    return 'node-error';
  }
  return 'auto-judge-def auto-judge-hover';
};
</script>

<template>
  <div class="node-wrap">
    <div class="branch-box">
      <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
        <div class="condition-node min-h-230px">
          <div class="condition-node-box pt-0px">
            <NPopover
              :show="popoverVisible[index] && store.type === 2"
              @update:show="(visible: boolean) => (popoverVisible[index] = visible)"
            >
              <div class="popover">
                <NDivider vertical />
                <NButton text class="popover-item">
                  <icon-ant-design:redo-outlined />
                  <span>{{ $t('snail.retry') }}</span>
                </NButton>
                <NDivider vertical />
                <NButton text class="popover-item">
                  <icon-ant-design:dash-outlined />
                  <span>{{ $t('snail.ignore') }}</span>
                </NButton>
              </div>
              <template #trigger>
                <div class="auto-judge" :class="getClass(item)" @click="showDetail(item, index)">
                  <div class="title">
                    <span class="text text-#935af6">
                      <NBadge processing :color="item.workflowNodeStatus === 1 ? '#52c41a' : '#ff4d4f'" />
                      {{ item.nodeName }}
                    </span>
                    <icon-ant-design:close-outlined v-if="!disabled" class="close" @click.stop="delTerm" />
                  </div>
                  <div class="content min-h-81px">
                    <div v-if="!item.callback?.webhook" class="placeholder">
                      {{ $t('node.callback.conditionNodes.webhookTip') }}
                    </div>
                    <template v-if="item.callback?.webhook">
                      <div class="flex justify-between">
                        <span class="content_label">Webhook:</span>
                        <Nellipsis class="w-116px">{{ item.callback.webhook }}</Nellipsis>
                      </div>
                      <div>
                        <span class="content_label">{{ $t('node.callback.conditionNodes.contentType') }}:</span>
                        {{ contentTypeRecord[item.callback.contentType!] }}
                      </div>
                      <div>.........</div>
                    </template>
                  </div>
                  <NTooltip v-if="store.type === 2 && item.taskBatchStatus">
                    <template #title>{{ taskBatchStatusEnum[item.taskBatchStatus].title }}</template>
                    <SvgIcon
                      class="error-tip"
                      :color="taskBatchStatusEnum[item.taskBatchStatus].color"
                      size="24px"
                      :icon="taskBatchStatusEnum[item.taskBatchStatus].icon"
                      @click.stop="() => {}"
                    />
                  </NTooltip>
                </div>
              </template>
            </NPopover>
            <AddNode v-model="item.childNode!" :disabled="disabled"></AddNode>
          </div>
        </div>
        <slot v-if="item.childNode" :node="item"></slot>
        <div v-if="index == 0" class="top-left-cover-line"></div>
        <div v-if="index == 0" class="bottom-left-cover-line"></div>
        <div v-if="index == nodeConfig.conditionNodes!.length - 1" class="top-right-cover-line"></div>
        <div v-if="index == nodeConfig.conditionNodes!.length - 1" class="bottom-right-cover-line"></div>
      </div>
    </div>
    <AddNode v-if="nodeConfig.conditionNodes!.length > 1" v-model="nodeConfig.childNode!" :disabled="disabled" />
    <!--
 <CallbackDetail v-if="store.type !== 0" v-model:open="detailDrawer" v-model="nodeConfig.conditionNodes![0]" />
    <CallbackDrawer v-model:open="drawer" v-model="form" @save="save" />
    <DetailCard v-if="store.TYPE !== 0 && cardDrawer" :id="detailId" v-model:open="cardDrawer" :ids="detailIds">
      <div style="margin: 20px 0; border-left: #f5222d 5px solid; font-size: medium; font-weight: bold">
        <span style="padding-left: 18px">回调节点详情</span>
      </div>
      <ADescriptions :column="1" bordered :label-style="{ width: '120px' }">
        <ADescriptionsItem label="节点名称">{{ nodeConfig.conditionNodes![0].nodeName }}</ADescriptionsItem>
        <ADescriptionsItem label="webhook">{{ nodeConfig.conditionNodes![0].callback?.webhook }}</ADescriptionsItem>
        <ADescriptionsItem label="请求类型">
          {{ ContentTypeEnum[nodeConfig.conditionNodes![0].callback?.contentType!] }}
        </ADescriptionsItem>
        <ADescriptionsItem label="密钥">{{ nodeConfig.conditionNodes![0].callback?.secret }}</ADescriptionsItem>
      </ADescriptions>
    </DetailCard>
-->
  </div>
</template>

<style scoped lang="scss">
.popover {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .popover-item {
    height: 42px;
    display: flex;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    span {
      margin-inline-start: 0;
    }

    .anticon {
      font-size: 22px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
