<template>
  <div class="side-panel">
    <div class="side-panel-header">
      <h6 class="text-center">
        افزودن آیتم جدید
      </h6>
    </div>

    <div class="redios-castom px-3 py-2 ">
      <div class="side-panel-content">
        <form @submit.prevent="saveNewItemForm()" class="text__14">
          <form-builder
            ref="newFormItemBuilder"
            :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>
    </div>
  </div>
</template>

<script>

export default {
  emits: ["close-new-form-item","add-item-content"],
  props: {
    editFormData: {
      default() {
        return {};
      },
    },
  },
  watch: {
    editFormData: {
      handler(newVal) {
        this.formData = newVal;
      },
    },
  },
  mounted(){
    this.formData = this.editFormData;
  },

  data() {
    return {
      buttonLoading: false,
      formData: {
        name: "",
        key: "",
        placeholder: "",
        type: "",
      },
      formElement: {
        title: "مشخصات اصلی",
        items: [
          {
            key: "label",
            label: "عنوان",
            type: "string",
            placeholder: "عنوان را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
          {
            key: "key",
            label: "کلیدواژه",
            type: "string",
            placeholder: "کلیدواژه را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
          {
            key: "placeholder",
            label: "راهنما",
            type: "string",
            placeholder: "راهنمای اولیه مختصر را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
          {
            key: "value",
            label: "مقدار",
            type: "string",
            placeholder: "مقدار را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [],
          },
          {
            key: "type",
            label: "نوع",
            type: "select",
            placeholder: "نوع را وارد کنید",
            required: "1",
            validation_regex: "{3-100}",
            validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
            multi_select: "0",
            options: [
              {
                title: "صوتی",
                value: "sound",
              },
              {
                title: "فیلم",
                value: "video",
              },
              {
                title: "تصویر",
                value: "img",
              },
              {
                title: "عبارت(نمایشی)",
                value: "label",
              },
              {
                title: "متن",
                value: "textarea",
              },
              {
                title: "انتخابی",
                value: "select",
              },

              {
                title: "متن کوتاه",
                value: "string",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    closeNewFormItem() {
      this.$emit("close-new-form-item");
    },
    saveNewItemForm() {
      const formData = this.$refs.newFormItemBuilder.localFormData;
      this.$emit("add-item-content", formData);
    },
    resetForm() {
      this.formData = {
        name: "",
        key: "",
        placeholder: "",
        type: "",
      };
    },
  },
  
};
</script>

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