<!-- 生成二维码 组件 -->
<template>
  <canvas
    class="qrcode-canvas"
    :class="{show: show}"
    :style="{height: size + \'px\', width: size + \'px\'}"
    :height="size"
    :width="size"
    ref="qr"
  ></canvas>
</template>

<script>
  import qr from \'qr.js\'
  export default {
    name: \'qrcode\',
    props: {
      val: {
        type: String,
        required: true
      },
      size: {
        type: Number,
        default: 200
      },
      // \'L\', \'M\', \'Q\', \'H\'
      level: String,
      bgColor: {
        type: String,
        default: \'#FFFFFF\'
      },
      fgColor: {
        type: String,
        default: \'#000000\'
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      size: function(){
        this.update()
      },
      val: function(){
        this.update()
      },
      level: function(){
        this.update()
      },
      bgColor: function(){
        this.update()
      },
      fgColor: function(){
        this.update()
      }
    },
    mounted () {
      this.update()
      console.log(this.show)
    },
    methods:{
      update () {
        var size = this.size
        var bgColor = this.bgColor
        var fgColor = this.fgColor
        var $qr = this.$refs.qr
        var qrcode = qr(this.val)
        var ctx = $qr.getContext(\'2d\')
        var cells = qrcode.modules
        var tileW = size / cells.length
        var tileH = size / cells.length
        var scale = (window.devicePixelRatio || 1) / getBackingStorePixelRatio(ctx)
        $qr.height = $qr.width = size * scale
        ctx.scale(scale, scale)
        cells.forEach(function (row, rdx) {
          row.forEach(function (cell, cdx) {
            ctx.fillStyle = cell ? fgColor : bgColor
            var w = (Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW))
            var h = (Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH))
            ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h)
          })
        })
      }
    }
  }
  function getBackingStorePixelRatio (ctx) {
    return (
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1
    )
  }
</script>

<style lang="less" scoped>
  .qrcode-canvas {
    display: none
  }
  .show {
    display: block;
  }
</style>

<!-- 生成二维码 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="生成二维码">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 内容 -->
    <div id="qrCode">
      <QRCode :val="val" :show="true" />
    </div>
    <!-- 按钮 -->
    <mt-button type="primary" @click="changeUrl">修改url</mt-button>
  </div>
</template>

<script>
  import QRCode from \'../components/QRCode.vue\'
  import { MessageBox } from \'mint-ui\';

  export default {
    name: \'QR\',
    components: {
      QRCode
    },
    data(){
      return {
        val:\'https://www.baidu.com/s?wd=123\'
      }
    },
    methods: {
      changeUrl(){
        MessageBox.prompt(\'请输入新的url\').then(({ value, action }) => {
          this.val = value;
        });
      }
    }
  }
</script>

<style>
  /*垂直水平居中*/
  #qrCode {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
  }
  .mint-button{
    width: 80%;
    margin: 20px auto;
    display: block;
  }
</style>