<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锛孭NG鍚庣紑鐨勬枃浠躲€�",
          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>