<template>
  <div class="ui-watermark" :style="style"></div>
</template>
<script>
import Watermark from './watermark.js'

export default {
  name: 'UiWatermark',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    /**
     * 水印文本
    */
    text: {
      type: String
    }
  },
  created() {
    this.watermark = new Watermark()
  },
  computed: {
    style() {
      const sy = {}
      if (this.width) {
        sy.width = this.width
      }
      if (this.height) {
        sy.height = this.height
      }
      return sy
    }
  },
  mounted() {
    this.refresh()
  },
  watch: {
    text() {
      this.refresh()
    }
  },
  methods: {
    refresh() {
      this.watermark.removeWatermark()
      const $dom = this.watermark.render(this.text)
      this.$el.appendChild($dom)
    }
  },
  beforeDestroy() {
    this.watermark.removeWatermark()
  }
}
</script>
<style lang="less">
.ui-watermark{
  overflow: hidden;
  pointer-events: none;
}
</style>
