<template>
    <div>
        <div v-if="logo" :style='`position: relative;width:${width1};height:${height1};`'><!--logo图-->
            <img :src="imageFile" alt=""  width="100%" height="100%" style="object-fit: contain;">
            <input type="file" accept="image/*" @change="change" :title="titile" :disabled="disabled" v-if="showFlag"></input>
        </div>
        <div v-else-if="(!this.limit)||(this.limit==1)" :style='`position: relative;width:${width1};height:${height1};`'><!--单图-->
            <img :src="imageFile" alt="" width="100%" height="100%">
            <input type="file" accept="image/*" @change="change" :title="titile" :disabled="disabled" v-if="showFlag"></input>
        </div>
        <div v-else :style='`position: relative;width:${width1};height:${height1};`'><!--多图-->
            <el-carousel v-if="showFlag" :height="height1"><!--编辑模板-->
                <el-carousel-item v-for="item in imageFile" :key="item"  :style='`width:${width1};height:${height1};`'>
                    <!-- <h3>{{ item }}</h3> -->
                    <img :src="item"  :width="width1" :height="height1">
                </el-carousel-item>
            </el-carousel>

            <mt-swipe :auto="4000" class="swiper-img data-img3 data-img"   width="100%" height="100%" v-else><!--预览模板-->
                <mt-swipe-item v-for="(item,index) in imageFile" :key="index">
                    <img :src="item"  :style='`width:${width1};height:${height1};`'/>
                </mt-swipe-item>
            </mt-swipe>
            <input type="file" class="mutiUpLoad"  multiple="multiple" accept="image/*" :title="titile" @change="change" :disabled="disabled" v-if="showFlag"></input>
        </div>
    </div>
</template>

<script>
    import util from "../../utils/util";
    import { loginService } from "@/services";
    import { Toast } from "mint-ui";
    export default {
        name: "img_input",
        props:[
            'name',//需绑定的图片
            'disabled',//是否可上传：true：是；false：否
            'limit',//图片张数，不传默认做单张处理
            'titile',//文字提示
            'width',//图片宽
            'height',//图片高
            'logo'//设true时做logo处理
        ],
        data(){
            return{
                width1:'',
                height1:''
            }
        },
        computed:{
            showFlag(){//判断编辑还是预览
                return this.$router.currentRoute.name=="updateTemp"?true:false
            },
            imageFile(){
                return this.$parent.obj[this.name];
            }
        },
        mounted:function(){
            this.width1=!this.width?'auto':this.showFlag?this.width.replace('px','')+'px':this.width.replace('px','')/100+'rem'
            this.height1=!this.height?'auto':this.showFlag?this.height.replace('px','')+'px':this.height.replace('px','')/100+'rem'
        },
        methods:{
            change:function (e) {
                if((!this.limit)||(this.limit==1)){//limit没传或者传1做单张上传
                    this.doUpload(e)
                }else{
                    this.doUpload1(e)
                }
            },
            // 单张上传图片
            async doUpload(evt){
                var self=this;
                console.log(self.$parent,111111);
                let files=evt.target.files;
                // if(files.length===0){
                //     Toast('请选择需要上传的图片');
                //     return
                // }
                let file = files[0];
                if(!file){
                    return false;
                }
                if(file.size > 0 && file.size > 5242880){
                    Toast('请小于5M的图片');
                    return
                }
                self.$parent.uploading=true;
                let form = new FormData();
                form.append('type','qiniu_upload');
                form.append('folder','template');
                form.append('uploadFile',file)
                form.append('fileName',file.name)
                let result=await loginService.uploadFile(form);
                console.log(result,'gggggg')
                if(result.data.success){
                    self.$parent.uploading=false;
                    // console.log(result);
                    self.$parent.obj[self.name]=result.data.single.filepath;
                    // console.log(this.Imgurl)
                    Toast('图片上传成功')
                }else{
                    Toast('图片上传失败');
                }
            },
            // 多张上传图片
            async doUpload1(evt){
                var self=this;
                let files=evt.target.files;
                if(files.length>(this.limit?this.limit:6)){
                    Toast('上传最多不能超过'+(this.limit?this.limit:6)+'张图片哦');
                    return
                }
                if(files.length==0){
                    return false;
                }
                // var imageFile = new Array();
                self.$parent.uploading=true;
                self.$parent.obj[self.name]=[];
                for(var i = 0; i<files.length; i++){
                    if(files[i].size > 0 && files[i].size > 5242880){
                        Toast('第'+(i+1)+'张图片请选择小于5M的图片');
                        return
                    }
                    // console.log(files[i].name);
                    let form = new FormData();
                    form.append('type','qiniu_upload');
                    form.append('folder','template');
                    form.append('uploadFile',files[i]);
                    form.append('fileName', files[i].name);
                    let result=await loginService.uploadFile(form);
                    if(result.data.success){
                        self.$parent.uploading=false;
                        self.$parent.obj[self.name].push(result.data.single.filepath);
                        // console.log(this.obj.imageFile);
                    }else{
                        Toast('图片上传失败');
                    }
                }
            },
        }
    }
</script>

<style scoped>
    input{
        opacity: 0;
        cursor: pointer;
        z-index: 9;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .mutiUpLoad{
        opacity: 0;
        cursor: pointer;
        z-index: 9;
        position: absolute;
        width: 80%;
        height: 94%;
        top: 0;
        left: 10%;
        right: 0;
        bottom: 10%;
    }

    img {
        border: 0;
        /* vertical-align: bottom; */
    }
</style>
