<template>
  <div style="background: white">
    <el-upload
      :http-request="beginUpload"
      action=""
      multiple
      :limit="10"
      list-type="picture"
      :file-list="fileList"
      :before-upload="beforeUpload"
      class="avatar-uploader"
    >
      <div class="left">
        <el-button type="primary" size="mini">选择文件</el-button>
      </div>

    </el-upload>
    <div class="left">照片命名请使用成员手机号，如：18888888888.jpg</div>
    <div class="left">照片要求：</div>
    <div class="left">请上传一张大小不超过5M的图片，格式为.JPG，图片背景为白色，头部在中心，不要对照片进行编辑修饰、美颜等。</div>
  </div>
</template>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    border: 1px dashed #d9d9d9;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
  }
  .left {
    font-size: 12px;
    text-align: left;
    padding: 3px 0;
  }
</style>
<script>
import OSS from 'ali-oss'
import request from '@/utils/request'

export default {
  name: 'UploadTemplate',
  components: {},
  props: {
    imageUrl: {
      type: String,
      default: ''
    },
    bucket: {
      type: String,
      default: 'wookitech'
    },
    beforeUpload: {
      type: Function,
      default: () => {}
    },
    onSuccess: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      stsUrl: request.baseURL + '/oss/token',
      region: 'oss-cn-shenzhen',
      percentage: 0,
      checkpoint: null,
      client: null,
      filename: '',
      requestId: '',
      tempImgUrl: this.imageUrl
    }
  },
  computed: {
  },
  watch: {
    imageUrl() {
      this.tempImgUrl = this.imageUrl
    }
  },
  created() {
    const _this = this
    request('/oss/token').then(result => {
      _this.client = new OSS({
        accessKeyId: result.accessKeyId,
        accessKeySecret: result.accessKeySecret,
        stsToken: result.securityToken,
        bucket: _this.bucket,
        region: _this.region
      })
    })
  },
  methods: {
    beginUpload(file) {
      if (this.client == null) {
        this.$message({
          type: 'warn',
          offset: 60,
          message: '上传组件初始化失败!'
        })
        return
      }
      this.$emit('getProgress', 0)
      let filename = file.file.name
      filename = filename.split('.')[0] + '_' + new Date().getTime() + '.' + filename.split('.')[1]
      this.file = file
      this.filename = filename
      const _that = this
      console.log('file', file)
      this.client.put(filename, file.file, {
        progress: async function(p, checkpoint) {
          _that.checkpoint = checkpoint
          _that.percentage = p * 100
          _that.$emit('getProgress', Math.round(p * 100))
        },
        checkpoint: _that.checkpoint
      }).then(result => {
        _that.tempImgUrl = 'https://' + this.bucket + '.' + this.region + '.aliyuncs.com/' + result.name
        const fileResult = {}
        fileResult.url = _that.tempImgUrl
        _that.onSuccess(fileResult)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
