<template>
  <div class="container mt-2" style="width: 100vw; height: 100vh">
    <h1 class="mb-3">{{ processObject.name }}</h1>
    <label class="form-label mb-0" style="font-size: 14px">Beschreibung</label>
    <textarea
      class="form-control-sm mb-3 pb-2 ms-0 me-0"
      wrap="hard"
      style="width: 100%"
      v-model="processObject.description"
    ></textarea>
    <ProcessTableComponent
      :viewProp="objectData"
      :tableTitleProp="'Ansichten'"
    ></ProcessTableComponent>
    <ProcessTableComponent
      :viewProp="processObject.workflows"
      :tableTitleProp="'Workflows'"
    ></ProcessTableComponent>
  </div>
</template>

<script>
import ProcessTableComponent from "@/modules/process/components/process/ProcessTableComponent.vue";
import { getObject } from "@/utils/getObject.js";
//import { getSpecificObject } from "@/utils/getSpecificObject";
export default {
  name: "ProcessOverviewComponent",
  // Verwendete Komponenten
  components: {
    ProcessTableComponent,
  },
  // Props für die Komponente
  props: {
    object: {
      type: Object,
      required: true,
    },
    objectId: {
      type: String,
      required: true,
    },
  },

  // Daten der Komponente
  data() {
    return {
      processObject: {},
      objectData: {},
    };
  },

  // Computed Propertiesprocesses.data
  computed: {},

  // Methoden
  methods: {},

  // Lifecycle-Hooks
  mounted() {
    this.processObject = { ...this.object };
    console.log(this.processObject);
    this.wsHandler = getObject(
      "system_processView",
      ["name", "description"],
      (id, updated) => {
        this.objectData = { ...this.objectData, [id]: updated };
      }
    );
  },
  beforeUnmount() {
    this.specificObjectHandler?.unsubscribe();
  },
};
</script>

<style scoped></style>
