<template>
  <div class="side-panel">
    <form @submit.prevent="saveNewTab()" class="text__14">
      <form-builder
        ref="newTabBuilder"
        :formElements="formElement"
        :formData="formData"
      ></form-builder>

      <div class="mb-3">
        <button-component
          type="submit"
          classes="btn-outline-primary mx-3"
          buttonText="افزودن"
          :buttonLoading="buttonLoading"
        ></button-component>

        <button-component
          classes="btn-danger"
          buttonText="انصراف"
          :buttonLoading="buttonLoading"
          @click="closeNewFormItem"
        ></button-component>
      </div>
    </form>
  </div>
</template>

<script>

export default {
  emits: ["close-new-form-item", "add-item-content"],

  data() {
    return {
      buttonLoading: false,
      formData: {
        title: null,
        comment: null,
        type: 1,
        meta: null,
        table_columns: null,
      },
      formElement: {
        title: "بخش جدید",
        items: [
          {
            key: "title",
            label: "عنوان",
            type: "string",
            placeholder: "عنوان را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
          {
            key: "comment",
            label: "توضیحات",
            type: "textarea",
            placeholder: "توضیحات را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
        ],
      },
    };
  },
  methods: {
    closeNewFormItem() {
      this.$emit("close-new-form-item");
    },
    saveNewTab() {
      const formData = this.$refs.newTabBuilder.localFormData;
      this.$emit("add-item-content", formData);
    },
  },
};
</script>

<style lang="scss"></style>
