<script setup lang="ts">
  import { NodeProps } from '@vue-flow/core';
  import { Icon } from '/@/components/Icon';
  import { Tooltip } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { NodeData } from '../../../types/node';

  const props = defineProps<{
    nodeProps?: NodeProps<NodeData>;
  }>();

  const ROUTER = useRouter();

  const handleClick = () => {
    const { data } = props.nodeProps?.data || ({} as NodeData);
    const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
    if (configuration.ruleChainId) {
      ROUTER.push(`/rule/chain/${configuration.ruleChainId}`);
    }
  };
</script>

<template>
  <div class="w-full h-6 flex justify-end">
    <Tooltip color="#fff">
      <template #title>
        <span class="text-slate-500 italic">打开规则链</span>
      </template>
      <Icon
        @click="handleClick"
        icon="material-symbols:login"
        class="cursor-pointer svg:text-lg svg:text-light-50 border-1 border-light-50 bg-purple-400 hover:bg-purple-500 rounded"
      />
    </Tooltip>
  </div>
</template>