<template>
  <el-dialog
    title="裁剪图片"
    :visible.sync="openDialog"
    :destroy-on-close="true"
    width="600px"
    append-to-body
    @close="closeDialog"
  >
    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap">
      <div style="width: 400px; height: 300px">
        <!-- 裁剪插件 -->
        <vue-cropper
          :style="{ width: showPreview ? '100%' : '80%' }"
          style="margin: 0 auto"
          ref="cropper"
          :img="img"
          :info="true"
          :autoCrop="autoCrop"
          :autoCropWidth="autoCropWidth"
          :autoCropHeight="autoCropHeight"
          :fixedBox="fixedBox"
          @realTime="realTime"
        />
      </div>
      <!-- 操作按钮 -->
      <el-row style="width: 100%; margin-top: 10px">
        <!--      <el-col :lg="2" :md="2">-->
        <!--        <el-upload :auto-upload="false" action="" :show-file-list="false"  :on-change='changeUpload'>-->
        <!--          <el-button size="small">-->
        <!--            上传-->
        <!--            <i class="el-icon-upload el-icon&#45;&#45;right"></i>-->
        <!--          </el-button>-->
        <!--        </el-upload>-->
        <!--      </el-col>-->
        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col
          :lg="{ span: 2, offset: 6 }"
          :md="2"
          style="display: flex; flex-direction: row; align-items: center; justify-content: flex-end"
        >
          <el-button size="small" plain @click="downImg">下 载</el-button>
          <el-button type="primary" plain size="small" @click="getCropData">裁 剪</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { parseTime } from "@/utils";
export default {
  name: "imageCropper",
  components: {
    VueCropper,
  },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    // 是否固定截图框大小
    fixedBox: {
      type: Boolean,
      default: false,
    },
    // 是否默认生成截图框
    autoCrop: {
      type: Boolean,
      default: true,
    },
    // 默认生成截图框宽度
    autoCropWidth: {
      type: Number,
      default: 200,
    },
    // 默认生成截图框高度
    autoCropHeight: {
      type: Number,
      default: 200,
    },
    img: {
      type: String,
    },
    showPreview: Boolean,
  },
  data() {
    return {
      openDialog: this.open,
      previews: {},
      // 裁剪组件的基础配置option
      options: {
        img: "",
      },
      currentIndex: 0,
    };
  },
  watch: {
    open(val) {
      this.openDialog = val;
    },
  },
  methods: {
    closeDialog() {
      // this.openDialog = false;
      this.$emit("update:open", false);
    },
    // 上传预处理
    changeUpload(file) {
      if (file.raw.type.indexOf("image/") < 0) {
        this.$message({
          message: "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。",
          type: "warning",
        });
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    //下载图片
    downImg() {
      let aLink = document.createElement("a");
      aLink.download = parseTime(new Date(), "{y}{m}{d}{h}{i}{s}") + Math.floor(Math.random() * 99999);
      this.$refs.cropper.getCropBlob((data) => {
        aLink.href = window.URL.createObjectURL(data);
        aLink.click();
      });
    },
    // 生成截图数据
    getCropData() {
      this.$refs.cropper.getCropBlob((data) => {
        this.$emit("onCropped", data);
      });
    },
    // 实时预览
    realTime() {
      // console.log(data)
      // this.previews = data;
      if (this.showPreview) {
        this.$refs.cropper.getCropBlob((res) => {
          // do something
          // console.log(res)
          // this.previews.url  = window.URL.createObjectURL(res);
          // console.log(this.previews)
          this.$refs.img.setAttribute("src", window.URL.createObjectURL(res));
        });
      }
    },
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    setIndex(index) {
      console.log(index);
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 截图 */
.avatar-upload-preview {
  width: 200px;
  height: 200px;
  // border-radius: 50%;
  overflow: hidden;
  zoom: 0.8;
}
</style>
