<script setup lang="ts">
import { onMounted, ref } from "vue";

defineProps<{
  currentProcess: Record<string, string>;
}>();

const list = ref<Array<Record<string, string>>>([]);
const emit = defineEmits(["change-btn-click"]);

//todo：请求拉取流程列表
function requesetProcessList() {
  list.value = Array(100)
    .fill(0)
    .map((_, index) => ({
      id: String(index),
      name: "流程节点" + Number(index)
    }));

  emit("change-btn-click", list.value[0]);
}

function handleChangeProcess(item) {
  emit("change-btn-click", item);
}

onMounted(() => requesetProcessList());
</script>

<template>
  <el-scrollbar h-full px-5 class="processs-list__content">
    <h1 font-bold py-2>流程列表</h1>
    <p
      v-for="item in list"
      class="px-1 hover:bg-#f7f7f7 hover:color-blue cursor-pointer duration-200 rounded"
      :class="{ 'is-active': currentProcess.id === item.id }"
      @click="() => handleChangeProcess(item)"
      :key="item.name"
    >
      {{ item.name }}
    </p>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.processs-list__content {
  .is-active {
    background-color: #f7f7f7;
    color: #409eff;
  }
}
</style>
