<template>
  <lrlayout style="background: #f1f2f5" :left="240">
    <template #left>
      <BasicTree
        ref="asyncExpandTreeRef"
        title="常用按钮"
        checkable
        :treeData="btnsTree"
        :defaultExpandAll="true"
        :fieldNames="{ key: 'id', title: 'label' }"
        @check="handleCheck"
      />
    </template>
    <BasicTable @register="registerTable" />
  </lrlayout>
</template>
<script lang="ts" setup>
  import { ref, inject, defineProps } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import lrlayout from '@/components/lrLayout';
  import { BasicTree } from '@/components/Tree';

  import { btns } from './config.data';

  // 定义props,树目录
  const props = defineProps({
    btnsTree: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
  });
  const btnsTree = props.btnsTree;

  // config
  const config = inject('formConfig');
  const btnsData = ref(config.btns);

  console.log(38, btnsTree);

  const [registerTable, { reload }] = useTable({
    rowKey: 'id',
    dataSource: btnsData,
    columns: btns(),
    bordered: true,
  });

  // 树的选择变动
  function handleCheck(keys) {
    btnsData.value = btnsTree.filter((item) => {
      return keys.includes(item.id);
    });
    config.table.btns = btnsData.value;
    reload();
  }
</script>
