<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-12-06 13:44:22
 * @LastEditors: 无尘
 * @LastEditTime: 2020-06-12 15:35:03
 -->
<!--
  单个上传组件
   <single-upload
    :imgSrc.sync=""
    :field="''">
  </single-upload>
 -->
<template>
  <div>
    <p class="upload-tip color-909399 font-12">
      {{ limit > 1 ? `图片支持png、jpg、jpeg格式，大小不超过2M，一次性最多上传${limit}张` : '' }}
    </p>
    <div class="single-upload-wrap">
      <div class="imageList">
        <el-upload class="avatar-uploader" v-show="!disabled" :multiple="limit > 1 ? true : false" :file-list="imgList" :show-file-list="false" :http-request="handleRequest" :before-upload="beforeUpload">
          <div v-if="!videoSrc" class="flex-column">
            <i class="el-icon-plus vatar-uploader-icon"></i>
            <p class="font-12 color-606266" style="line-height: 22px;">上传图片</p>
          </div>
        </el-upload>
        <p class="upload-tip color-909399 font-12 pos-bottom">
          {{ limit > 1 ? `` : '图片为jpg、png格式，且不超过2M，最多上传1张图片' }}
        </p>
        <div v-for="item in imgList" :key="item" class="imageBox">
          <img :src="item.url" class="image" />
          <div class="imageMask">
            <span @click="handleRemove(item.url)" class="el-upload-list__item-delete">
              <i class="el-icon-error"></i>
            </span>
            <!-- <span @click="handlePreview(item.url)" class="el-upload-list__item-preview is-preview">
              <i class="el-icon-zoom-in"></i>
            </span> -->
          </div>
        </div>
      </div>
      <!-- 图片预览 -->
      <vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
    </div>
  </div>
</template>
<script>
import errMsg from '@/common/js/error';
import { postForm } from '@/api/api';
export default {
  name: 'mult-upload',
  props: {
    imgList: {
      // 传入 input value
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      imgShowFlag: false // 是否弹框显示,true: 显示；false: 不显示
    };
  },
  computed: {
    disabled() {
      return this.imgList.length >= this.limit;
    }
  },
  methods: {
    handleRequest(data) {
      const { file } = data;
      let files = new FormData();
      files.append('file', file);
      postForm('/haoban-manage3-web/upload-file?fileType=jpg', files).then(res => {
        const { data } = res;
        if (data.errorCode == 1) {
          this.imgList.length < this.limit ? this.imgList.push({ uid: data.result.key, url: data.result.url, mediaName: data.result.mediaName }) : this.$message.error(`一次性上传仅支持${this.limit}张图片`);
          this.$emit('update:imgList', this.imgList);
        } else {
          errMsg.errorMsg(data);
        }
      });
    },
    /* eslint-disable */
    beforeUpload(file) {
      const that = this;
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        that.$message.error('上传图片支持png、jpg、jpeg格式!');
      }
      if (!isLt2M) {
        that.$message.error(`上传图片大小不能超过2MB!`);
      }
      return (
        isJPG && isLt2M
      );
    },

    /**
     * 上传图片预览
     */
    handlePreview(url) {
      this.imgShowFlag = true;
      this.imgUrl = url;
    },
    handleRemove(item){
      let imgList = this.imgList.filter(i=>i.url!=item);
      this.$emit('update:imgList',imgList);
    },
    hideImage(val) {
      this.imgShowFlag = val;
      this.imgUrl = '';
    }
  }
  // mounted() {}
};
</script>
<style lang="scss" scoped>
.single-upload-wrap{
  overflow-y: scroll;
  max-height: 400px;
  margin-top: 10px;
}
.w-500 {
  width: 500px;
}
.avatar-uploader {
  >>> .el-upload {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px dashed #c4c6cf;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 5px;
  }
}
 
.upload-tip {
  margin-top: 12px;
  font-size: 12px;
  line-height: 12px;
}
 
.flex-column{
  display: flex;
  flex-direction: column;
}
.imageList{
  display: flex;
  flex-wrap: wrap;
}
.imageBox{
  position: relative;
  width: 102px;
  height: 102px;
  margin: 5px 0 0 5px;
  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .imageMask{
      opacity:0;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      &:hover{
           opacity:1;
      }
      span {
        display: inline-block;
        cursor: pointer;
      }
      .el-upload-list__item-delete {
        z-index: 1;
        line-height: 1;
        top: 0px;
        right: 0px;
        transform: translate(40%, -40%);
        position: absolute;
        font-size: inherit;
        color: inherit;
        .el-icon-error {
          color: rgba(0, 0, 0, 0.4);
          font-size: 16px;
          &:hover {
            color: rgba(0, 0, 0, 0.8);
          }
        }
      }

      .el-upload-list__item-preview {
        z-index: 2;
        position: absolute;
        line-height: 1px;
        border-radius: 100%;
        right:-3px;
        bottom:-3px;
        height: 25px;
        width: 25px;
        background-color: rgba(0, 0, 0, 0.4);
        .el-icon-zoom-in {
          font-size: 14px;
          margin-top: 50%;
          margin-left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
        &:hover {
          background-color: rgba(0, 0, 0, 0.8);
          transform: scale(1.3);
          right: -2px;
          bottom: -2px;
        }
      }
  }
}
.imageBox:nth-child(4n+1){
  margin:5px 0 0 0;
}
.pos-bottom{
      position: absolute;
    bottom: 0;
    left: 120px;
    line-height: 22px;
}
</style>
