<template>
    <div class="com-image-cropper">
        <div>
            <vue-cropper
                ref="cropper"
                alt="图片"
                :src="data"
                :view-mode="1"
                :aspect-ratio="1"
                :auto-crop-area="1"
                :zoomable="false"
                :movable="false"
                :ready="ready"
                :min-container-width="(options.minContainerSize && options.minContainerSize.width) || null"
                :min-container-height="(options.minContainerSize && options.minContainerSize.height) || null"
                :container-style="options.containerStyle || containerStyle"
            ></vue-cropper>
        </div>
        <footer>
            <button
                class="ui-button cancel"
                style="width:120px"
                @click="onClose"
            >{{$t("common.cancel")}}</button>
            <button
                class="ui-button submit"
                style="width:120px"
                @click="cropImage"
            >{{$t("common.set")}}</button>
        </footer>
    </div>
</template>
<script>
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";
import { base64ToDataURL, base64ToBlob, blobToBase64 } from "@/utils/file";
import CompressImg from "@/utils/CompressImg";
export default {
    name: "com-image-cropper",
    components: { VueCropper },
    props: {
        name: String,
        data: String,
        options: {
            type: Object,
            default() {
                return {};
            }
        },
        compress: Boolean,
        containerStyle: {
            type: Object,
            default: function() {
                return { height: "100%" };
            }
        }
    },
    watch: {
        data(newVal, oldVal) {
            if (!newVal && oldVal) {
                this.$refs.cropper.destroy();
            }
        }
    },
    methods: {
        ready() {
            if (this.radius > 0) {
                this.$el.querySelector(".cropper-view-box").style.borderRadius =
                    this.radius + "%";
            }
        },
        cropImage() {
            // let base64 = this.$refs.cropper
            //     .getCroppedCanvas({ width: 512, height: 512 })
            //     .toDataURL();
            // this.dataURL && window.URL.revokeObjectURL(this.dataURL);
            // this.dataURL = base64ToDataURL(base64);
            // this.$emit("blob", this.name, this.dataURL, base64);
            // this.onClose();

            let base64 = this.$refs.cropper.getCroppedCanvas({ width: 512, height: 512 }).toDataURL();
            this.dataURL && window.URL.revokeObjectURL(this.dataURL);

            if (this.compress) {
                const img = new Image();
                img.src = base64;
                img.onload = () => {
                    const blob = base64ToBlob(base64);
                    const simg = CompressImg(img, {
                        weight: blob.size,
                        maxWeight: 0.4 * 1024 * 1024,
                        maxSize: 200
                    });
                    this.dataURL = simg.src;
                    this.$emit("crop-blob", this.name,this.dataURL, simg.base64Src);
                    this.onClose();
                };
            } else {
                this.dataURL = base64ToDataURL(base64);
                this.$emit("crop-blob",this.name, this.dataURL, base64);
                this.onClose();
            }
        },
        onClose() {
            this.$emit("close");
        }
    }
};
</script>
<style lang="less" scoped>
.com-image-cropper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    z-index: 99999;
    footer {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        button {
            margin: 0 10px;
        }
    }
    > div {
        width: 100%;
        height: 100%;
    }
}
</style>
<style lang="less">
.cropper-view-box {
    border: 1px solid rgba(2, 200, 174, 0.54);
    outline: 1px solid @color !important;
    outline-color: rgba(2, 200, 174, 0.75) !important;
}
.cropper-point {
    background-color: @color !important;
}
</style>