<template>
  <div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
    <div v-if="title" class="title">{{ title }}</div>
    <el-tree
      :data="data"
      :node-key="option.nodeKey"
      :show-checkbox="option.showCheckbox"
      :default-expanded-keys="option.defaultExpandedKeys"
      :default-checked-keys="option.defaultCheckedKeys"
      :props="option.props ?? option.defaultProps"
      @node-click="handleNodeClick"
    >
      <template #default="{ data: rows }">
        <slot :data="rows"></slot>
      </template>
    </el-tree>
  </div>
</template>
<script setup name="custom-table-tree">
const props = defineProps({
  title: { type: String, default: '' },
  shadow: { type: Boolean, default: true },
  data: { type: Array, default: () => [] },
  option: {
    type: Object,
    default: () => {
      return {
        nodeKey: 'id',
        showCheckbox: false,
        props: {},
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        defaultExpandedKeys: [],
        defaultCheckedKeys: [],
      };
    },
  },
});
const emit = defineEmits(['node-click']);

const handleNodeClick = (data, node) => {
  emit('node-click', data, node);
};
</script>
<style lang="scss" scoped>
.custom-table-tree {
  width: 100%;
  height: 100%;
  min-width: 200px;
  @include flex-column();

  &__shadow {
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
  }

  .title {
    height: 36px;
    padding: 0 20px;
    line-height: 36px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    background: var(--el-color-primary);
  }

  .el-tree {
    padding: 16px 10px 10px;
    box-sizing: border-box;
  }
}
</style>
