<template>
  <div class="kole-watermark" :class="{ 'is-fullscreen': fullscreen }" :style="{ backgroundImage: bg }"></div>
</template>

<script>
export default {
  name: 'KoleWatermark',
  props: {
    text: { type: String, default: 'Kole UI' },
    color: { type: String, default: 'rgba(0,0,0,0.10)' },
    fontSize: { type: Number, default: 14 },
    rotate: { type: Number, default: -22 },
    gap: { type: Number, default: 160 },
    fullscreen: { type: Boolean, default: false }
  },
  computed: {
    bg: function () {
      var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='" + this.gap + "' height='" + this.gap + "'>" +
        "<text x='0' y='" + (this.fontSize + 6) + "' font-family='sans-serif' font-size='" + this.fontSize +
        "' fill='" + this.color + "' transform='rotate(" + this.rotate + " 0 " + (this.fontSize + 6) + ")'> " + this.text + " </text></svg>";
      return "url(\"data:image/svg+xml;utf8," + encodeURIComponent(svg) + "\")";
    }
  }
};
</script>

<style src="./Watermark.css"></style>
