<template>
    <div class="ui-update fx-r">

      <div class="avatar-img fx-h fx-ac fx-bc" @mouseover="tapMouseOver(index)" @mouseleave="tapMouseOut(index)" v-for="(item,index) in imgAr">
        <div class="pclose fx-h fx-ac fx-bc" v-if="showTip['check_' + index]" style="cursor: pointer"> <Icon type="ios-close-circle-outline" @click="tapClose(index)" /></div>
        <!--左移-->
        <div class="pleft fx-h fx-ac fx-bc" v-if="showTip['check_' + index]" style="cursor: pointer"><Icon @click="tapLeft(index)" color="#333" type="ios-arrow-dropleft" /></div>
        <!--右移-->
        <div class="pright fx-h fx-ac fx-bc" v-if="showTip['check_' + index]" style="cursor: pointer"><Icon @click="tapRight(index)" type="ios-arrow-dropright" /></div>
        <img v-image-preview :src="item" v-lazy="item"/>
      </div>


      <el-upload
        class="avatar-uploader fx-r fx-ac fx-h"
        :action="upUrl"
        :data="updata"
        :show-file-list="false"
        :headers="headers"
        :multiple="true"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarError"
        :limit="limit"
        :before-upload="beforeAvatarUpload">
        <div>
          <i style="font-size: 24px" :class="fileIcon"></i>
        </div>
      </el-upload>
    </div>
</template>


<script>
    export default {
        name: "ui-upload-much",
        computed: {},
        props:{
            //上传地址
            upUrl:{
                default:'',
                type:String
            },
            //头部数据
            headers:{
                default: ()=> { return {};},
                type:Object
            },
            //一次洗上传最多张数
            limit:{
                type:Number,
                default:10
            },
            //允许上传最多的图片
            maxLimit:{
              type:Number,
              default:100
            },
            //上传post参数
            updata:{
                default: ()=> { return {};},
                type:Object
            },
            //图片数据格式
            imgAr:{
                default:()=>{return []},
                type:Array
            },
            //上传文字提示
            fileIcon:{
                default:'el-icon-camera',
                type:String
            },

            type:{
                default:'img',
                type:String
            }
        },
        data() {
            return {
              showTip : {}
            }
        },

        created() {
        },
        mounted(){

        },
        methods: {
            beforeAvatarUpload(file) {
                const array = ['image/jpeg','image/png','image/gif'];
                const isLt2M = file.size / 1024 / 1024 < 2;
                var isImg = true;
                if (array.indexOf(file.type) == -1) {
                    this.$message.error('上传头像图片只能支持JPG,PNG,GI格式!');
                    isImg = false;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.$utils.loading(this,"上传中..");
                return isImg && isLt2M;
            },
            /**
             * 上传成功以后
             */
            handleAvatarSuccess(res, file) {
                this.$utils.loadingClose();
                this.$emit("onUpload",res);
            },

            handleAvatarError:function (err, file, fileList) {
                this.$utils.loadingClose();
                //  this.$message.error(err);
                console.log(err);
            },

            tapClose:function (index) {
                this.$emit("onRemove",index);
            },

          tapMouseOver:function(index){
              this.$set(this.showTip,'check_' + index,true);
          },

          tapMouseOut:function(index){
            this.$set(this.showTip,'check_' + index,false);
          },
          /**
           * 左右移动
           */
          tapLeft:function (index) {
            this.$emit("onLeft",index);
          },
          /**
           * 左右移动
           */
          tapRight:function (index) {
            this.$emit("onRight",index);
          }

        }
    }
</script>
<style scoped>
  .avatar-uploader{
    border: 1px dashed #d9d9d9;
    width: 82px;
    height: 82px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-img{border: 1px dashed #d9d9d9; overflow: hidden;width: 82px;height: 82px;border-radius: 6px;margin-right: 10px;position: relative;}
  .avatar-img .pclose{position: absolute;top: 0px;right: 0px; background: #fff;border-radius: 50%;
    width: 15px;height: 15px;}
  .avatar-img img{width: 100%;}
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .update-img{ height: 80px; width: 80px; overflow:hidden;}
  .avatar {width: 80px;display: block;}
  .pleft{ position: absolute;left: 0px;background: #fff;border-radius: 50%;width: 14px;height: 14px;}
  .pright{ position: absolute;right: 0;background: #fff;border-radius: 50%;width: 14px;height: 14px;}
</style>
