<template>
  <van-popup
    v-model="dialogVisible"
    closeable
    close-icon-position="top-left"
    position="bottom"
    :style="{ height: '100%' }"
    class="js-custom-dialog"
    @open="getFormData"
    @close="closeDialog"
  >
    <div
      v-if="components.customBody"
      :style="{'height':bodyHeight||'100px','width':bodyWidth||'100px','margin-top':'10%'}"
      v-html="$utils.formatText(components.customBody)"
    />
    <iframe
      v-else
      :src="components.url"
      :height="components.bodyHeight||'100%'"
      :width="components.bodyWidth||'100%'"
      :style="{'margin-top':'10%'}"
      frameborder="0"
      scrolling="no"
    />
  </van-popup>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: String,
    components: Object,
    bodyHeight: String,
    bodyWidth: String
  },
  data() {
    return {
      dialogVisible: this.visible,
      templateType: '',
      title: this.components.title || '弹窗信息',
      template: ''
    }
  },
  watch: {
    visible: {
      handler: function(val) {
        this.dialogVisible = val
      },
      immediate: true
    }
  },
  methods: {
    getFormData() {
      // console.log(this.components)
    },
    closeDialog() {
      this.$emit('close', false)
    },
    handleSave() {},
    handleActionEvent({ key }) {
      switch (key) {
        case 'save':
          this.handleSave()
          break
        case 'cancel':
          this.closeDialog()
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="scss" >
.js-custom-dialog{
  .el-dialog__body{
      height:  calc(70vh) !important;
  }
}
</style>
