<template>
    <div style="margin-top:10px">
        <div class="coverText">1.裁剪图片，图片大小需在2M以内.</div>
        <div class="coverText">2.鼠标滚轮可以伸缩图片展示区大小.</div>
        <div class="coverText" style="margin-bottom:5px;">{{information}}</div>
        <div class="contianer">
            <vueCropper ref="cropper" :img="option.img" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight" :canScale="option.canScale" :outputSize="option.size"
                :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
                :fixedBox="option.fixedBox" :original="option.original" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
                @realTime="realTime">
            </vueCropper>
        </div>
        <div class="buttonBox"></div>
        <span class="input-file">请选择
            <input class="choiceImg" type="file" name="file" @change="changeEt" value="1" />
        </span>
        <!-- <div class="finish" @click="finish('blob')">保存图片</div> -->
        <el-button class="finish" :loading="submitButton" type="primary" @click="finish('blob')">保存图片</el-button>
        <span class="msg">{{msg}}</span>
    </div>
</template>

<script>
    import AjaxUtil from "../../../core/tool/ajaxService";
    import vueCropper from 'vue-cropper'
    export default {
        components: {
            vueCropper
        },
        props: ["fname", "url", "completedCallback", "vtype", "option"],
        name: "FileUpload",
        // props: {
        //     viewImg: {
        //         url: {
        //             type: String,
        //             default: ''
        //         },
        //         scale: {
        //             type: Number,
        //             default: 1 / 1
        //         },
        //         label: {
        //             type: String,
        //             default: ''
        //         }
        //     }
        // },
        data() {
            return {
                submitButton:false,
                msg:"",
                information:'',
                imgUrl: '',
                // option: {
                //     img: '',
                //     size: 1,
                //     full: false,
                //     outputType: 'png',
                //     canMove: true,
                //     fixedBox: false,
                //     original: false,
                //     canMoveBox: false,
                //     canScale: false,
                //     autoCrop: true,
                //     autoCropWidth: 200,
                //     autoCropHeight: 200,
                //     // // 开启宽度和高度比例
                //     fixed: true,
                //     fixedNumber: [1, 1]
                // },
                crap: false,
                previews: {},
                files: ''
            }
        },
        methods: {
            changeEt: function (e) {
                var file = e.target.files[0]
                if (!file) return;
                if (/^image\/\w+$/.test(file.type)) {
                    let uploadedImageURL = URL.createObjectURL(file);
                    this.files = file
                    this.option.img = uploadedImageURL;
                }
            },
            // 实时预览函数
            realTime(data) {
                this.previews = data
                console.log( JSON.stringify(this.option))
                if(this.option.propertion=='4/3'){
                    this.information = '3.宽高比约4：3效果最佳（例：宽800px，高600px）'
                }else if(this.option.propertion=='1/1'){
                    this.information = '3.宽高比约1：1效果最佳（例：宽400px，高400px）'
                }else if(this.option.propertion=='8/3'){
                    this.information = '3.宽高比约8：3效果最佳（例：宽800px，高300px）'
                }
            },
            changeImg() {
                this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
            },
            startCrop() {
                // start
                this.crap = true
                this.$refs.cropper.startCrop()
            },
            stopCrop() {
                //  stop
                this.crap = false
                this.$refs.cropper.stopCrop()
            },
            clearCrop() {
                // clear
                this.$refs.cropper.clearCrop()
            },
            finish(type) {
                this.$refs.cropper.getCropBlob((data) => {
                    let blob = data
                    let formData = new FormData()
                    formData.append('file', blob, this.files.name)
                    this.msg = '',
                    this.submitButton = true;
                    this.uploadFetch(this.url, formData).then((result) => {
                        this.submitButton = false;
                        this.$message.success('保存成功');
                        this.showLoading = false;
                        this.completedCallback({
                            success: true,
                            data: result
                        });
                    }).catch((err) => {
                        this.submitButton = false;
                        this.msg = "上传失败，图片超2M或上传超时";
                        this.completedCallback({
                            success: false,
                            data: err
                        });
                    });
                })
            }
        },
        mounted() {

        }

    }
</script>
<style scoped>
    .msg{
        margin-top: 38px;
        display: block;
        color: red;
        font-size: 12px;
    }
    img{
        max-width: 100%;
    }
    .buttonBox{
        overflow: hidden;
    }
    .contianer {
        width: 375px;
        height: 200px;
        position: relative;
        border-radius: 4px;
    }

    .show-preview {
        position: absolute;
        left: 405px;
        bottom: 0px;
        background-color: white;
        border-radius: 4px;
        color: #2c7;
    }

    .show-text {
        position: absolute;
        left: 0;
        top: -30px;
        font-size: 14px;
        color: #333;
        width: 200px;
    }

    .imgFile {
        cursor: pointer;
    }

    .input-file {
        float: left;
        position: relative;
        overflow: hidden;
        text-align: center;
        border: 1px #999 solid;
        background-color: #fff;
        border-radius: 4px;
        padding: 7px 10px;
        font-size: 12px;
        font-weight: normal;
        line-height: 24px;
        color: #fff;
        text-decoration: none;
        display: block;
        width: 120px;
        color: #666;
        margin: 20px 20px 0 0;
    }

    .input-file input[type="file"] {
        cursor: pointer;
        position: absolute;
        height: 38px;
        display: block;
        top: 0;
        right: 0;
        font-size: 14px;
        background-color: #f00;
        /*transform: translate(-300px, 0px) scale(4);*/
        /* height: 100%;
    width: 100%; */
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .finish {
        float: left;
        margin-top: 20px;
        margin-right: 20px;
        width: 120px;
        height: 40px;
        font-size: 12px;
        background-color: #2c7;
        text-align: center;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        border: 1px #2c7 solid;
    }

    .coverText {
        font-size: 12px !important;
        color: #999 !important;
        font-weight: lighter;
        height: 20px;
        line-height: 20px;
    }
</style>
<style>
.crop-info[data-v-7b077dd1]{
    display: none;
}
</style>


<!-- Add "scoped" attribute to limit CSS to this component only -->