<template>
  <div
    class="modal fade show"
    id="base-modal"
    tabindex="-1"
    aria-labelledby="base-modal"
    aria-modal="true"
    role="dialog"
    style="padding-right: 17px; display: block"
  >
    <div
      class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
      :class="modalSize"
      :style="{ overflow: $attrs.overflow, width: $attrs.width }"
    >
      <div
        class="modal-content"
        :style="{ height: $attrs.height, maxHeight: $attrs.maxHeight }"
      >
        <div class="modal-header">
          <div class="" style="width: 90%">
            <h5 class="modal-title">
              {{ modalTitle }}
            </h5>
            <p
              v-if="$attrs.description"
              class="text-truncate mt-1"
              style="width: 100%; color: rgb(167, 160, 152)"
            >
              {{ $attrs.description }}
            </p>
          </div>
          <button
            @click.prevent="close()"
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- <component
            v-if="getComponentName?.length"
            :is="getComponentName"
          ></component> -->
          <slot></slot>
        </div>
        <div v-if="hasFooter" class="modal-footer">
          <button
            v-if="showCloseButton"
            @click.prevent="close()"
            type="button"
            class="btn btn-secondary"
            data-dismiss="modal"
          >
            بستن
          </button>
          <button
            v-if="showSaveButton"
            @click.prevent="save()"
            type="button"
            class="btn btn-primary"
          >
            ذخیره
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

export default {
  props: {
    modalSize: {
      //.modal-sm 	300px
      //None 	500px
      //.modal-lg 	800px
      //.modal-xl 	1140px
      default: "modal-xl",
    },
    hasFooter: {
      default: true,
    },
    modalTitle: {
      default: "",
    },
    showSaveButton: {
      default: true,
    },
    showCloseButton: {
      default: true,
    },
  },
  data() {
    return {
      sub_Title: "",
    };
  },
  computed: {
    ...mapState(useCommonStore, ["getComponentName"]),
  },

  methods: {
    ...mapActions(useCommonStore, ["SHOW_BASE_MODAL"]),
    close() {
      // this.SHOW_BASE_MODAL(false);
      this.$emit("close");
    },
    save() {
      // this.SHOW_BASE_MODAL(false);
      this.$emit("save");
    },
  },
};
</script>
<style scoped>
.modal .modal-dialog .modal-content .modal-header .close {
  padding: 1em 1em;
  margin: -1rem auto -1rem -1rem;
}
</style>