// 以透视分析为例
import CustomTree from '../control/CustomTree.vue'
this.on(AD_HOC_DATA_PANEL_ON_INIT, (IAdHocDatasetPanel, iAdHocAnalysis) => {
    // 设置自定义树
    IAdHocDatasetPanel.setDatasetHeader({
        component: CustomTree, //自定义常用字段树组件
        props: {
            name: 'customTree',
            title: '常用字段',
            initialData: customTreeData, //自定义常用字段树组件数据
            showCheckbox: true,
            draggable: false
        },
        listeners: {
            'node-click': function ({
                data,
                node
            }) {
                console.log('节点点击:', data)
                if (data.type === 'field') {
                    IAdHocDatasetPanel.onLocateToTree(data.id) // 实现点击字段定位到产品原本数据面板对应字段
                }
            },
            'check': function ({
                data,
                checked
            }) {
                console.log('节点选中状态变化:', data, checked)
                // 只处理叶子节点（字段节点）
                if (data.type === 'field') {
                    IAdHocDatasetPanel.setFieldsChecked([data.id], checked) // 实现勾选取消常用字段树，联动勾选产品数据面板中的字段
                }
            }
        }
    })
 

========== customTreeData 数据 ==========
let customTreeData = [{
        id: 'dimension-folder',
        name: '常用维度',
        label: '常用维度',
        type: 'folder',
        children: [{
                id: 'AUGMENTED_DATASET_LEVEL.I8aaa8015017d97839783ea38017d980a686901b2.Field-SmartbiDemo-null-PUBLIC-orders-ShipRegion-LEVEL-1624587737403',
                name: '发货区域',
                label: '发货区域',
                type: 'field',
                dataType: 'STRING'
            }, {
                id: 'AUGMENTED_DATASET_FIELD.I8aaa8015017d97839783ea38017d980a686901b2.Field-SmartbiDemo-null-PUBLIC-categories-CategoryName',
                name: '产品类别',
                label: '产品类别',
                type: 'field',
                dataType: 'DATE'
            }
        ]
    }, {
        id: 'measure-folder',
        name: '常用度量',
        label: '常用度量',
        type: 'folder',
        children: [{
                id: 'AUGMENTED_DATASET_MEASURE.I8aaa8015017d97839783ea38017d980a686901b2.Field-SmartbiDemo-null-PUBLIC-orders-Freight_1638935325218',
                name: '运费',
                label: '运费',
                type: 'field',
                dataType: 'DOUBLE'
            }, {
                id: 'AUGMENTED_DATASET_MEASURE.I8aaa8015017d97839783ea38017d980a686901b2.Field-SmartbiDemo-null-PUBLIC-orders-Freight_1638935325218',
                name: '运费',
                label: '运费',
                type: 'field',
                dataType: 'DOUBLE'
            }, {
                id: 'AUGMENTED_DATASET_MEASURE.I8aaa8015017d97839783ea38017d980a686901b2.Field-SmartbiDemo-null-PUBLIC-orders-OrderID_1638935571561',
                name: '订单量',
                label: '订单量',
                type: 'field',
                dataType: 'INTEGER'
            }
        ]
    }
]


========== 自定义CustomTree文件 ==========
<!-- src/components/custom-tree/CustomTree.vue -->
<template>
  <div class="custom-tree-container">
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      :highlight-current="true"
      :expand-on-click-node="true"
      :show-checkbox="showCheckbox"
      :default-expand-all="false"
      :accordion="false"
      @node-click="handleNodeClick"
      @check-change="handleCheck">
      <span class="custom-tree-node" slot-scope="{ node }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'CustomTree',
  props: {
    // 初始数据
    initialData: {
      type: Array,
      default: () => []
    },
    // 是否显示复选框
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // 是否允许拖拽
    draggable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    // 初始化数据
    this.treeData = this.initialData
  },
  watch: {
    // 监听initialData变化，更新firstLevelKeys
    initialData: {
      handler(newVal) {
        this.treeData = newVal
      },
      deep: true
    }
  },
  methods: {
    // 节点点击事件
    handleNodeClick(data, node) {
      this.$emit('node-click', { data, node })
    },
    // 节点选中事件
    handleCheck(data, checked) {
      this.$emit('check', { data, checked })
    },
    // 对外暴露的方法：设置树数据
    setTreeData(data) {
      this.treeData = data
    },
    // 对外暴露的方法：获取选中的节点
    getCheckedNodes() {
      return this.$refs.tree.getCheckedNodes()
    },
    // 对外暴露的方法：展开指定节点
    expandNode(nodeId) {
      const node = this.$refs.tree.store.nodesMap[nodeId]
      if (node) {
        node.expanded = true
      }
    }
  }
}
</script>

<style scoped>
.custom-tree-container {
  padding: 1px 0 4px 22px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

/* 使用 Element UI 默认的树节点样式 */
:deep(.el-tree-node__content) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #ecf5ff;
}

:deep(.el-tree-node__expand-icon) {
  font-size: 12px;
  margin-right: 4px;
  transition: transform 0.3s ease-in-out;
}

:deep(.el-tree-node__expand-icon.expanded) {
  transform: rotate(90deg);
}

:deep(.el-tree-node__expand-icon.is-leaf) {
  display: none;
}

:deep(.el-checkbox) {
  margin-right: 4px;
}
</style>