<script setup lang="ts" name="PreviewNodesCondition">
import { computed } from 'vue'
import Outline from '../modules/Outline.vue'
import type { INodes, IPaths, IState } from '../utils/INodes'

const props = defineProps<{
  x: number
  y: number
  node: INodes
}>()

const matrix = computed(() => `matrix(1 0 0 1 ${props.x} ${props.y})`)
const content = computed(() => props.node.conditionParams || '请设置条件')
</script>

<template>
  <g
    v-show="true"
    class="fv-element fv-shape"
    :transform="matrix">
    <g class="fv-visual" clip-path="url(#clipPathRectRadio)">
      <!-- 裁剪 -->
      <defs>
        <rect
          id="clipPathRectRadioDef"
          x="0"
          y="0"
          width="220"
          height="80"
          rx="5"
          ry="5" />
        <clipPath id="clipPathRectRadio">
          <use xlink:href="#clipPathRectRadioDef" />
        </clipPath>
      </defs>
      <!-- 内容 -->
      <rect
        x="0"
        y="24"
        width="220"
        height="56"
        style="fill: white;" />
      <!-- 标题 -->
      <rect
        x="0"
        y="0"
        width="220"
        height="24"
        style="stroke: transparent; stroke-width: 0; fill: rgb(255, 255, 255); fill-opacity: 1;" />
      <!-- 标题 文字 -->
      <foreignObject width="220" height="80">
        <body xmlns="http://www.w3.org/1999/xhtml" class="body-text">
          <div class="ellipsis-3">{{ node.nodeName }}</div>
        </body>
      </foreignObject>
      <!-- <text lineHeight="1.2" class="fv-label" style="font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; fill: rgb(34, 36, 42);">
        <tspan x="16" y="45" fill="#15bc83">
          {{ node.nodeName }}
        </tspan>
        <tspan x="16" y="53" fill="#999">
          {{ content }}
        </tspan>
      </text> -->
    </g>
    <rect
      x="0"
      y="0"
      width="220"
      height="80"
      rx="5"
      ry="5"
      class="rect" />
    <rect
      class="fv-hit fv-hit-all"
      x="0"
      y="0"
      width="220"
      height="80"
      style="fill: transparent; stroke-opacity: 0; stroke: white; stroke-width: 15px;" />
    <Outline :points="[[0,0],[220,80]]" />
  </g>
</template>

<style lang="less" scoped>
.rect {
  stroke: #ccc;
  stroke-width: 2px;
  fill: none;
  pointer-events: none;
  &.active {
    stroke: var(--primary-color);
  }
}

.body-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: transparent;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #15bc83;
  word-break: break-all;
}
.ellipsis-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
</style>