<template>
  <div v-if="state.pageVisible">
    <a-modal
      :class="['sf-dialog', modalClass]"
      v-model:visible="state.modalVisible"
      :closable="false"
      :maskClosable="false"
      :keyboard="false"
      :footer="footer"
    >
      <div class="row height-100">
        <div
          class="col-12 row justify-between items-center border-btm fl-pb-sm"
        >
          <div class="row items-center">
            <slot name="modal-header"></slot>
          </div>
          <img
            class="close-icon"
            src="@/assets/image/icon/close-tabs.png"
            @click="handleCloseModal"
          />
        </div>
        <slot name="modal-body"></slot>
        <slot v-if="footer === null" name="modal-footer"></slot>
      </div>
      <template v-if="footer !== null" #footer>
        <slot name="modal-footer"></slot>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import { CloseOutlined } from "@ant-design/icons-vue";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  defineProps,
  watch,
} from "vue";

const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
const props = defineProps({
  openCount: {
    type: Number,
    default: 0,
  },
  clearCount: {
    type: Number,
    default: 0,
  },
  footer: {
    type: String,
  },
  modalClass: {
    type: String,
  },
});
watch(
  () => props.openCount,
  () => {
    state.pageVisible = true;
    state.modalVisible = true;
    emits("triggerOpenModal");
  }
);
watch(
  () => props.clearCount,
  () => {
    state.pageVisible = false;
    emits("triggerCloseModal");
  }
);
const state = reactive({
  modalVisible: true,
  pageVisible: false,
});
onBeforeMount(() => {});
onMounted(() => {});

const emits = defineEmits(["triggerCloseModal", "triggerOpenModal"]);

const handleCloseModal = () => {
  state.pageVisible = false;
  emits("triggerCloseModal");
};
</script>

<style scoped></style>
<style lang="scss">
.sf-dialog {
  min-width: 1000px;
  width: 90vw !important;
  top: 100px !important;
  .ant-modal-header {
    height: 60px;
    border-radius: 14px 14px 0 0;
  }
  .ant-modal-content {
    border-radius: 14px;
  }
  .ant-modal-body {
    height: 700px !important;
    padding: 16px 24px !important;
    overflow: auto;
  }
  .ant-modal-footer {
    background: #ebebebff;
    height: 60px;
    border-radius: 0 0 14px 14px;
    padding: 13px 19x;
  }
}
</style>
