<template>
<div>
  <b-modal
   :header-bg-variant="'primary'"
  id="modal-prevent-closing"
  :no-close-on-esc="true"
  :cancel-disabled="false"
  :ok-disabled="false"
  :hide-footer="true"
  :no-close-on-backdrop="true"
  style="z-index:1050;"
  v-model="isShow"
  ref="modal"
  centered
  :title="modalTitle"
  size="huge"
  title-class = "modalTitle h3"
  header-class = "modalHeader"
  @close="closeModal">
    <slot v-if="!isControledByRoute"/>
    <router-view v-else/>
  </b-modal>
  </div>
</template>

<script>
export default {
  name: 'modal',
  props: ['isOpen', 'title', 'isControledByRoute'], // 接收父物件傳過來的值
  data () {
    return {
      routeName: '',
      isShow: false,
      modalTitle: ''
    }
  },
  methods: {
    closeModal () {
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
        this.$emit('closeEvent')
        if (this.isControledByRoute) this.$router.go(-1)
      })
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (!this.$route.meta.isModal || !this.isControledByRoute) return
      this.modalTitle = this.$route.meta.isModal ? this.$route['meta']['alias'] : this.title
      this.isShow = true
    },
    isOpen: function (newVal, oldVal) {
      this.modalTitle = this.title
      this.isShow = newVal
    }
  }
}
</script>

<style>
.modal .modal-huge {
  max-width: max-content;
  width: auto;
}
.modalHeader{
  padding: 10px;
  border-radius: 5px 5px 0 0 !important;
}
.modalTitle{
  margin:auto 0;
  color:white
}
</style>
