<template>
  <div class="position-relative ms-5">
    <my-table
      height="auto"
      maxHeight="calc(100vh - 15em)"
      :isSortable="true"
      :isDraggable="true"
      :hasSearch="false"
      :hasPagination="false"
      :fetchingData="fetchingData"
      :items="localMainFormElements[currentTab]?.items"
      :tableColumns="tableColumns"
      :tableActions="formTableActions"
      @delete-table-item="deleteItem"
      @edit-table-item="editNewFormItem"
      @onSort="onSort"
      @on-linked-title-click="onLinkedTitleClick"

    />
    <button-component
      classes="d-inline-flex add-new-form-item"
      @click="openNewFormItem"
      buttonText=""
    >
      <span class="tavasi tavasi-Component-220--1"
        ><span class="path1"></span><span class="path2"></span
        ><span class="path3"></span
      ></span>
    </button-component>
  </div>
</template>
<script>
import newFormExtension from "@extensions/newFormExtension";

export default {
  extends: newFormExtension,

  props: ["newFormItem", "formTitleData"],
  mounted() {
    const form = [
      {
        title: "فرم ساده",
        items: [],
        active: true,
      },
    ];

    this.localMainFormElements = this.formTitleData.meta ?? form;
  },

  data() {
    return {
      localMainFormElements: [
        {
          title: "فرم ساده",
          items: [],
          active: true,
        },
      ],
    };
  },

  components: {
   
    LabelComponent: () =>
      import(
         "@components/forms/LabelComponent.vue"
      ),
  },
};
</script>

<style scoped lang="scss">
.add-new-form-item {
  position: absolute;
  left: -3em;
  bottom: 0;
}
</style>