<template>
  <div v-show="isModalOpen" class="modal-wrapper">
    <div class="modal-container small-modal">
      <div class="modal-title text-ct">
        <h2>{{ title }}</h2>
      </div>
      <div class="modal-content-monthly">
        <div class="flex align-center">
          <p v-if="confirmAt"><svg-icon type="mdi" :path="confirmPath"></svg-icon></p>
          <p><svg-icon type="mdi" :path="alertPath"></svg-icon></p>
          <p class="alert-write text-ct" v-html="message"></p>
        </div>
      </div>
      <div class="modal-end flex justify-center">
        <button class="gray-btn large-btn flex50" id="confirmCancle" @click="closeModal" v-show="confirmAt">취소</button>
        <button class="blue-btn large-btn flex50" id="confirmOk" @click="closeModal">확인</button>
      </div>
    </div>
  </div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiCheckCircle, mdiAlertCircle } from '@mdi/js';
export default {
  props: {
    title: {
      type: String,
      default: '모달 제목'
    },
    message: {
      type: String,
      default: '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
    },
  },
  data() {
    return {
      isModalOpen: false,
      activeTab: 'tab1',
      modalType: 'tab-modal',
      title: this.title,
      message: this.message,
      confirmAt: false,
      confirmPath: mdiCheckCircle,
      alertPath: mdiAlertCircle,
    }
  },
  methods: {
    // 탭 변경
    showTab: function (tabName) {
      this.activeTab = tabName;
    },

    // 닫기
    closeModal: function () {
      this.isModalOpen = false;
    },

    // 모달 호출
    showModal: function () {

      this.confirmAt = false;
      this.isModalOpen = true;
      document.getElementById("confirmOk").focus()
    },

    // confirm 호출
    showConfirm: async function () {
      this.confirmAt = true;
      this.isModalOpen = true;
      document.getElementById("confirmOk").focus()
      const promise = new Promise((resolve, reject) => {
        document.getElementById("confirmCancle").addEventListener("click", async () => {
          resolve('cancle')
        });

        document.getElementById("confirmOk").addEventListener("click", async () => {
          resolve('ok')
        });
      });

      return promise.then(
        (id) => {
          if (id == 'cancle') {
            return false;
          } else if (id == 'ok') {
            return true;
          }

        }
      );
    },

    setTitle: function (Title) {
      this.title = Title;
    },

    setMessage: function (message) {
      this.message = message;
    },

  },
  watch: {

  },
  computed: {

  },
  components: {
    'SvgIcon': SvgIcon
  },
}
</script>