<template>
  <!-- <div class="node-title" ref="myNode">
      <span class="node-icon">
        <SvgIcon icon-class="start" />
      </span>
      <span class="node-name"><span></span></span>
    </div> -->
  <div class="html-card" ref="myNode">
    <div v-if="properties.success === 1" style="position: absolute;right: 5px;top: 5px;">
      <SvgIcon icon-class="done" color="#67C23A"/>
    </div>
    <div class="html-card-header">{{ properties.name }}</div>
    <div class="html-card-body">{{ properties.desc }}</div>
    <div class="html-card-footer">
      <div class="html-card-label" v-for="(item, index) in properties.tags" :key="index">{{ item.name }}</div>
    </div>
  </div>
</template>
  
  <script setup>
  import variables from '@/assets/styles/variables.module.scss';
  import { ref, onMounted, reactive } from 'vue';
  import SvgIcon from '@/components/SvgIcon/index.vue';
  const props = defineProps({
    properties: {
      type: Object,
      default: null,
    },
  });
  let myNode = ref(null);
  
  onMounted(() => {
    let borderColor = variables.dragNodeBorderColor;
    if (props.properties.frontend_status == '0') {
      borderColor = variables.dangerColor;
    }
    myNode.value.style.border = `1px solid ${borderColor}`; //stroke边框
  });
  </script>
  
  <style scoped lang="scss">
  .lf-node-content {
    width: 100px;

  }
  // .node-icon {
  //   color: #6bd452;
  //   font-size: 17px;
  // }
  // .html-card {
  //   width: 240px;
  //   height: 100px;
  //   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  //   border-radius: 4px;
  //   border: 1px solid #ebeef5;
  //   background-color: #fff;
  //   overflow: hidden;
  //   color: #303133;
  //   transition: 0.3s;
  //   box-sizing: border-box;
  //   padding: 5px;
  // }
  // /* 定义节点不被允许连接的时候，节点样式 */
  // .lf-node-not-allow .html-card {
  //   border-color: #f56c6c;
  // }
  // .lf-node-allow .html-card {
  //   border-color: #67c23a;
  // }
  // .html-card-header {
  //   font-size: 12px;
  //   line-height: 24px;
  //   margin-left: 14px;
  // }
  // .html-card-header:before {
  //   content: "";
  //   position: absolute;
  //   left: 5px;
  //   top: 13px;
  //   display: block;
  //   width: 7px;
  //   height: 7px;
  //   border: 1px solid #cbcef5;
  //   border-radius: 6px;
  // }
  // .html-card-body {
  //   font-size: 12px;
  //   color: #6f6a6f;
  //   margin-top: 5px;
  // }
  
  // .html-card-footer {
  //   display: flex;
  //   position: absolute;
  //   bottom: 5px;
  // }
  // .html-card-label {
  //   font-size: 12px;
  //   line-height: 16px;
  //   padding: 2px;
  //   background: #ebeef5;
  //   margin-right: 10px;
  // }

  .html-card {
    width: 250px;
    height: 100px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-sizing: border-box;
    padding: 5px;
  }
  /* 定义节点不被允许连接的时候，节点样式 */
  .lf-node-not-allow .html-card {
    border-color: #f56c6c;
  }
  .lf-node-allow .html-card {
    border-color: #67c23a;
  }
  .html-card-header {
    font-size: 12px;
    line-height: 24px;
    margin-left: 14px;
  }
  .html-card-header:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 13px;
    display: block;
    width: 7px;
    height: 7px;
    border: 1px solid #cbcef5;
    border-radius: 6px;
  }
  .html-card-body {
    font-size: 12px;
    color: #6f6a6f;
    margin-top: 5px;
  }
  
  .html-card-footer {
    display: flex;
    position: absolute;
    bottom: 5px;
  }
  .html-card-label {
    font-size: 12px;
    line-height: 16px;
    padding: 2px;
    background: #ebeef5;
    width: 50px;
    text-align: center;
    white-space: nowrap; /* 确保文本在一行内显示 */
    overflow: hidden; /* 隐藏超出div宽度的文本 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    margin-right: 10px;
  }
  
  </style>
  