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

<script setup lang="ts">
import ImageNodeActiveIcon from '@/assets/images/ImagesCapture/image-node-active.png' // 多图采集

import * as variables from '@/styles/logic-flow-core.scss'
const props = defineProps({
  properties: {
    type: Object,
    default: null
  }
})
const myNode = ref(null)

const name = ref('图像源')

onMounted(() => {
  let borderColor = variables.dragNodeBorderColor
  if (props.properties.frontend_status == '0') {
    borderColor = variables.dangerColor
  }
  myNode.value.style.border = `1px solid ${borderColor}` //stroke边框
  console.log('imageNode_props', props)
})
</script>

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