// 裁剪插件
<template>
    <div class="cropper-wrapper" v-if="show">
        <div class="btn">
            <div class="cancel" :class="{active:cancelActive}" @click="cancel">取消</div>
            <div class="confirm" :class="{active:confirmActive}" @click="confirm">确定</div>
        </div>
        <vueCropper
            ref="cropper"
            :img="img"
            :outputType="fileOption.outputType"
            autoCrop
            fixedBox
            :canMoveBox="false"
            class="cropper"
            :autoCropWidth="fileOption.size"
            :autoCropHeight="fileOption.size"
            :info="false"
            :enlarge="0.5"
        ></vueCropper>
    </div>
</template>
<script>
    export default {
        name: "Cropper",
        props: {
            // 是否显示
            show: {
                type: Boolean,
                default: true
            },
            // 图片预览地址
            imgUrl: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                confirmActive: false,
                cancelActive: false,
                fileOption: {
                    outputType: "png",
                    size: 256 // 图片截图框大小  256px   生成截图比例为0.5
                }
            };
        },
        computed: {
            img() {
                return this.imgUrl;
            }
        },
        methods: {
            // 取消事件
            cancel() {
                this.cancelActive = true;
                // 取消事件
                setTimeout(() => {
                    this.$emit("cancel");
                }, 500);

                // 其他
                setTimeout(() => {
                    this.cancelActive = false;
                }, 1100);
            },
            // 确认事件 截图
            confirm() {
                this.confirmActive = true;
                setTimeout(() => {
                    this.$refs.cropper.getCropData(file => {
                        // console.log(file); // 预览图片base64
                        let data = new FormData();
                        let imgFile = this.dataURLtoFile(file, "123.png");
                        data.append("file", imgFile);
                        // 上传
                        this.upload(data, imgFile);
                        // 传递图片文件预览  content：base64
                    });
                }, 500);

                // 其他
                setTimeout(() => {
                    this.confirmActive = false;
                }, 1100);
            },
            //   base64转为 file对象
            dataURLtoFile(dataurl, filename) {
                //将base64转换为文件
                var arr = dataurl.split(","),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, { type: mime });
            },
            //   上传   datafile=>上传文件   file =>图片file对象
            upload(dataFile, file) {
                // 记载中
                this.$toast.loading({
                    duration: 0, //持续展示
                    forbidClick: true, //禁用背景点击
                    message: "上传中...",
                    mask: true //背景遮罩
                });

                this.$http.UploadFile(dataFile).then(
                    ({ data }) => {
                        this.$toast.clear();
                        if (data.IsSuccess) {
                            // 成功
                            // 返回的图片地址 发送图片地址
                            let imgUrl = data.ResultObject[0].AccessoryUrl;
                            this.$emit("confirm", { content: imgUrl, file: file });
                        } else {
                            // 失败
                            this.$toast(data.ResultMsg);
                        }
                    },
                    () => {
                        this.$toast.clear();
                        this.$toast.fail("上传失败");
                    }
                );
            }
        }
    };
</script>
<style lang='less' scoped>
    .cropper-wrapper {
        position: Fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .btn {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            z-index: 99;
            .cancel,
            .confirm {
                position: relative;
                flex: 1;
                height: 100%;
                color: red;
                line-height: 1rem;
                font-size: 0.4rem;
                overflow: hidden;
                &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -0.5rem;
                    margin-top: -0.5rem;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    transition: all 1s linear;
                    background-color: rgba(224, 224, 224, 0.3);
                    transform: scale(0);
                }
                &.active::before {
                    transform: scale(10);
                }
            }

            .confirm {
                color: #00a4ff;
            }
        }
    }
</style>