<script setup lang="ts" name="PreviewNodesTast">
import { computed, inject } 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(() => {
  // const nodeConfig = props.node
  let { userType, userTypeSelectIds, userTypeParams }: {userType: string; userTypeSelectIds: string; userTypeParams: any} = props.node
  let selectedList = userTypeParams
  // let userTypeParams = selectedList = props.node.userTypeParams ? JSON.parse(props.node.userTypeParams) : []
  const str = {
    1: '角色',
    2: '部门',
    3: '岗位',
    4: '审核人',
    5: '上级岗位',
    6: '上级部门'
  }
  const signStr = {
    1: '会签',
    2: '或签'
  }
  let content = ['1', '2', '3', '4'].includes(props.node.userType) ? '请选择审批人' : str[props.node.userType]
  const prefix = str[props.node.userType] + '：'
  if (['1', '2'].includes(props.node.signType)) {
    if (selectedList.length) {
      content = prefix + selectedList.map(l => l.name).join(',')
      // 拼接审核方式字符串
      content += ' ' + selectedList.length + '人'
    }
    content += signStr[props.node.signType]
  }
  return content
})

// 转换userTypeSelectIds为数组
function transIds<T extends {children?: T[], id?: string}>(data: T[], userTypeSelectIds) {
  let arr: T[] = []
  for (const i in data) {
    const item = data[i]
    if (userTypeSelectIds.includes(String(item.id))) {
      arr.push(item)
    } else if (Array.isArray(item.children) && item.children.length) {
      arr = [...arr, ...transIds(item.children, userTypeSelectIds)]
    }
  }
  return arr
}
</script>

<template>
  <g 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, 148, 62); fill-opacity: 1;" />
      <!-- 标题 文字 -->
      <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="18" fill="#fff">
          {{ node.nodeName }}
        </tspan>
        <!-- <tspan x="16" y="53" fill="#999">
          {{ content }}
        </tspan> -->

      </text>
      <foreignObject width="220" height="80">
        <body xmlns="http://www.w3.org/1999/xhtml" class="body-text">
          <div class="ellipsis-2">{{ content }}</div>
        </body>
      </foreignObject>
    </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: 1px;
  fill: none;
  pointer-events: none;
  &.active {
    // stroke: #4773FC;
  }
}

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