<style scoped>
.modelBody{
    overflow: auto;
    padding: 0 20px;
    height: 320px;
}
.avatar-box{
    width: 260px;
    height: 260px;
    float: left;
    background-color: #eeeeee;
}
.privew-box{
    float: right;
    
}
.large-box{
    width: 252px;
    height: 164px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #f7f7f7;
    background-color: #eeeeee;
}
.small-box{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    margin-top:30px;
}
.large_img{
    width: 252px;
    height: 164px;
}
</style>
<template>
    <bModal v-model="isShow" title="裁切封面图" size="small" @on-cancel="cancel">
        <div class="modelBody">
            <div class="avatar-box" v-if="isUploadImg">
                <vueCropper
                    ref="cropper"
                    :img = "option.img"
                    :outputSize = "option.size"
                    :outputType = "option.outputType"
                    :info = "option.info"
                    :canScale = "option.canScale"
                    :autoCrop = "option.autoCrop"
                    :fixed = "option.fixed"
                    :fixedNumber = "option.fixedNumber"
                    :autoCropWidth = "option.autoCropWidth"
                    :autoCropHeight = "option.autoCropHeight"
                    :fixedBox = "option.fixedBox"
                    @realTime="realTime"
                ></vueCropper>
            </div>
            <div class="avatar-box" v-else>
                <img v-if="!originalImg == ''" :src="originalImg" :style="{'height':'260px','width':'260px'}">
            </div>
            <div class="privew-box" >
                <div>封面图预览</div>
                <div class="large-box show-preview" >
                    <div v-if="isUploadImg">
                        <img class="staff_portrait large_img" :src="option.img" :style="previews.img">
                    </div>
                    <div v-else>
                        <img v-if="!originalImg == ''" class="staff_portrait large_img" :src="originalImg" :style="previews.img">
                    </div>
                </div>
                <div class="small-box ">
                    <Upload
                        ref="upload"
                        :format="['jpg','gif','png']"
                        :show-upload-list = "false"
                        :multiple = "false"
                        :max-size="500"
                        :data="uploaderData"
                        :headers="headers"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleExceededSize"
                        
                        :on-success="handleSuccess"
                    >
                    <!--:action="actionURL"-->
                        <Button size="small" ghost>上传封面图</Button>
                    </Upload>
                </div>
            </div>
        </div>
        <div slot="footer">
            <Button @click="cancel" >取消</Button>
            <Button type="primary" @click="confirm">保存</Button>
        </div>
    </bModal>
</template>
<script>
//import systemConfig from '../../config/config'
import vueCropper from 'vue-cropper'
export default {
    props: {
        news:{
            type:Object,
            required:true,
            default:function(){
                return {

                }
            }
        }   
    },
    data(){
        return {
            isUploadImg:false,
            isShow:false,
            fileName:'',
            //actionURL: SEDU.Util.getServerUrl(systemConfig) + "/basis/attachments/files",
            headers: {
                [SEDU.Util.token_key]: SEDU.Util.getCookie(SEDU.Util.token_key),
                [SEDU.Util.tenant_key]: SEDU.Util.getCookie(SEDU.Util.tenant_key),
            },
            uploaderData:{
                belongId: ''
            },
            option:{
                img:'',
                size:1,
                info:true,
                canScale:true,
                outputType:'png',
                autoCrop:true,
                autoCropWidth:252,
                autoCropHeight:164,
                fixed:true,
                fixedBox:true,
                fixedNumber:[1.53,1],
            },
            originalImg:'',
            previews:{}
        }
    },
    methods:{
        show(news){
            this.belongId = news.id;
            this.isShow = true;
            this.previews = {};
            this.isUploadImg = false;
            if(news.previewUrl){
                this.originalImg = news.previewUrl;
            }
        },
        realTime (data) {
            this.previews = data;
        },
        confirm(){
            this.$refs.cropper.getCropData((data) => {
                var imgData = data.substring(22);
                var data = {
                    belongId : this.news.id,
                    imgData : imgData,
                }
                SEDU.Util.invokeServer({
                    path:'/photo/changeCover',
                    contentType:'application/json',
                    data:JSON.stringify(data),
                    type:'POST'
                }).then((data)=>{
                    this.option.img = '';
                    this.isShow = false;
                    this.$emit('refresh',data);
                });
            });
            
        },
        cancel(){
            this.option.img = '';
            this.isShow = false;
        },
        initUrl: function (fileId) {
            return null;
            //SEDU.Util.getServerUrl(systemConfig) + '/basis/attachments/files/preview/single/' + fileId ;
        },
        handleSuccess(response, file, fileList){
            this.isUploadImg = true;
            this.fileName = response;
            this.option.img = this.initUrl(file.response);
        },
        handleFormatError(file){
            this.$Message.error('图片格式不正确');
        },
        handleExceededSize(file){
            this.$Message.error('图片大小不能超过500K');
        }
    },
    mounted(){
        this.uploaderData.belongId = this.news.id;
    },
    components:{
        'vueCropper': vueCropper.vueCropper
    }
}
</script>