<template>
  <div class="imgBox">
    <!-- <div class="imgList"> -->
    <div v-for="(item, index) in imgList" :key="index" class="imgItem">
      <div class="itemImg" @click="previewImg(item)">
        <img :src="item" alt="" />
      </div>
      <div class="deleteImg" @click="deleteItem(item)">
        <img src="../../../assets/images/eva/closecha.png" alt="" />
      </div>
    </div>
    <!-- </div> -->

    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox"><img :src="require('../../../assets/images/loading.gif')" />上传中，请稍后</div>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
      </div>
    </div>
    <div @click="addImg($event)" class="imgItem">
      <img src="@/assets/images/eva/camera.png" alt="" />
      <input type="file" accept="image/*" multiple style="display: none" @change="beforeUpload($event)" />
    </div>
    <pop v-show="repShowMask">
      <template v-slot:tit>提示</template>
      <template v-slot:con>确定删除吗</template>
      <template v-slot:btn1>
        <div class="btn" style="color: rgba(136,136,136,1);" @click="repShowMask = false">取消</div>
      </template>
      <template v-slot:btn2>
        <div class="btn" style="color: rgba(251,67,25,1);" @click="repAddRecord">确认</div>
      </template>
    </pop>
  </div>
</template>

<script>
import pop from './pop.vue'

export default {
  components: { pop },
  props: {
    imgList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // imgList: []
      proVisible: false,
      progress: 0,
      repShowMask: false,
      delImg: ''
    }
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url)
    },
    addImg(e) {
      var el = e.currentTarget
      el.getElementsByTagName('input')[0].click()
      e.target.value = ''
    },
    deleteItem(i) {
      this.repShowMask = true
      this.delImg = i
    },
    repAddRecord() {
      this.repShowMask = false
      const a = JSON.parse(JSON.stringify(this.imgList))
      a.splice(a.indexOf(this.delImg), 1)
      // this.imgList.splice(this.imgList.indexOf(i), 1)
      this.$emit('update:imgList', a)
      this.$forceUpdate()
    },
    beforeUpload(event) {
      var file = ''
      for (let cfindex = 0; cfindex < event.target.files.length; cfindex++) {
        console.log('event.target.files', event.target.files)
        file = event.target.files[cfindex]
        console.log('file', file)
        var credentials = {
          accessKeyId: 'AKIATLPEDU37QV5CHLMH',
          secretAccessKey: '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'
        } // 秘钥形式的登录上传
        window.AWS.config.update(credentials)
        window.AWS.config.region = 'cn-northwest-1' // 设置区域
        var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) // 选择桶
        var _this = this
        _this.progress = 0
        _this.proVisible = true
        if (file) {
          var params = {
            Key:
              file.name.split('.')[0] +
              new Date().getTime() +
              '.' +
              file.name.split('.')[file.name.split('.').length - 1],
            ContentType: file.type,
            Body: file,
            'Access-Control-Allow-Credentials': '*',
            ACL: 'public-read'
          } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
          var options = {
            partSize: 2048 * 1024 * 1024,
            queueSize: 2,
            leavePartsOnError: true
          }
          bucket
            .upload(params, options)
            .on('httpUploadProgress', function(evt) {
              // 这里可以写进度条
              _this.progress = parseInt((evt.loaded * 80) / evt.total)
            })
            .send(function(err, data) {
              _this.progress = 100
              _this.mediaLoading = false
              if (cfindex == event.target.files.length - 1) {
                console.log('不停？', cfindex, event.target.files.length)
                setTimeout(() => {
                  _this.proVisible = false
                }, 1000)
              }

              if (err) {
                // _this.$message.error('上传失败')
              } else {
                _this.$toast({
                  message: '上传成功',
                  type: 'success'
                })
                // console.log(_this.imgList)
                const a = JSON.parse(JSON.stringify(_this.imgList))
                a.push(data.Location)
                // console.log('aaaaaaaaaaaaaaaaa', a)
                _this.$emit('update:imgList', a)

                // _this.getImage(_this.imgList)
              }
            })
        }
      }
    },
    getImage(imageList) {
      // console.log('e', imageList)

      this.$emit('getImage', imageList)
    }
  }
}
</script>

<style lang="scss" scoped>
.imgBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .imgItem:nth-child(4n) {
    margin-right: 0;
  }
  .imgItem {
    position: relative;
    width: 22%;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin: 2%;
    margin-right: 3%;
    margin-top: 4px;

    border: 1px solid rgba(217, 217, 217, 1);

    .itemImg {
      height: 100%;
      overflow: hidden;
      // height: 66px;
      // z-index: 1;
      > img {
        // width: 100%;
        height: 100%;
        border-radius: 5px;
        // object-fit: cover;
      }
    }
    .deleteImg {
      width: 17px;
      height: 17px;
      position: absolute;
      right: 0px;
      top: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      // box-sizing: border-box;
      padding: 1px;
      border-end-start-radius: 4px;
      background-color: rgba(0, 0, 0, 0.4);
      // z-index: 9;
      > img {
        width: 95%;
        height: 95%;
      }
    }
  }
  // }

  .mask {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .progressBox {
    width: 85%;
    max-width: 300px;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 6px 1px #bfbfbf;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .progressBox .lbox {
    height: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .progressBox .lbox img {
    width: 25x;
    margin-right: 10px;
  }

  /deep/ .progressBox {
    .el-progress-bar__outer {
      background-color: #d1dfff !important;
      height: 20px !important;
    }
  }
}
</style>
