<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-15 17:27:57
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-23 15:28:57
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\LogicFlowNodes\src\viewNode.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex items-center node-wrap" ref="myNode">
    <span class="node-icon">
      <img :src="fetchIconType" alt="" />
    </span>
  </div>
</template>

<script setup lang="ts">
import * as variables from '@/styles/logic-flow-core.scss'

import { BaseNodeModel } from '@logicflow/core'
import { OPERATION_NODE_TYPE_MAP } from '@/config/designComm'
import MultiImageNodeActiveIcon from '@/assets/images/ImagesCapture/multi-image-node-active.png' // 多图采集
import OutputImageNodeActiveIcon from '@/assets/images/ImagesCapture/output-image-node-active.png' // 输出图像
import CashImageNodeActiveIcon from '@/assets/images/ImagesCapture/cash-image-node-active.png' // 缓存图像
const props = defineProps({
  properties: {
    type: Object,
    required: true
  },
  model: {
    type: BaseNodeModel,
    required: true
  },
  nodeInfo: {
    type: Object,
    required: true
  },
  isSelected: Boolean,
  isHovered: Boolean
})

const iconType = ref<string>('')
const myNode = ref(null)

const initStyle = () => {
  let borderColor = variables.dragNodeBorderColor
  if (props.properties.frontend_status == '0') {
    borderColor = variables.dangerColor
  }
  myNode.value.style.border = `1px solid ${borderColor}` //stroke边框
}

const fetchIconType = computed({
  get() {
    let iconType = ''
    switch (props.nodeInfo?.type) {
      case 'multi-image-node':
        iconType = MultiImageNodeActiveIcon
        break
      case 'output-image-node':
        iconType = OutputImageNodeActiveIcon
        break
      case 'cash-image-node':
        iconType = CashImageNodeActiveIcon
        break
    }
    return iconType
  }
})

onMounted(() => {
  initStyle()
})
watch(
  () => props.nodeInfo,
  (value) => {
    console.log(props.nodeInfo?.type, 'watch_props_nodeInfo')
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.node-wrap {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border-radius: 4px;
  border: 2px solid var(--ds-color-primary);
  background-color: #fff;
  .node-icon {
    font-size: 16px;
    img {
      width: 19px;
    }
  }
}
</style>
