<!--
 * @Author: Devin
 * @Date: 2023-02-01 15:50:31
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-16 15:13:38
 * @Description: grid-demo
-->
<template>
  <common-panel :layer="'row'">
    <template #left>
      <div class="tree">
        <common-tree
          :tree-data="treeData"
          :actions="actions"
          :is-icon="true"
        ></common-tree>
      </div>
    </template>
    <template #right>
      <div class="content">123</div>
    </template>
  </common-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const treeData = ref<any>([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  }
]);
function deleteFn(data: any) {
  ElMessage(data);
}
const actions = ref<any>([
  {
    label: '删除',
    name: 'common-shanchu',
    iconType: '',
    type: 'primary',
    size: 14,
    onClick: deleteFn
  }
]);
</script>

<style scoped lang="scss">
.tree {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>