<template>
  <lt-a-frame :modules="basicModel" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch ,markRaw} from 'vue';
// import ltAFrame from '../../../packages/components/lt-frame/src/main.vue';
import dnymicTable from './table/dnymic-table/index.vue';
import tableData from './table/table-data-manual/index.vue';
import tableUrl from "./table/table-url/index.vue" //自动获取数据
import tableMonitor from "./table/table-monitor/index.vue" //数据推送
import editTable from "./table/edit-row-table/index.vue"
import tableAndForm from "./form-and-table/index.vue"
import model from './model/index.vue';
import showForm from "./form/index.vue"

export default defineComponent({
  name: 'ExampleEntry',
  components: {
    // ltAFrame,
    // tableData,
    tableUrl,
    dnymicTable,
    tableData,
    tableMonitor,
    model,
    editTable,
    showForm
  },
  setup() {
    const state = reactive({
      collapsed: false,
      selectedKeys: ['1'],
      openKeys: ['sub1'],
      preOpenKeys: ['sub1'],
    });

    const basicModel = [
      // {
      //   title: '表格',
      //   key: 'table',
      //   icon: 'HomeOutlined',
      //   color: '',
      //   children: [
      //     {
      //       title: 'table-data',
      //       key: 'tableData',
      //       icon: 'MenuUnfoldOutlined',
      //       component: tableData,
      //     },
      //     {
      //       title: 'table-url',
      //       key: 'tableUrl',
      //       icon: 'PieChartOutlined',
      //       component: tableUrl,
      //     },
      //   ],
      // },
      {
        title: '弹窗',
        key: 'model',
        icon: 'DesktopOutlined',
        color: '',
        component:markRaw(model) ,
      },
      {
        title: 'form',
        key: 'showForm',
        icon: 'DesktopOutlined',
        color: '',
        component:markRaw(showForm) ,
      },
      {
        title: 'table-data',
        key: 'tableData',
        icon: 'PieChartOutlined',
        component:markRaw(tableData) ,
      },
      {
        title: 'table-url',
        key: 'tableUrl',
        icon: 'PieChartOutlined',
        component:markRaw(tableUrl) ,
      },
      {
        title: 'dnymic-table',
        key: 'dnymicTable',
        icon: 'PieChartOutlined',
        component:markRaw(dnymicTable)  ,
      },
      {
        title: 'monitor-table',
        key: 'tableMonitor',
        icon: 'PieChartOutlined',
        component:markRaw(dnymicTable) ,
      },
      {
        title: 'edit-table',
        key: 'editTable',
        icon: 'PieChartOutlined',
        component:markRaw(editTable) ,
      },
      {
        title: '表格和弹窗',
        key: 'tableAndForm',
        icon: 'PieChartOutlined',
        component:markRaw(tableAndForm) ,
      },
      
    ];

    watch(
      () => state.openKeys,
      (_val, oldVal) => {
        state.preOpenKeys = oldVal;
      },
    );
    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    };
    return {
      ...toRefs(state),
      toggleCollapsed,
      basicModel,
    };
  },
});
</script>
