<template>
  <a-drawer
          title="海报创建"
          placement="right"
          :closable="true"
          :visible="visible"
          @close="onClose"
          width="100%"
          :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 @click="toImage" 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-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 :width="codeWidth"></code-move>
        <img class="bg-img" :src="images">
      </div>
    </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//二维码大小
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    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) ;
      });
    },
    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 {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    padding: 10px 24px 0;
  }

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

  .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>
