<route lang="yaml">
  name: classStandardEdit //分类标准编辑
  </route>

<script lang="ts" setup name="classStandardEdit">
import { ref, onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import { useValidator } from '@/hooks/useValidator';
import G6 from '@antv/g6';
import { IGroup, ModelConfig } from '@antv/g6';
import { getClassifyGradList, getClassifyTreeList, getGradeList, saveClassify, updateClassify, deleteClassify, updateClassifyGrad } from "@/api/modules/dataInventory";


const { required, orderNum } = useValidator();
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const fullPath = route.query.fullPath;
const userStore = useUserStore();

const fullscreenLoading = ref(false);
const formRef = ref();

const classStandardFormItems = ref([{
  label: '分类名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'classStandardName',
  default: router.currentRoute.value.query.classStandardName,
  clearable: true,
  disabled: false,
  required: true
}, {
  // label: '分级标准',
  // type: 'input',
  // placeholder: '请选择',
  // field: 'gradeStandard',
  // default: '',
  // required: true,
  // filterable: true,
  // clearable: true,
  // disabled: false,
  // visible: true,
  label: '分级标准',
  type: 'select',
  placeholder: '请选择',
  field: 'gradeStandard',
  options: [],
  props: {
    label: "name",
    value: "guid",
  },
  filterable: true,
  clearable: true,
  default: '',
  required: true,
  block: false,
},
{
  label: '分类描述',
  type: 'textarea',
  placeholder: '请输入',
  field: 'description',
  default: '',
  clearable: true,
  required: false,
  block: true
}]);

// 定义层级映射1->一级，2->二级，3->三级，4->四级
const levelMap = {
  1: '一级',
  2: '二级',
  3: '三级',
  4: '四级',
}
const currTableInfo = ref<any>({});
const drawerRef = ref<any>('');

const tableInfo = ref({
  id: "data-class-standard-table",
  multiple: false,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "分类", field: "classifyName", width: 160, type: 'expand' },
    {
      label: "层级", field: "level", width: 120, getName: (scope) => {
        let level = scope.row.level;
        return levelMap[level];
      }
    },
    {
      label: "状态", field: "status", type: "tag", width: 120, align: "center", getName: (scope) => {
        let status = scope.row.status;
        return status == 'Y' ? '有效' : '停用';
      }
    },
    { label: "定义说明", width: 140, field: "description", },
    {
      label: "最低安全级别参考", field: "name", width: 140, getName: (scope) => {
        let dataGrade = scope.row.dataGrade;
        return dataGrade ? dataGrade + '级' : '--';
      }
    },
    { label: "修改人", field: "updateUserName", width: 140 },
    { label: "更新时间", field: "updateTime", width: 180 },
  ],
  data: [],
  rowKey: 'guid',
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    btns: [
      {
        label: "编辑", value: "edit", click: (scope) => {
          // console.log(drawerRef.value.drawerFormRef[0].ruleFormRef);
          currentEditingGuid.value = scope.row.guid;
          selectParentEdit(scope.row.guid);
          currTableInfo.value = scope.row;
          drawerInfo.value.visible = true;
          drawerInfo.value.header.title = '编辑分类';
          classEditFormItems.value.forEach(item => {
            item.default = scope.row[item.field]
          })
        }
      },
      {
        label: "删除", value: "delete", click: (scope) => {
          console.log(scope);
          proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
            deleteClassify({ guid: scope.row.guid }).then((res: any) => {
              if (res.code == proxy.$passCode) {
                getTreeListData();
                proxy.$ElMessage.success('该分类删除成功');
              } else {
                proxy.$ElMessage.error(res.msg);
              }
            });
          })
        }
      },
    ],
  },
  loading: false,
});

const classEditFormItems = ref([{
  label: '分类名称',
  type: 'input',
  maxlength: 50,
  placeholder: '请输入',
  field: 'classifyName',
  default: '',
  clearable: true,
  required: true
}, {
  label: '排序',
  type: 'input',
  placeholder: '请输入',
  field: 'orderNum',
  maxlength: 6,
  regexp: /\D/g,
  required: true,
  clearable: true,
}, {
  label: '上级分类',
  field: 'parentGuid',
  type: 'tree-select',
  placeholder: '请选择',
  default: '',
  options: tableInfo.value.data,
  showAllLevels: false,
  checkStrictly: true,
  lazy: false,
  props: {
    label: "classifyName",
    value: "guid",
  },
  block: true,
  filterable: true,
  clearable: true,
  required: false
}, {
  label: '最低安全级别参考',
  type: 'select',
  placeholder: '请选择',
  field: 'gradeGuid',
  default: '',
  options: [], //TODO
  props: {
    label: "name",
    value: "guid",
  },
  required: false,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '业务状态',
  type: 'switch',
  field: 'status',
  default: 'Y',
  activeText: "有效",
  inactiveText: "停用",
  activeValue: 'Y',
  inactiveValue: 'S'
}, {
  label: '定义说明',
  type: 'textarea',
  placeholder: '请输入',
  field: 'description',
  default: '',
  clearable: true,
  required: false,
  block: true
}]);

// const validateUniqueClassifyName = (rule, value, callback) => {
//   console.log('validateUniqueClassifyName', value);
//   // 递归遍历treeListData，判断是否有重复的分类名称
//   // 检查空值情况
//   if (!value) {
//     callback(new Error('请填写分类名称'));
//     return;
//   }

//   // 递归检查函数
//   const isExist = (data, value) => {
//     return data.some(item => {
//       if (item.classifyName === value) {
//         return true;
//       }
//       return item.children && isExist(item.children, value);
//     });
//   };

//   // 检查是否存在
//   if (isExist(treeListData.value, value)) {
//     callback(new Error('分类名称已存在，请填写其他名称'));
//   } else {
//     callback(); // 校验通过
//   }
// }

let currentEditingGuid = ref<any>('');

const validateUniqueClassifyName = (rule, value, callback) => {
  console.log('validateUniqueClassifyName', treeListData.value, value, currentEditingGuid);

  // 检查空值情况
  if (!value) {
    callback(new Error('请填写分类名称'));
    return;
  }

  // 递归检查函数
  const isExist = (data, value, guid) => {
    return data.some(item => {
      // 如果是编辑模式，忽略当前分类的校验
      if (item.guid === guid) {
        return false;
      }
      if (item.classifyName === value) {
        return true;
      }
      return item.children && isExist(item.children, value, guid);
    });
  };

  // 检查是否存在
  if (isExist(treeListData.value, value, currentEditingGuid.value)) {
    callback(new Error('分类名称已存在，请填写其他名称'));
  } else {
    callback(); // 校验通过
  }
};


const classEditFormRules = ref({
  classifyName: [{ required: true, message: '请填写分类名称', trigger: 'blur' },
  { validator: validateUniqueClassifyName, trigger: 'blur' }],
  orderNum: [orderNum()],
});


/** 新增分类的form */
const classEditFormInfo = ref({
  type: "form",
  title: "",
  col: "span",
  formInfo: {
    id: "add-class-form",
    readonly: false,
    items: classEditFormItems.value,
    rules: classEditFormRules.value,
  },
});

/** 新增编辑分类。 */
const drawerInfo = ref({
  visible: false,
  direction: 'rtl',
  size: 600,
  header: {
    title: '添加分类',
  },
  type: '',
  container: {
    contents: [classEditFormInfo.value],
  },
  footer: {
    visible: true,
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确定', value: 'save', loading: false },
    ]
  }
})

const drawerBtnClick = async (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false;
  } else {
    if (drawerInfo.value.header.title == '添加分类') {
      drawerInfo.value.footer.btns.map((item: any) => (item.disabled = true));
      const params = {
        ...info,
        classifyGradeGuid: router.currentRoute.value.query.guid,
      }
      const res: any = await saveClassify(params);
      if (res.code == proxy.$passCode) {
        proxy.$ElMessage.success('添加成功!');
        drawerInfo.value.visible = false;
        getTreeListData();
        drawerInfo.value.footer.btns.map((item: any) => delete item.disabled);
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    } else {
      // 编辑分类
      drawerInfo.value.footer.btns.map((item: any) => (item.disabled = true));
      const params = {
        ...info,
        classifyGradeGuid: router.currentRoute.value.query.guid,
        guid: currTableInfo.value.guid,
        gradeGuid: info.gradeGuid || '',
        parentGuid: info.parentGuid || '',
      }
      const res: any = await updateClassify(params);
      if (res.code == proxy.$passCode) {
        proxy.$ElMessage.success('修改成功!');
        drawerInfo.value.visible = false;
        drawerInfo.value.footer.btns.map((item: any) => delete item.disabled);
        getTreeListData();
        // 清空当前编辑的guid
        currentEditingGuid.value = '';
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    }
  }
}
const refGradePageParams = ref({
  pageIndex: 1,
  pageSize: -1,
  type: "G"
});
const classifyGradListData = ref([]);

// 获取分级列表
const getClassifyGradListData = async () => {
  const res: any = await getClassifyGradList(refGradePageParams.value);
  if (res.code == proxy.$passCode) {
    classifyGradListData.value = res.data.records || [];
    classStandardFormItems.value[1].options = classifyGradListData.value;
    // const gradeName = findStandardName(router.currentRoute.value.query.refGradeGuid as any);
    classStandardFormItems.value[1].default = router.currentRoute.value.query.refGradeGuid;
    classStandardFormItems.value[2].default = router.currentRoute.value.query.description;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}
const findStandardName = (guid: string) => {
  const item: any = classifyGradListData.value.find((item: any) => item.guid == guid);
  return item ? item.name : '';
}

// 获取分类树形列表
const treeListParams = ref({
  pageIndex: 1,
  pageSize: -1,
  classifyGradeGuid: router.currentRoute.value.query.guid,
});
const treeListData = ref([]);
const getTreeListData = async () => {
  tableInfo.value.loading = true;
  const res: any = await getClassifyTreeList(treeListParams.value);
  if (res.code == proxy.$passCode) {
    treeListData.value = res.data || [];
    tableInfo.value.data = treeListData.value;
    classEditFormItems.value[2].options = treeListData.value;
    shapeTreeListData.value = treeListData.value;
    tableInfo.value.loading = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}
// 这里有个需求就是编辑时，不能选择自己和自己的子类children作为上级分类，每条数据加上disabled属性true or false
const selectParentEdit = (guid: string) => {
  const cloneData = JSON.parse(JSON.stringify(treeListData.value)); // 深拷贝数据，避免直接修改原始数据
  const disableNodeAndChildren = (node: any, disabled: boolean) => {
    node.disabled = disabled;
    if (node.children && node.children.length > 0) {
      node.children.forEach((child: any) => disableNodeAndChildren(child, disabled));
    }
  };
  const updateDisabledStatus = (nodes: any[], guid: string) => {
    nodes.forEach((node) => {
      if (node.guid === guid) {
        // 禁用当前节点及其所有子节点
        disableNodeAndChildren(node, true);
      } else {
        // 其他节点保持启用状态
        node.disabled = false;
        if (node.children && node.children.length > 0) {
          updateDisabledStatus(node.children, guid);
        }
      }
    });
  };
  updateDisabledStatus(cloneData, guid);
  classEditFormItems.value[2].options = cloneData; // 更新选项
};


// 获取最低安全级别参考 // 获取分级列表
const gradeTablelist = ref<any>([]);
const getGradeListData = async () => {
  console.log(shapeMain.value, shapeMain.value.clientWidth, shapeMain.value.clientHeight);
  const params = {
    pageIndex: 1,
    pageSize: -1,
    classifyGradeGuid: router.currentRoute.value.query.refGradeGuid,
  }
  const res: any = await getGradeList(params);
  if (res.code == proxy.$passCode) {
    gradeTablelist.value = res.data.records;
    console.log('gradeTablelist', gradeTablelist.value);
    for (let i = 0; i < gradeTablelist.value.length; i++) {
      gradeTablelist.value[i].name = gradeTablelist.value[i].dataGrade + '级';
    }
    classEditFormItems.value[3].options = gradeTablelist.value;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

const newCreateClass = () => {

  drawerInfo.value.visible = true;
  classEditFormItems.value[2].options = treeListData.value;
  drawerInfo.value.header.title = '添加分类';
  classEditFormItems.value.forEach(item => {
    if (item.field == 'status') {
      item.default = 'Y';
    } else {
      item.default = '';
    }
  })
}


const saveLoading = ref(false);
const saveUpdate = async () => {
  console.log(formRef.value.formInline);
  if (!formRef.value.formInline.classStandardName) {
    proxy.$ElMessage.error('分类名称不能为空');
    return;
  }
  if (!formRef.value.formInline.gradeStandard) {
    proxy.$ElMessage.error('分级标准不能为空');
    return;
  }
  saveLoading.value = true;
  const params = {
    guid: router.currentRoute.value.query.guid,
    name: formRef.value.formInline.classStandardName,
    refGradeGuid: formRef.value.formInline.gradeStandard,
    type: 'C',
    description: formRef.value.formInline.description
  }
  console.log(params);
  const res: any = await updateClassifyGrad(params);
  if (res.code == proxy.$passCode) {
    proxy.$ElMessage.success('修改成功');
    router.push({
      name: 'templateConfig'
    });
    saveLoading.value = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

/** 导入分类。 */
const importClass = () => {

}

const dataShowMethod = ref('table');
/** 切换是图形展示，还是表格展示。 */
const changeShowMethod = () => {
  dataShowMethod.value = dataShowMethod.value == 'table' ? 'shape' : 'table';
}

const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'templateConfig'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}


// const graph = ref();
const shapeMain = ref();
const shapeTreeListData = ref<any>();

var COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
  return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y]];
};
var EXPAND_ICON = function EXPAND_ICON(x, y, r) {
  return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]];
};


G6.registerNode('tree-node', {
  drawShape: function drawShape(cfg: ModelConfig, group: IGroup) {
    if (!cfg || typeof cfg.classifyName !== 'string') {
      throw new Error('Invalid cfg or cfg.classifyName');
    }
    var rect = group.addShape('rect', {
      attrs: {
        fill: '#F6FDFD',
        stroke: '#D1E7E8'
      }
    });
    var content = cfg.classifyName.replace(/(.{18})/g, '$1\n');
    var text = group.addShape('text', {
      attrs: {
        text: content,
        x: 0,
        y: 0,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: '#4FA1A4',
        fontSize: 10,
        fontFamily: 'simsun'
      }
    });
    var bbox = text.getBBox();
    var hasChildren = Array.isArray(cfg.children) && cfg.children.length > 0;
    if (hasChildren) {
      group.addShape('circle', {
        attrs: {
          x: 95,
          y: bbox.minX + bbox.height / 2 - 5,
          r: 5,
          stroke: '#4FA1A4',
          fill: '#fff',
          lineWidth: 1
        },
        name: 'collapse-icon',
        className: 'collapse-icon',
      });
      group.addShape('text', {
        attrs: {
          x: 92,
          y: 8.5,
          fill: '#4FA1A4',
          text: '-',
          fontSize: 16
        },
        name: 'collapse-icon-text',
        className: 'collapse-icon-text',
      });
      // group.addShape('marker', {
      //   attrs: {
      //     x: 90,
      //     y: bbox.minX + bbox.height / 2-5,
      //     r: 6,
      //     symbol: COLLAPSE_ICON,
      //     fill: '#fff',
      //     stroke: '#666',
      //     lineWidth: 1,
      //   },
      //   className: 'collapse-icon'
      // });
    }
    rect.attr({
      x: bbox.minX - 4,
      y: bbox.minY - 6,
      width: 100, //图形的宽度
      height: bbox.height + 13
    });
    return rect;
  }
}, 'single-shape');
let graph = '' as any;
const showNodeDetails = ref(false); // 控制弹窗显示
const nodeDetails = ref<any>(); // 存储节点详情
const popupPosition = ref({ top: 0, left: 0 }); // 弹窗位置

const initGraph = () => {
  graph = new G6.TreeGraph({
    container: shapeMain.value,
    width: shapeMain.value.clientWidth,
    height: shapeMain.value.clientHeight,
    minZoom: 1.4,
    maxZoom: 1.4,
    modes: {
      default: [{
        type: 'collapse-expand',
        onChange: function onChange(item, collapsed, event) {
          var data = item.get('model');
          var icon = item.get('group').findByClassName('collapse-icon');
          if (collapsed) {
            icon.attr('symbol', EXPAND_ICON);
          } else {
            icon.attr('symbol', COLLAPSE_ICON);
          }
          data.collapsed = collapsed;
          return true;
        }
      }, 'drag-canvas', 'zoom-canvas']
    },
    defaultNode: {
      type: 'tree-node',
      anchorPoints: [[0, 0.5], [1, 0.5]]
    },
    defaultEdge: {
      type: 'polyline',
      style: {
        stroke: '#4FA1A4',
        endArrow: {
          fill: '#4FA1A4',
          stroke: '#4FA1A4',
          path: 'M -2,0 L 2,2 L 2,-2 Z',
          d: -2,
        }
      }
    },
    layout: {
      type: 'compactBox',
      direction: 'LR',
      getId: function getId(d) {
        return d.id;
      },
      getHeight: function getHeight() {
        return 16;
      },
      getWidth: function getWidth() {
        return 16;
      },
      getVGap: function getVGap() {
        return 20;
      },
      getHGap: function getHGap() {
        return 80;
      },
    }
  });
  graph.data(shapeTreeListData.value[0]);
  graph.on('node:mouseenter', (e) => {
    const nodeItem = e.item; // 获取鼠标进入的节点元素对象
    const nodeModel = nodeItem.getModel();
    // 更新弹窗位置和显示节点详情
    nodeDetails.value = nodeModel;
    showNodeDetails.value = true;
    const { clientX, clientY } = e;
    // 设置弹窗位置为鼠标下方
    popupPosition.value = {
      top: clientY - 100, // 弹窗距离鼠标的Y位置
      left: clientX - 80  // 弹窗距离鼠标的X位置
    };
  });
  graph.on('node:mouseleave', () => {
    showNodeDetails.value = false;
  });
  graph.render();
  graph.fitView();
  graph.on('node:click', (evt: any) => {
    evt.preventDefault();
    evt.stopPropagation();
    const { item, target } = evt;
    const currentAnchor = target.get('name');
    if (!currentAnchor) return;
    // 设置一个全局属性，指定点击的是哪个图形元素
  });
}

// 监听展示模式的变化
watch(dataShowMethod, (newMode) => {
  if (newMode === 'shape' && !graph) {
    // 当切换到 'shape' 且图形未初始化时，初始化图形
    nextTick(() => {
      initGraph();
    });
  } else if (newMode === 'table' && graph) {
    // 切换到表格时销毁图形实例
    graph.destroy();
    graph = '' as any;
  }
});

onMounted(() => {
  getClassifyGradListData();
  getTreeListData();
  getGradeListData();

  // graph.value = new G6.TreeGraph({
  //   container: shapeMain.value,
  //   width: shapeMain.value.clientWidth,
  //   height: shapeMain.value.clientHeight,
  //   minZoom: 1.4,
  //   maxZoom: 1.4,
  //   modes: {
  //     default: [{
  //       type: 'collapse-expand',
  //       onChange: function onChange(item, collapsed, event) {
  //         var data = item.get('model');
  //         var icon = item.get('group').findByClassName('collapse-icon');
  //         if (collapsed) {
  //           icon.attr('symbol', EXPAND_ICON);
  //         } else {
  //           icon.attr('symbol', COLLAPSE_ICON);
  //         }
  //         data.collapsed = collapsed;
  //         return true;
  //       }
  //     }, 'drag-canvas', 'zoom-canvas']
  //   },
  //   defaultNode: {
  //     type: 'tree-node',
  //     anchorPoints: [[0, 0.5], [1, 0.5]]
  //   },
  //   defaultEdge: {
  //     type: 'polyline',
  //     style: {
  //       stroke: '#4FA1A4',
  //       endArrow: {
  //         fill: '#4FA1A4',
  //         stroke: '#4FA1A4',
  //         path: 'M -2,0 L 2,2 L 2,-2 Z',
  //         d: -2,
  //       }
  //     }
  //   },
  //   layout: {
  //     type: 'compactBox',
  //     direction: 'LR',
  //     getId: function getId(d) {
  //       return d.id;
  //     },
  //     getHeight: function getHeight() {
  //       return 16;
  //     },
  //     getWidth: function getWidth() {
  //       return 16;
  //     },
  //     getVGap: function getVGap() {
  //       return 20;
  //     },
  //     getHGap: function getHGap() {
  //       return 80;
  //     }
  //   }
  // });
  // graph.value.data(tempData.value);
  // graph.value.on('node:mouseenter', (e) => {
  //   const nodeItem = e.item // 获取鼠标进入的节点元素对象
  //   console.log('鼠标移入', nodeItem._cfg)
  // })
  // graph.value.render();
  // graph.value.fitView();
  // graph.value.on('node:click', (evt: any) => {
  //   evt.preventDefault();
  //   evt.stopPropagation();
  //   const { item, target } = evt;
  //   const currentAnchor = target.get('name');
  //   if (!currentAnchor) return;
  //   // 设置一个全局属性，指定点击的是哪个图形元素
  // });
})

const isExpand = ref<boolean>(router.currentRoute.value.query.isExpand == 'true');


</script>

<template>
  <div class="container_wrap" v-loading="fullscreenLoading">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;" :expandSwicth="true"
        :isExpand="isExpand">
        <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
      </ContentWrap>
      <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description=""
        style="margin-top:16px; height: calc(100% - 161px)">
        <div class="tools_btns">
          <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
          <!-- <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button> -->
          <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
        </div>
        <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" />
        <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div>
        <div v-if="showNodeDetails" class="node-details-popup"
          :style="{ top: popupPosition.top + 'px', left: popupPosition.left + 'px' }">
          <div class="pop-content">
            <div class="top-area">
              <span>{{ nodeDetails.classifyName }}</span>
              <span class="tip">{{ nodeDetails.status === 'Y' ? '有效' : '无效' }}</span>
            </div>
            <div class="middle-top-area">
              {{ nodeDetails.description }}
            </div>
            <div class="middle-bottom-area">
              <span>最低安全级别</span> <span>{{ nodeDetails.name }}</span>
            </div>
            <div class="bottom-area">
              <span>创建时间</span> <span>{{ nodeDetails.createTime }}</span>
            </div>
          </div>
        </div>
      </ContentWrap>
    </div>
    <div class="bottom_tool_wrap">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveUpdate" :loading="saveLoading">保存修改</el-button>
    </div>
    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" ref="drawerRef" />
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0px;
}

.content_main {
  height: calc(100% - 44px);
  padding: 10px 16px;
  overflow: auto;
}

.bottom_tool_wrap {
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.detail-content) {

  .el-card__body {
    height: calc(100% - 50px) !important;

    .card-body-content {
      height: 100%;
      overflow: auto;
    }
  }
}

.tools_btns {
  position: relative;
  margin-bottom: 16px;

  .show-change-btn {
    position: absolute;
    right: 0px;
  }
}

.shape-main {
  height: calc(100% - 44px);
}

.table_panel {
  height: calc(100% - 44px) !important;
}

.node-details-popup {
  position: absolute;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  border-radius: 4px;
  width: 264px;
  height: 152px;

  .pop-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    .top-area {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: bold;
      color: #212121;

      .tip {
        background: #F2FFF5;
        border: 1px solid rgba(220, 250, 228, 1);
        color: #1BA854;
        border-radius: 2px;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
        font-weight: 400;
        padding: 1px 8px;
      }
    }


    .middle-top-area {
      font-size: 14px;
      color: #666;
    }

    .middle-bottom-area {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }

    .bottom-area {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>