<template>
  <div class="select-account">
    <div class="m-4 mr-0 overflow-hidden bg-white">
      <BasicTree
        title="表单分类"
        ref="asyncExpandTreeRef"
        toolbar
        search
        treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
        :clickRowToExpand="false"
        :treeData="treeData"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
      />
    </div>
    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'pmoduleId'">
          {{ findModuleName(treeData, record.pmoduleId) }}
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '预览',
                onClick: () => {
                  previewModal(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick, unref } from 'vue';

  import { BasicTree, TreeItem } from '@/components/Tree';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { functionLoadFormSort } from '@/api/demo/formScheme';
  import { fun_GetPageList } from '@/api/demo/formModule';
  import { getMenuList } from '@/api/demo/system';

  import { columns, searchFormSchema } from './account.data';

  defineOptions({ name: 'AccountManagement' });

  const emit = defineEmits(['select']);

  const treeData = ref<TreeItem[]>([]);
  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);

  async function fetch() {
    treeData.value = (await getMenuList()) as unknown as TreeItem[];
    // 展开全部
    nextTick(() => {
      unref(asyncExpandTreeRef)?.expandAll(true);
    });
  }

  const searchInfo = reactive<Recordable>({});
  const [registerTable, { reload, getSelectRows }] = useTable({
    title: '发布列表',
    api: fun_GetPageList,
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    rowSelection: {
      //多选框
      type: 'radio',
    },
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    tableSetting: { fullScreen: true },
    isCanResizeParent: true,
    handleSearchInfoFn(info) {
      console.log('handleSearchInfoFn', info);
      return info;
    },
  });
  function handleSelect(orgId = '') {
    searchInfo.category = orgId[0];
    reload();
  }
  // 分类
  function findModuleName(modules, pmoduleId) {
    for (const module of modules) {
      if (module.id === pmoduleId) {
        return module.name;
      }
      if (Array.isArray(module.children) && module.children.length > 0) {
        const foundName = findModuleName(module.children, pmoduleId);
        if (foundName) {
          return foundName;
        }
      }
    }
    return '';
  }
  function getRow() {
    let rows = getSelectRows();
    console.log(rows);
    return rows;
  }
  defineExpose({
    getRow,
  });
  onMounted(() => {
    fetch();
  });
</script>
<style scoped>
  .select-account {
    display: flex;
    height: 100%;
  }
</style>
