<!-- 弹出框 -->
<template>
  <van-overlay :show="visible" :lock-scroll="false" z-index="10000">
    <van-nav-bar :title="title" fixed placeholder :left-text="''" left-arrow @click-left="cancel" />

    <div class="popup-content">
      <component :is="currentTemplateDom" :data="data" :callback="callback" v-if="currentTemplateDom"></component>
    </div>
  </van-overlay>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      visible: false,

      title: '',
      templateDom: null,
      data: null,
      callback: null,

      currentTemplateDom: null
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    visible(val) {
      if (!val) {
        return
      }
      this.init()
    }
  },
  //方法集合
  methods: {
    /** 取消 */
    cancel() {
      this.$cancelPopup()
      if (this.callback) {
        this.callback()
      }
    },

    init() {
      if (this.templateDom) {
        this.currentTemplateDom = this.templateDom.default
      } else {
        this.currentTemplateDom = null
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.popup-content {
  width: 100vw;
  height: 100px;
  min-height: calc(100vh - 47px);
  background-color: #fff;
  margin-top: 47px;
  font-size: 14px;
  overflow-y: scroll;
}
</style>
