<script setup lang="ts">
import { defineProps } from 'vue'
import { ElScrollbar } from 'element-plus';
interface TreeCardBoxProps {
  title? : string
}

const { title = ''} = defineProps<TreeCardBoxProps>()
</script>

<template>

 <div class="tree-card-box">
  <div class="tree-card-box-header">
    <div class="left-title">{{ title }}</div>
    <div class="right-content">
      <slot name="header-right"></slot>
    </div>
  </div>
  <div class="tree-card-box-content">
    <ElScrollbar>
      <slot name="content"></slot>
    </ElScrollbar>
  </div>
 </div>

</template>

<style lang="scss" scoped>
.tree-card-box{
  width: 100%;
  height: 440px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;

  .tree-card-box-header{
    width: 100%;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    display: flex;
    
    align-items: center;
    justify-content: space-between;
    .left-title{
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(0,0,0,0.8);
    }
  }

  .tree-card-box-content{
    width: 100%;
    padding: 4px 6px 4px 16px;
    box-sizing: border-box;
    height: 400px;
  }
}
</style>
