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