<script setup lang="ts">
import { onMounted } from "vue";
import { useAsync } from "/@/hooks"
import { httpList } from "/@/api/parameter/setProcess";

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

const emit = defineEmits(["change-btn-click"]);

const { run, data, loading } = useAsync<Array<Record<string, string>>>({
  initalData: [],
  isList: true,
  success: () => emit("change-btn-click", data.value[0])
});

onMounted(() => run(
 httpList()
));
</script>

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

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