<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getBpmProcessDefinitionList } from '@/api/modules/bpmDefinition/bpMliuchengdingyidexinxibiaokongzhiqi';

defineOptions({
  name: 'StartProcess',
});

const activeId = ref<number>(0);
const searchContent = ref<string>('');

const allFlowList = ref<API.BpmProcessDefinitionRespVO[]>([]);

const rightContainer = ref<HTMLElement | null>(null);

function scrollToCategory(idx: number) {
  activeId.value = idx;
  const container = rightContainer.value;
  if (!container) {
    return;
  }
  const el = container.querySelector(`#category-${idx}`) as HTMLElement | null;
  if (!el) {
    return;
  }
  const top = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
  container.scrollTo({ top: top - 10, behavior: 'smooth' });
}
const showFlowList = computed(() => {
  const list: any[] = [];
  allFlowList.value.forEach((item) => {
    if (item.name.includes(searchContent.value)) {
      const index = list.findIndex(it => it.category === item.category);
      if (index === -1) {
        list.push({
          category: item.category,
          categoryName: item.categoryName,
          items: [],
        });
      }
      list.find(it => it.category === item.category)?.items.push(item);
    }
  });
  return list;
});

const categoryList = computed(() => {
  const categories: { label: string, value: string }[] = [];
  showFlowList.value.forEach((item) => {
    if (!categories.some(category => category.value === item.category)) {
      categories.push({ label: item.categoryName ?? '', value: item.category ?? '' });
    }
  });
  return categories;
});

// function onSearch() {
//   console.log('搜索内容：', searchContent.value);
// }

function fetchBpmProcessDefinitionList() {
  getBpmProcessDefinitionList({ suspensionState: 1 }).then((response) => {
    if (response.success) {
      allFlowList.value = response.data ?? [];
      // console.log('流程列表：', allFlowList.value);
    }
  });
}

const router = useRouter();

function toStartProcess(process: any) {
  if (process.formType === 20) {
    router.push({ name: 'YewuProcessCreate', query: { key: process.key, createPath: process.formCustomCreatePath } });
  }
  else {
    router.push({ name: 'QingJia', params: { id: process.id } });
  }

  //
}

onMounted(() => {
  fetchBpmProcessDefinitionList();
});
</script>

<template>
  <div
    py-10px
    px-10px
    w-full
    h-full
  >
    <div w-full h-full bg="#fff" rd-8px flex flex-col p-10px>
      <!-- <div h-38px>
        <a-input v-model:value="searchContent" placeholder="请输入流程名称进行搜索" style="width: 600px;">
          <template #prefix>
            <SearchOutlined :style="{ color: '#e4e7ed' }" />
          </template>
        </a-input>
      </div> -->
      <div flex-1 h-0px flex border-1px border-solid border-gray-200 rd-8px>
        <div w-400px h-full p-12px>
          <div v-for="(category, idx) in categoryList" :key="category.value" h-40x lh-40px pl-10px mb-6px class="category" :class="{ selected: activeId === idx }" @click="scrollToCategory(idx)">
            {{ category.label }}
          </div>
        </div>
        <div ref="rightContainer" flex-1 h-full border-0px border-l-1px border-solid border-gray-200 p-12px overflow-y-auto>
          <div v-for="(category, idx) in showFlowList" :id="`category-${idx}`" :key="category.category" mb-20px>
            <div text-18px>
              {{ category.categoryName }}
            </div>
            <div grid grid-cols-3 gap-4 mt-10px mb-10px>
              <div v-for="item in category.items" :key="item.id" flex items-center class="bg-item" @click="toStartProcess(item)">
                <span flex items-center justify-center w-32px h-32px bg="#409eff" rd-4px text-12px class="text-[#fff]" mr-6px> {{ item.name.substring(0, 1) }}</span>
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .bg-item {
    padding: 14px;
    cursor: pointer;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    &:hover {
      background-color: #f0f9ff;
      border-color: #409eff;
    }
  }
  .category {
    &:hover,
 &.selected {
      cursor: pointer;
      background-color: #f0f9ff;
    }
  }
</style>
