<template>
  <div class="ele-body">
    <a-card :bordered="false" :body-style="{ padding: '16px' }">
      <ele-split-layout
        width="266px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
        :style="{ minHeight: 'calc(100vh - 152px)' }"
      >
        <div>
          <ele-toolbar theme="default">
            <a-space :size="10">
              <a-input-search
                allow-clear
                placeholder="搜索关键词"
                v-model:value="searchText"
                @pressEnter="search"
                @search="search"
              />
            </a-space>
          </ele-toolbar>
          <div class="ele-border-split sys-docs-list">
            <a-tree
              :tree-data="data"
              v-model:expanded-keys="expandedRowKeys"
              v-model:selected-keys="selectedRowKeys"
              @select="onTreeSelect"
            />
          </div>
        </div>
        <template #content>
          <content :data="data" :current="current" @done="query"></content>
        </template>
      </ele-split-layout>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick, unref } from 'vue';
  import { message } from 'ant-design-vue';
  import { eachTreeData, toTreeData } from "ele-admin-pro";
  import Content from './content.vue';
  import { listDocs } from '@/api/cms/docs';
  import type { Docs, DocsParam } from '@/api/cms/docs/model';
  import useSearch from '@/utils/use-search';
  import { useRouter } from 'vue-router';
  const ROUTE_PATH = '/dashboard/docs';

  const { push, currentRoute } = useRouter();
  // 加载状态
  const loading = ref(true);
  // 树形数据
  const data = ref<Docs[]>([]);
  // 树展开的key
  const expandedRowKeys = ref<number[]>([]);
  // 树选中的key
  const selectedRowKeys = ref<number[]>([]);
  // 选中数据
  const current = ref<Docs | null>(null);
  // 默认文档ID
  const docsId = ref(28);
  // 搜索内容
  const searchText = ref('');
  // 表单数据
  const { where } = useSearch<DocsParam>({
    title: ''
  });

  /* 搜索 */
  const search = () => {
    where.title = searchText.value;
    getDocs();
  };

  /* 查询 */
  const getDocs = () => {
    loading.value = true;
    listDocs(where)
      .then((list) => {
        loading.value = false;
        const eks: number[] = [];
        list.forEach((d) => {
          d.key = d.docsId;
          d.value = d.docsId;
          if (typeof d.docsId === 'number') {
            eks.push(d.docsId);
          }
          // 查找当前文档
          if (d.docsId === docsId.value) {
            current.value = d;
            selectedRowKeys.value = [d.docsId];
          }
        });
        expandedRowKeys.value = eks;
        data.value = toTreeData({
          data: list,
          idField: 'docsId',
          parentIdField: 'parentId'
        });
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  /* 选择数据 */
  const onTreeSelect = () => {
    eachTreeData(data.value, (d) => {
      if (
        typeof d.docsId === 'number' &&
        selectedRowKeys.value.includes(d.docsId)
      ) {
        current.value = d;
        return false;
      }
    });
  };

  // /* 选择数据 */
  // const setKey = (item) => {
  //   current.value = item;
  //   selectedRowKeys.value = [item.docsId];
  //   const path = '/dashboard/docs';
  //   nextTick(() => {
  //     push({
  //       path,
  //       query: item ? { id: item.docsId } : undefined
  //     });
  //   });
  // };

  watch(
    currentRoute,
    (route) => {
      const { fullPath } = unref(route);
      console.log(ROUTE_PATH);
      if (!fullPath.startsWith(ROUTE_PATH)) {
        return;
      }
      const { query } = unref(currentRoute);
      if (query.id) {
        docsId.value = Number(query.id);
      }
      getDocs();
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'Docs'
  };
</script>

<style lang="less" scoped>
  .sys-docs-list {
    padding: 12px 6px;
    height: calc(100vh - 242px);
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }
</style>
