<template>
  <ResizePageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <template #resizeLeft>
      <BasicTree
        :title="t('流程任务状态')"
        :clickRowToExpand="true"
        :treeData="treeData"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
        :selectedKeys="selectedKeys"
      />
    </template>
    <template #resizeRight>
      <component :is="data.componentName" />
    </template>
  </ResizePageWrapper>
</template>

<script setup lang="ts">
  import { reactive, shallowRef, defineAsyncComponent, unref, ref } from 'vue';
  // import { ResizeFixedLayout } from '/@/components/ModalPanel';
  import { ResizePageWrapper } from '/@/components/Page';
  import { BasicTree } from '/@/components/Tree';
  import ToDoTasks from './components/processTasks/ToDoTasks.vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const FlowLaunch = defineAsyncComponent({
    loader: () => import('./FlowLaunch.vue'),
  });

  const MyProcess = defineAsyncComponent({
    loader: () => import('./components/processTasks/MyProcess.vue'),
  });
  const TaskDone = defineAsyncComponent({
    loader: () => import('./components/processTasks/TaskDone.vue'),
  });

  const RecycleBin = defineAsyncComponent({
    loader: () => import('./components/processTasks/RecycleBin.vue'),
  });

  const MyCirculation = defineAsyncComponent({
    loader: () => import('./components/processTasks/MyCirculation.vue'),
  });

  const Drafts = defineAsyncComponent({
    loader: () => import('./components/processTasks/Drafts.vue'),
  });
  const componentByType: Map<string, any> = new Map([
    ['ToDoTasks', ToDoTasks],
    ['FlowLaunch', FlowLaunch],
    ['TaskDone', TaskDone],
    ['MyProcess', MyProcess],
    ['RecycleBin', RecycleBin],
    ['MyCirculation', MyCirculation],
    ['Drafts', Drafts],
  ]);

  const treeData = [
    {
      key: 'ToDoTasks',
      id: 'ToDoTasks',
      name: t('待办任务'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'FlowLaunch',
      id: 'FlowLaunch',
      name: t('发起流程'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'TaskDone',
      id: 'TaskDone',
      name: t('已办任务'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'MyProcess',
      id: 'MyProcess',
      name: t('我的流程'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'MyCirculation',
      id: 'MyCirculation',
      name: t('我的传阅'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'Drafts',
      id: 'Drafts',
      name: t('草稿箱'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'RecycleBin',
      id: 'RecycleBin',
      name: t('回收站'),
      icon: 'ant-design:profile-outlined',
    },
  ];
  const selectedKeys = ref(['ToDoTasks']);
  let id = unref(currentRoute).query.name;
  let data = reactive({
    componentName: shallowRef(ToDoTasks),
  });
  if (id) {
    selectedKeys.value = [id.toString()];
    handleSelect([id]);
  }
  function handleSelect(componentRow) {
    if (componentRow.length > 0 && componentRow[0]) {
      data.componentName = componentByType.has(componentRow[0])
        ? componentByType.get(componentRow[0])
        : ToDoTasks;
    }
  }
</script>
<style lang="less" scoped>
  :deep(.vben-page-wrapper) {
    height: 100%;

    .vben-page-wrapper-content {
      margin: 0;
      height: 100% !important;
      min-height: 100% !important;

      .list-item:nth-child(4n) {
        margin-right: 13px;
      }

      .list-item:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
</style>
