<template>
  <div class="pl-8 py-8 processList flex flex-col">
    <div class="processTitle">流程列表</div>
    <syScrollBar @scroll-to-end="$emit('scrollToEnd')">
      <StepVertical
        v-model:active-index="activeIndex"
        @update:active-index="handleClickItem"
        :list="computedList"
      ></StepVertical>
    </syScrollBar>
  </div>
</template>

<script setup lang="ts">
import { syScrollBar } from "cqk-sy-ui";
import { computed } from "vue";
import StepVertical from "@/components/StepVertical/index.vue";

const props = defineProps<{
  list: any[];
  activeId: string;
}>();

const emit = defineEmits(["clickItem", "scrollToEnd"]);

const activeIndex = computed(() => {
  return props.list.findIndex((i) => i.id === props.activeId);
});

const handleClickItem = (index: number) => {
  emit("clickItem", props.list.find((i, idx) => idx === index).id);
};

const computedList = computed(() => {
  return props.list.map((i) => {
    return {
      ...i,
      content: i.name,
    };
  });
});
</script>

<style scoped lang="scss">
.processList {
  box-sizing: border-box;
  height: calc(100vh - 70px);
  width: 250px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(240, 240, 240, 0.29);
  border-radius: 4px 20px 20px 4px;
}

.processTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--sy-black);
  margin-bottom: 30px;
}
</style>
