<template>
  <div v-if="pdfModal" class="modal-wrapper" role="dialog" 
  aria-modal="true">
    <div class="modal-container">
          <div class="modal-title">
              <div class="flex justify-between align-center">
                  <h2 class="page-sub-title">PDF미리보기</h2>
                  <button class="icon-btn black" title="pdf 미리보기" @click="PdfModalClose" aria-label="pdf preview">
                    <svg-icon type="mdi" :path="closePath" role="img" aria-labelledby="pdf preview"></svg-icon>
                  </button>
              </div>
          </div>
          <div class="modal-content-monthly">
            <vue-pdf-app :pdf="pdfurl" ></vue-pdf-app>
          </div>
          <div class="modal-end flex justify-end align-center">       
            <div class="gd-2 pl0 pr0">
                  <button @click="PdfModalClose" title="닫기" class="large-btn darkg-border-btn ml0">닫기</button>
              </div> 
         </div>
    </div>
  </div>
</template>

<script>
import VuePdfApp from "vue3-pdf-app";
import { mdiWindowClose } from '@mdi/js';
export default {
  props: {
      url: {
          type: String,
          default: null,
      },   
      modal : {
        type: Boolean,
        default: false,
      }
  },
  data() {
    return {
      closePath:mdiWindowClose,
      pdfModal : this.modal,
      pdfurl : this.url
    }
  },
  components: {
    VuePdfApp
  },
  methods : {
    PdfModalClose : function(){
      this.pdfModal = false;
    },   
    PdfModalOpen : function(){
      this.pdfModal = true;
    },   
  },
  watch: {
      modal: function (v) {
          this.pdfModal = v;
      },
      url: function (v) {
          this.pdfurl = v;
      },
  },
};
</script>

<style>
@import "https://unpkg.com/vue-pdf-app@2.0.0/dist/icons/main.css";
</style>