<template>
    <div class="update_main">
        <van-button @click="editCropper" type="info" size="small">上传签字图片</van-button>
        <van-popup v-model="open" position="bottom" :style="{ height: '60%' }">
            <div class="screenshots_main">
                <vue-cropper
                    ref="cropper"
                    :img="options.img"
                    :info="true"
                    :autoCrop="options.autoCrop"
                    :autoCropWidth="options.autoCropWidth"
                    :autoCropHeight="options.autoCropHeight"
                    :fixedBox="options.fixedBox"
                    @realTime="realTime"
                    v-if="visible"
                />
            </div>
            <div class="avatar-upload-main">
                <div class="avatar-upload-preview">
                    <img :src="previews.url" :style="previews.img" />
                </div>
            </div>
            <div class="steup_main">
                <van-uploader :after-read="afterRead">
                    <van-button icon="plus" type="primary" size="small">上传文件</van-button>
                </van-uploader>
                <van-button @click="changeScale(1)" icon="plus" size="small"></van-button>
                <van-button @click="changeScale(-1)" icon="minus" size="small"></van-button>
                <van-button @click="rotateLeft()" icon="replay" size="small" class="xzmt"></van-button>
                <van-button @click="rotateRight()" icon="replay" size="small"></van-button>
                <van-button @click="uploadImg" type="info" size="small">提交</van-button>
            </div>

        </van-popup>

    </div>
</template>

<script>

import { electronicSignature  } from "@/api/lawEnforcement/index";
import { VueCropper } from "vue-cropper";
export default {
    components: { VueCropper },
    data() {
        return {
            // 是否显示弹出层
            open: false,
            // 是否显示cropper
            visible: false,
            // 弹出层标题
            title: "上传PNG签名图片",
            options: {
                img: '', //裁剪图片的地址
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 244, // 默认生成截图框宽度
                autoCropHeight: 110, // 默认生成截图框高度
                fixedBox: true // 固定截图框大小 不允许改变
            },
            previews: {}
        }
    },
    created(){

    },
    methods:{
        // 编辑头像
        editCropper() {
            this.open = true;
            this.visible = true;
        },
        // 实时预览
        realTime(data) {
            this.previews = data;
        },
        afterRead(file){
            this.options.img = file.content;
        },
          // 图片缩放
        changeScale(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
         // 向左旋转
        rotateLeft() {
            this.$refs.cropper.rotateLeft();
        },
        // 向右旋转
        rotateRight() {
            this.$refs.cropper.rotateRight();
        },
        // 上传图片
        uploadImg() {
            this.$refs.cropper.getCropBlob(data => {
                let formData = new FormData();
                formData.append("electronicSignaturefile", data);

                electronicSignature(formData).then(response => {
                    this.open = false;
                    this.options.img = this.$store.getters.baseRoutingUrl + response.esUrl;

                    this.$emit('signaImg', this.options.img)
                    // this.msgSuccess("修改成功");
                    this.$toast.success('成功文案');
                    this.visible = false;
                });
            });
        },
    }

}
</script>

<style scoped lang="scss">
.img-circle {
	border-radius: 50%;
}

.img-lg {
	width: 120px;
	height: 120px;
}

.avatar-upload-main{
    position: relative;
    width: 100%;
    height: 160px;
}
.avatar-upload-preview {
	position: absolute;
	top: 50%;
	transform: translate(50%, -50%);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	box-shadow: 0 0 4px #ccc;
	overflow: hidden;
}

.update_main{
    margin-right: 15px;
}
.screenshots_main{
    height: 350px;
    padding:20px 20px 0;
}
.avatar-upload-preview{
    width: 244px;
    height: 110px;
    border-radius: 0;
    left: 50%;
    margin-left: -244px; 
}
.steup_main{
    margin:0 20px;
    text-align: center;
    .xzmt{
        transform: rotate(180deg);
    }
}
</style>