<template>
  <a-drawer
    title="二维码创建"
    placement="right"
    :closable="true"
    :visible="visible"
    @close="onClose"
    width="50%"
    :bodyStyle="{'padding':0}"
    destroyOnClose
  >
    <div class="meun-box">
      <a-row>
        <a-col :span="6">
         <!-- <div class="select-btn">
            <span>选择图片</span>
            <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
          </div>-->
          <a-button type="primary" @click="toImage" v-if="images != ''">生成图片</a-button>
         <!-- <a-divider type="vertical"/>
          <a-button @click="newCode" v-if="images != ''">生成二维码</a-button>-->
        </a-col>
        <!--<a-col :span="6" v-if="images!=''">
          <a-form-item label="二维码内容：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input v-model="codeText"></a-input>
          </a-form-item>
        </a-col>-->
        <a-col :span="18" v-if="images!=''">
          <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-slider id="code" v-model="codeWidth" :max="300" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>
    <div class="center-box">
      <div class="image-box" ref="imageWrapper" v-if="images!=''">
        <code-move ref="code" :width="codeWidth"></code-move>
        <img class="bg-img" :src="images" />
      </div>
      <a-divider />
    </div>
    <div style="margin-left: 10%">
      <h2>操作说明</h2>
      <h3>
       1.使用鼠标可拖动二维码放置在图片内任何地方（注意：二维码位置不可超出图片范围）
      </h3>
      <h3>
        2.滑动图片上方的滑动条可以调节二维码大小
      </h3>
      <h3>
        3.点击图片上方的生成图片按钮可以下载调节好的二维码图片
      </h3>
    </div>
  </a-drawer>
</template>

<script>
import CodeMove from "../../components/sysmanage/codeMove";
import html2canvas from "html2canvas";
import ACol from "ant-design-vue/es/grid/Col";

export default {
  name: "newPoster",
  components: { ACol, CodeMove },
  data() {
    return {
      visible: false,
      images: "",
      codeWidth: 150, //二维码大小
      codeText:""
    };
  },
  methods: {
    showModal(picture,url) {
      this.codeText=url
      this.getBase64(picture, 'jpeg', (base64) =>{
        // 给原生img对象的src属性赋值
        this.images=base64;
        this.visible = true;
      });
    /*  this.$nextTick(()=>{
        this.newCode()
      });*/

      setTimeout(() =>{
        this.newCode()
      },500);

    },
    onClose() {
      this.visible = false;
      this.codeWidth=150
    },
    selectImage() {
      let file = this.$refs.selectImgae;
      if (!file.files || !file.files[0]) {
        return;
      }
      var reader = new FileReader();
      reader.onload = evt => {
        let result = evt.target.result;
        this.images = result;
      };
      reader.readAsDataURL(file.files[0]);
    },
    toImage() {
      html2canvas(this.$refs.imageWrapper, {
        backgroundColor: null
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.downloadFile("海报.png", dataURL);
      });
    },
    newCode(){
      if(this.codeText === ''){
        this.$notification.warning({ message: '系统提示', description:'请输入二维码内容!',duration: 4});
        return;
      }
      this.$refs.code.newCode(this.codeText);
    },
    getBase64(url, ext, callback) {
      let canvas = document.createElement("canvas");   //创建canvas DOM元素
      let ctx = canvas.getContext("2d");
      let img = new Image;
      img.crossOrigin = 'Anonymous';
      img.src = url;
      img.onload = () => {
        canvas.width = img.width; //指定画板的宽度，自定义
        canvas.height = img.height; //指定画板的高度,自定义
        ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
        let dataURL = canvas.toDataURL("image/" + ext);
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
      };
    },
    downloadFile(fileName, content) {
      const blob = this.base64ToBlob(content); // new Blob([content]);
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;

        //此写法兼容可火狐浏览器
        document.body.appendChild(link);
        const evt = document.createEvent("MouseEvents");
        evt.initEvent("click", false, false);
        link.dispatchEvent(evt);
        document.body.removeChild(link);
      }
    },
    base64ToBlob(code) {
      const parts = code.split(";base64,");
      const contentType = parts[0].split(":")[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    }
  }
};
</script>

<style scoped lang="less">
.meun-box {
  left: 0;
  right: 0;
  height: 80px;
  padding: 10px 24px 0;
}

.center-box {
  padding-top: 0px;
}

.select-btn {
  width: 90px;
  height: 32px;
  border: 1px solid #eee;
  position: relative;
  background-color: #00a0e9;
  line-height: 31px;
  border-radius: 4px;
  color: white;
  text-align: center;
  display: inline-block;
  margin-right: 8px;

  .seletImg {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.image-box {
  width: 300px;
  height: auto;
  overflow: hidden;
  position: relative;
  margin: auto;

  .bg-img {
    width: 100%;
  }
}
</style>
