<template>
<div class="input-image" :class="data.prepend||data.prependIcon?'el-input--prefix':data.appendIcon||data.append?'el-input--suffix':'' "  >
      <div  class="el-input-group__prepend" v-if='data.prepend'>{{data.prepend}}</div>
        <div  class="el-input-group__prepend" v-else-if="data.prependIcon">
            <el-button :icon="data.prependIcon" />
        </div>
        <el-upload
            class="avatar-uploader"
            action="#"
            v-model='parent.formModel[data.id]'
            :show-file-list="false"
            :disabled='data.disabled||!!parent.readonly'
            :placeholder='data.placeholder' 
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
            <template v-if="imageUrl">
                <img :src="imageUrl" class="avatar" />
                <div class="el-upload-list__item-actions">
                <div class="item-preview" @click="handlePictureCardPreview()" >
                    <i class="el-icon-zoom-in"></i>
                </div>
                <div class="item-delete" @click="handleRemove()">
                    <i class="el-icon-delete"></i>
                </div>
                </div>
            </template>
            <i v-else class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible">
            <img w-full style="width:100%" :src="imageUrl" alt="Preview Image" />
        </el-dialog>
        <div  class="el-input-group__append"  v-if="data.appendIcon">
            <el-button :icon="data.appendIcon" />
        </div>
        <div class="el-input-group__append" v-else-if="data.append">
            {{data.append}}
        </div>
    </div>
</template>

<script>
export default {
    props: ["data","_p"],
    data(){
        const parent = this._p;
        return {
            dialogVisible:false,
            parent,
            imageUrl:parent.formModel[this.data.id],
            baseUrl:this.data.url
        }
    },
    methods:{
        handleRemove(){
            this.imageUrl = undefined;
            this.parent.formModel[this.data.id] = this.imageUrl;
        },
        handlePictureCardPreview(){
            this.dialogVisible = true;
        },
        handleAvatarSuccess(response,uploadFile){
            this.imageUrl = URL.createObjectURL(uploadFile.raw);
        },
        async beforeAvatarUpload(file){
            if (file.size / 1024 / 1024 > 10) {
                this.$message.error('Avatar picture size can not exceed 2MB!')
                return false
            }
            const formdata = new FormData()
            formdata.append('imgFile',  new File([file], file.name.toLowerCase()))
            const {data} = {};
            //await upload(formdata);
            this.imageUrl = process.env.VUE_APP_IMG_URL + data.image;
            this.parent.formModel[this.data.id] = this.imageUrl;
            return true
        }
    }
}
</script>

<style scoped lang="less">
.input-image{
    &.el-input--prefix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    /deep/ .el-input__inner{
        height:40px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
     &.el-input--suffix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    .el-input-group__prepend,.el-input-group__append{
        --el-input-border-color:#dcdfe6;
        min-width:56px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    :deep(.el-cascader){
        .el-input--suffix,.el-input .el-input__inner,.el-input{
            height:100%;
        }
    }
    .avatar-uploader{
        width: 100%;
        height:100%;
        .avatar {
            width:100%;
            height: 150px;
            display: block;
        }
        :deep(.el-upload) {
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            cursor: pointer;
            position: relative;
            // overflow: hidden;
            width:100%;
            transition: var(--el-transition-duration-fast);
            display: flow-root;
            justify-content: center;
            align-items: center;
            &:hover{
                border-color: none;
                .el-upload-list__item-actions{
                    visibility: visible;
                }
            }
            .el-upload-list__item-actions{
                position: absolute;
                z-index: 2;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                top:0;
                left:0;
                bottom:0;
                margin:auto;
                right:0;
                background: rgba(0,0,0,0.8);
                visibility: hidden
            }
        }
        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width:100%;
            height: 150px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    } 
}

</style>