<template>
  <view>
    <u-upload :accept="accept" :fileList="imgList" @afterRead="afterRead" @delete="deletePic" :name="paramsName"
              :multiple="isMultiple" :maxCount="limit" ref="upload">
      <u-button v-if="isBtn" plain type="primary" text="上传" size="mini" icon="arrow-upward" class="btn-icon"
                style="border: 1px solid #c2d10a;" iconColor="#c2d10a" color="#c2d10a"></u-button>
      <view v-else class="u-upload__button" :hover-class="!disabled ? 'u-upload__button--hover' : ''"
            hover-stay-time="150" :class="[disabled && 'u-upload__button--disabled']" :style="[{
						width: $u.addUnit(80),
						height: $u.addUnit(80)
					}]" style="background-color: aliceblue;display: flex;align-items: center;justify-content: center;">
        <u-icon name="camera-fill" size="26" color="#D3D4D6"></u-icon>
      </view>
    </u-upload>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared', // 解除样式隔离
  },
  name: "upload_img_video",
  props: {

    limit: {
      type: Number,
      default: 10
    },
    isMultiple: {
      type: Boolean,
      default: true
    },
    isBtn: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: "image"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    paramsName: {
      type: String,
      default: "file"
    }
  },
  data() {
    return {
      imgList: [],
    };
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this.imgList.splice(event.index, 1)
      this.$emit('successFile', this.imgList);
    },
    // 新增图片
    async afterRead(event) {
      const that = this;
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.imgList.length
      lists.map((item) => {
        that.imgList.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.imgList[fileListLen]
        that.imgList.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result.data.url,
          name: result.data.fileName
        }))
        fileListLen++
      }
      this.$emit('successFile', this.imgList);
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: '/attachment/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: this.paramsName,
          success: (res) => {
            resolve(JSON.parse(res.data || {}))
          },
          fail: (e) => {
            reject(e);
          }
        });
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.btn-icon {
  font-size: 10rpx !important;
  height: 58rpx !important;

  /deep/.u-icon {
    /deep/.u-icon__icon--primary {
      font-size: 20rpx !important;
    }
  }

}

/deep/.u-button--mini {
  width: 120rpx !important;

  .u-icon {
    font-size: 20rpx !important;

    .u-icon__icon {
      font-size: 20rpx !important;
    }
  }

  height: 58rpx !important;
}

/deep/.u-upload__deletable {
  width: 20px !important;
  height: 20px !important;

  .uicon-close {
    font-size: 14px !important;
    line-height: 14px !important;
  }
}

/deep/.u-upload__success {
  border-bottom-color: #c2d10a !important;
  border-right-color: #c2d10a !important;

  .uicon-checkmark {
    font-size: 14px !important;
    line-height: 14px !important;
  }
}
</style>
