<template>
  <view class="canvas-img-code" @click="refresh()">
    <canvas :style="{ width: width * length + span * 2 + 'rpx', height: height + 'rpx' }" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
  </view>
</template>

<script>
/**
 * Vcode 验证码
 * @displayName vcode
 * @property {String|Number} width 每个验证码的宽度，单位rpx
 * @property {String|Number} height 图形验证码的高度，单位rpx
 * @property {Number} length 图形验证码的长度
 */
export default {
  name: 'wb-vcode',
  props: {
    /**
     * value: 初始值
     */
    value: { type: String, default: '' },
    /**
     * 每个验证码的宽度
     */
    width: { type: [String, Number], default: 40 },
    /**
     * 图形验证码的高度
     */
    height: { type: [String, Number], default: 60 },
    /**
     * 验证码长度
     */
    length: { type: Number, default: 4 }
  },
  data() {
    return {
      span: 30,
      md5: ''
    }
  },
  mounted() {
    this.init(this.value)
  },
  methods: {
    refresh() {
      console.log('refresh')
      this.init()
    },
    validator(value) {
      const _md5 = uni.$wb.md5(value.toUpperCase())
      return _md5 === this.md5
    },
    // 初始化验证码
    init(str = '') {
      console.log('start')
      var pool = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        // 'I',
        'M',
        'N',
        // 'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'S',
        'Y',
        'Z',
        // '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9'
        // '0'
      ]
      if (str == '' || str.length != this.length) {
        for (var i = 0; i < this.length; i++) {
          var c = pool[this.rn(0, pool.length - 1)]
          str += c
        }
      }
      this.pain(str)
    },
    pain(str) {
      this.md5 = uni.$wb.md5(str)
      var context = uni.createCanvasContext('imgcanvas', this),
        w = uni.upx2px(this.width),
        h = uni.upx2px(this.height),
        _span = uni.upx2px(this.span)
      var width = w * this.length + _span * 2
      context.setFillStyle('white')
      context.setLineWidth(5)
      context.fillRect(0, 0, width, h)
      for (var i = 0; i < this.length; i++) {
        var c = str[i]
        var deg = this.rn(-30, 30)
        context.setFontSize(18)
        context.setTextBaseline('top')
        context.setFillStyle(this.rc(80, 150))
        context.save()
        context.translate(uni.upx2px(this.width) * i + 30, parseInt(h / 1.5))
        context.rotate((deg * Math.PI) / 180)
        context.fillText(c, -15 + 5, -15)
        context.restore()
      }
      for (var i = 0; i < this.length * 10; i++) {
        context.beginPath()
        context.arc(this.rn(0, width), this.rn(0, h), 1, 0, 2 * Math.PI)
        context.closePath()
        context.setFillStyle(this.rc(150, 200))
        context.fill()
      }
      context.draw()
    },
    rc(min, max) {
      var r = this.rn(min, max)
      var g = this.rn(min, max)
      var b = this.rn(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    rn(min, max) {
      return parseInt(Math.random() * (max - min)) + min
    },
    canvasIdErrorCallback(e) {
      console.error(e.detail.errMsg)
    }
  }
}
</script>

<style lang="scss" scoped>
.canvas-img-code {
  display: inline-block;
}
</style>