<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">
        <p class="alert-write text-ct" v-html="message">
        </p>
        <div v-if="radioAt">
          <p>원본파일 : </p>
          <label></label>
          <p>동작 : </p>
          <label><input type="radio" value="move" v-model="moveOrCopy.type">덮어쓰기</label>
          <label><input type="radio" value="cancel" v-model="moveOrCopy.type">건너뛰기</label>
          <label><input type="checkbox" v-model="moveOrCopy.checkBox">항상 이 동작 사용</label>
        </div>
      </div>
      <div class="modal-end flex justify-center" style="flex-wrap: nowrap;">
        <button class="blue-btn large-btn" id="confirmOk" @click="closeModal" @keyup.enter="closeModal">확인</button>
        <button class="gray-btn large-btn" id="confirmCancel" @click="closeModal" v-show="confirmAt">취소</button>
        <button class="gray-btn large-btn" id="confirmRadioCancel" @click="closeModal" v-show="radioAt">취소</button>
      </div>
    </div>
  </div>
</template>
<script>

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,
      radioAt: false,
      moveOrCopy: {
        type: null,
        checkBox: null
      },
    }
  },
  methods: {
    // 탭 변경
    showTab: function (tabName) {
      this.activeTab = tabName;
    },

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

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

      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("confirmCancel").addEventListener("click", async () => {
          resolve('cancel')
        });

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

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

    // radio confirm 호출
    showRadioConfirm: async function () {
      this.radioAt = true;
      this.isModalOpen = true;
      this.moveOrCopy.type = "move";
      this.moveOrCopy.checkBox = false;

      document.getElementById("confirmOk").focus()
      const promise = new Promise((resolve, reject) => {
        document.getElementById("confirmRadioCancel").addEventListener("click", async () => {
          resolve('cancel')
        });

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

      return promise.then(
        (id) => {
          if (id == 'cancel') {
            this.moveOrCopy.type = "cancel"
            this.moveOrCopy.checkBox = false
            return this.moveOrCopy;
          } else if (id == 'ok') {
            return this.moveOrCopy;
          }
        }
      );
    },

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

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

  },
  watch: {

  },
  computed: {

  },
  components: {

  },
}
</script>