<template>
  <div>
    <div class="uploaddiv">
      <div v-if="acceptType =='.jpg, .jpeg, .png'" class="filelistdiv">
        <div v-for="(item, index) in fileList" :key="index" class="file-list">
          <img :src="item.url" />
          <div class="mask">
            <i class="el-icon-zoom-in" @click="view(index)"></i>
            <i class="el-icon-delete" v-if="!disabled" @click="del(index)"></i>
          </div>
        </div>
        <el-upload v-if="fileList.length<limitNum&&(!disabled)" class="avatar-uploader" list-type="picture-card" :action="action" :on-remove="handleRemove"
          :accept="acceptType" :headers="myHeaders" :multiple="limitNum == 1?false:true" :limit='limitNum'
          :on-exceed="handleExceed" :on-change='handleChangeUpload' :on-success="handleSuccess" :before-upload="beforeUpload"
          :on-preview="handlePictureCardPreview" :file-list="fileList"
          :show-file-list="false" :disabled="disabled" :auto-upload="autoUpload">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </div>

    </div>
    <span class="tip" v-if="warning">{{warning}}</span>
    <el-dialog title="查看" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <img :src="dialogImageUrl" style="width:100%;" />
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  export default {
    name: "index",
    components: {},
    props: {
      warning: {
        type: String,
        default: ''
      },
      file: {
        type: Array,
        default: () => []
      },
      disabled: {
        type: Boolean,
        default: false
      },
      acceptType: {
        type: String,
        default: ''
      },
      limitNum: {
        type: Number,
        default: 3
      },
      uploadUrl: {
        type: String,
        default: '/file/img/upload'
      },
      autoUpload: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        fileList: [],
        dialogVisible: false,
        imgUrl: '',
        baseUrl: '',
        dialogImageUrl: ''
      };
    },
    computed: {
      action() {
        return global_config.BASE_URL + this.uploadUrl;
      },
      myHeaders() {
        return {
          Authorization: 'Bearer ' + store.getters.getToken,
          'X-Token': store.getters.getToken
        };
      }
    },
    created() {
      this.fileList = this.file;
    },
    methods: {
      // 手动上传
      handleChangeUpload(fileData) {
        if (!this.autoUpload) {
          let event = event || window.event;
          let file = event.target.files[0];
          let reader = new FileReader();
          let that = this;
          reader.onload = function (e) {
            that.baseUrl = e.target.result;
            that.$emit('changeUpload', fileData, that.baseUrl);
          }
          reader.readAsDataURL(file);
        }
      },
      // 上传成功
      handleSuccess(response, file, fileList) {
        this.fileList.push({
          name: response.fileName,
          url: response.message
        });
      },
      // 删除
      handleRemove(file, fileList) {
        this.fileList = fileList;
      },
      beforeUpload(file){
        let isAllow;
        console.log(file.size / 1024 / 1024);
        if(!(file.type == 'image/jpeg' || file.type == 'image/png') && this.acceptType =='.jpg, .jpeg, .png') {
          this.$message.closeAll();
          this.$message.error('只能上传jpg/png文件!');
          isAllow = false;
        }
        if ((file.size / 1024 / 1024) > 2) {
          this.$message.closeAll();
          this.$message.warning('上传的文件大小不能超过2M！');
          isAllow = false;
        }
        return isAllow;
      },
      // 上传超过限制
      handleExceed(files, fileList) {
        if (fileList.length >= this.limitNum) {
          this.$message.closeAll();
          this.$message.warning(`当前限制选择${this.limitNum}个文件`);
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      view(index) {
        this.dialogVisible = true;
        this.dialogImageUrl = this.fileList[index].url;
      },
      del(index) {
        this.fileList.splice(index, 1);
      }
    }
  };
</script>
<style lang="less" scoped>
  .uploaddiv{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .filelistdiv{
      display: flex;
      flex-wrap: wrap;
      .avatar-uploader{
        margin-top: 5px;
      }
    }
  }
  .file-list {
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    width: 150px;
    height: 150px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

    &:hover {
      .mask {
        opacity: 1;
      }
    }
    .mask {
      opacity: 0;
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 6px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      i {
        cursor: pointer;
        margin: 0 10px;
      }
    }
    img {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      max-width: 150px;
      max-height: 150px;
      display: block;
    }
  }

  // .avatar-uploader{
  //   line-height: initial;
  //   width: 150px;
  // }
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .tip {
    color: #f56c6c;
    font-size: 14px;
  }
</style>