<template>
    <div class="watermarkFlag" :style="'background:url('+imgUrl+')'"></div>
</template>
<script>
import {
  getParameterVauleByCode,
} from '@base/api/user'
export default {
  data() {
    return {
      imgUrl: null,
      isFormDev:false
    }
  },
  created() {
    this.init();
  },
  methods: {
    initIsFormDev() {
      let userFlag = this.$store.getters.userFlag
      this.isFormDev = userFlag == 6 || userFlag == 7 || userFlag == 8;
    },
    init() {
      this.initIsFormDev();
      if(this.isFormDev)return;
      getParameterVauleByCode({
        data: {"code": "showWatermark"},
        success: res => {
          let value = (!res.objx || !res.objx.value) ? "0" : res.objx.value;
          if (value == "1") {
            this.watermarkImg();
          }
        }
      })
    },
    watermarkImg() {
      let that = this
      const testName = this.$store.getters.nickName
      var nameL = ''
      if (testName.match(/[^\x00-\xff]/ig) != null){
        nameL  = testName.length
      }else{
        nameL  = testName.length / 2
      }
      // 通过canvas将文本生成图片
      const canvas = document.createElement('canvas')
      canvas.width = nameL * 32 * 2
      canvas.height = nameL * 32
      const ctx = canvas.getContext('2d')

      ctx.font = '18px PingFangSC'
      ctx.textAlign = 'center'
      ctx.fillStyle = '#EEEEEE'
      // 设置倾斜角度
      ctx.rotate(-30 * Math.PI / 180)
      // 调整偏移量，让文本完整显示
      ctx.translate(-50, 30)
      ctx.fillText(testName, 100, 58)
      // 将canvas转为base64图片
      const url = canvas.toDataURL()
      that.imgUrl = url
      console.log(that.imgUrl)
    }
  }
}
</script>
<style scoped>
.watermarkFlag {
  /* 设置全屏宽高，覆盖于页面上方 */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0.8;
  /* 生成的图片是有一张，开启repeat自动填充 */
  background: repeat;
  pointer-events: none;
  /* 核心部分，决定水印层与内容部分的结合方式 */
  mix-blend-mode: multiply;
  z-index: 9999999;
}
</style>
