<template>
  <div class="mpvueCropper">
    <div class="canvasBg">
      <canvas
        v-if="_canvasId"
        :canvasId="_canvasId"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
        disable-scroll
        :style="{
          width: _width + 'px',
          height: _height + 'px',
          background: 'rgba(0, 0, 0, .8)',
        }"
      >
      </canvas>
      <canvas
        v-if="_targetId"
        :canvas-id="_targetId"
        disable-scroll
        :style="{
          position: 'fixed',
          top: -_width * _pixelRatio + 'px',
          left: -_height * _pixelRatio + 'px',
          width: _width * _pixelRatio + 'px',
          height: _height * _pixelRatio + 'px',
        }"
      >
      </canvas>
    </div>
    <div class="btn flex">
      <div class="btn-cont flex">
        <div class="cancel" @click="cancelSelect">取消</div>
        <div @click="selectImg">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import WeCropper from "we-cropper";
import index from "@/api/index";
export default {
  name: "mpvue-cropper",
  props: {
    option: {
      type: Object,
    },
  },
  data() {
    return {
      _wecropper: null,
      selectImgUrl: "",
      ossConfig: {},
    };
  },
  computed: {
    _canvasId() {
      return this.option.id;
    },
    _targetId() {
      return this.option.targetId;
    },
    _width() {
      return this.option.width;
    },
    _height() {
      return this.option.height;
    },
    _pixelRatio() {
      return this.option.pixelRatio;
    },
  },
  methods: {
    touchstart($event) {
      this._wecropper.touchStart($event.mp);
    },
    touchmove($event) {
      this._wecropper.touchMove($event.mp);
    },
    touchend($event) {
      this._wecropper.touchEnd($event.mp);
    },
    pushOrigin(src) {
      this._wecropper.pushOrign(src);
    },
    updateCanvas() {
      this._wecropper.updateCanvas();
    },
    getCropperBase64(fn) {
      return this._wecropper.getCropperBase64(fn);
    },
    getCropperImage(opt, fn) {
      return this._wecropper.getCropperImage(opt, fn);
    },
    init() {
      console.log(this.option.src, "-----------97");
      this._wecropper = new WeCropper(
        Object.assign(this.option, {
          id: this._canvasId,
          targetId: this._targetId,
          pixelRatio: this._pixelRatio,
        })
      )
        .on("ready", (...args) => {
          this.$emit("ready", ...args);
        })
        .on("beforeImageLoad", (...args) => {
          this.$emit("beforeImageLoad", ...args);
        })
        .on("imageLoad", (...args) => {
          this.$emit("imageLoad", ...args);
        })
        .on("beforeDraw", (...args) => {
          this.$emit("beforeDraw", ...args);
        });
    },
    selectImg() {
      let _this = this;
      this._wecropper.getCropperImage().then((path) => {
        console.log(path, "---path");
        wx.showLoading({
          title: "生成中...",
        });
        this.fileName = `${_this.ossConfig.dir}${path.split('/')[path.split('/').length-1]}`
        wx.uploadFile({
          url: `${ _this.ossConfig.host}`,
          filePath: path,
          name: "file",
          formData: {
            key: _this.fileName,
            OSSAccessKeyId: _this.ossConfig.accessid,
            policy: _this.ossConfig.policy,
            signature: _this.ossConfig.signature,
            success_action_status: "200",
          },
          success(res) {
            console.log(res, "-----------118--success");
            if (res.statusCode == 200) {
              let host = _this.ossConfig.host.substr(-1) == '/'?_this.ossConfig.host:`${_this.ossConfig.host}/`
              _this.selectImgUrl = `${host}${_this.fileName}`;
              wx.setStorageSync("wo-selectImgUrl", _this.selectImgUrl);
              wx.hideLoading();
              wx.showToast({
                title: "成功",
                icon: "success",
                duration: 1000,
              });
              setTimeout(() => {
                wx.navigateBack();
              }, 1000);
            } else {
              wx.showToast({
                title: "生成失败",
                icon: "error",
                duration: 1000,
              });
            }
            //do something
          },
          fail(res) {
            console.log(res, "-----------------fail");
            wx.showToast({
              title: "生成失败",
              icon: "error",
              duration: 1000,
            });
          },
        });
      });
    },
    cancelSelect() {
      // this.$emit("cancelSelect");
      wx.navigateBack();
    },
    get_oss_config() {
      console.log("-----get_oss_config")
      index.get_oss_config().then((res) => {
        this.ossConfig = res.data;
        console.log(this.ossConfig,'--ossConfig')
      });
    },
    random_string(len) {
      len = len || 32;
      let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      let maxPos = chars.length;
      let pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    }
  },
  onLoad() {
    console.log('------mc---onLoad')
    this.get_oss_config();
    if (!this.option) {
      return console.warn(
        "[mpvue-cropper] 请传入option参数\n参数配置见文档：https://we-plugin.github.io/we-cropper/#/api"
      );
    }
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.mpvueCropper {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.btn {
  position: fixed;
  bottom: 0;
  padding: 20px 0;
  width: 100%;
  justify-content: center;
  .btn-cont {
    width: 90%;
    height: 46px;
    border: 1px solid #fff;
    border-radius: 46px;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    .cancel {
      border-right: 1px solid #fff;
    }
    & > div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
      width: 50%;
      height: 46px;
      &:active {
        background: #229df1;
      }
    }
  }
}
</style>