<template>
  <div class="side-panel">
    <div class="side-panel-header">
      <h6 class="text-center">
        مشخصات کامل مورد جاری
      </h6>
    </div>

    <div class="border redios-castom px-3 py-2 ">
      <div class="side-panel-content">
        <form-builder
          :previewMode="true"
          :formElements="clonedFormElements"
          :formData="selectedItem"
        ></form-builder>
      </div>

      <div class="d-flex justify-content-between">
        <button-component
          classes="d-inline-flex btn-default"
          @click="closeFormShow"
          buttonText=""
        >
          <span class="tavasi tavasi-Component-71--1"></span>
        </button-component>
        <button-component
          classes="d-inline-flex btn-default"
          @click="editItem"
          buttonText=""
        >
          <i class="tavasi tavasi-Component-242--1"></i>
        </button-component>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["selectedItem"],
  emits: ["close-form-show", "edit-item"],

  data() {
    return {
      clonedFormElements: {
        items: [
          {
            key: "title",
            label: "عنوان",
            type: "label",
            placeholder: "عنوان مختصری وارد کنید",
            required: "0",
            validation_regex: "",
            validation_error: "",
            multi_select: "0",
            options: [],
            value: null,
          },
          {
            key: "comment",
            label: "توضیح",
            type: "label",
            placeholder: "توضیح مختصری وارد کنید",
            required: "0",
            validation_regex: "",
            validation_error: "",
            multi_select: "0",
            options: [],
            value: null,
          },
        ],
        title: "فرم جزییات",
      },
    };
  },

  methods: {
    closeFormShow() {
      this.$emit("close-form-show");
    },
    editItem() {
      this.$emit("edit-item", this.selectedItem);
    },
  },
};
</script>