<template>
  <div>
    <el-dialog title="上传文件" :visible.sync="visible" width="30%" height="200px" center :close-on-click-modal="false" @close="close">
      <el-form>
        <el-form-item label="选择文件:" label-width="120px">
            <el-upload class="upload-demo inlineBlock"
                ref="bigMap4UploadFile"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :accept=\'parameter.accept\'
                :on-change="beforeAvatarUpload">
                <el-button size="small" type="primary"><i class="el-icon-plus"></i> 选择文件</el-button>
            </el-upload>
            <!-- <el-button id="uploadBtn" size="small" @click="upload()" style="background-color:rgba(86, 192, 13, 0.93);color: white;"> <i class="el-icon-upload"></i> 开始上传</el-button> -->
            <!-- <el-button id="stopBtn" size="small" v-show="showValue === 1" @click="stop()" style="background-color: indianred;color: white;margin-left:10px"> <i class="el-icon-close"></i> 取消大文件上传</el-button> -->
        </el-form-item>
        <el-form-item label="文件支持格式:" label-width="120px">
            <span class="el-upload__tip">{{parameter.accept}}</span>
        </el-form-item>
      </el-form>
        <!-- <h2 id=\'status\'>{{statusMsg}}</h2> -->
        <!-- <img v-show="imgSrc" :src="imgSrc" alt="" class="img"> -->
        <h3 v-show="img" class="relH3">{{img}} <i class="el-icon-delete absRight" @click="clearInfo"></i></h3>
        <el-progress :percentage="progressValue" v-show="showValue==1"></el-progress>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="confirm(true)" :disabled="buttonControl">确 定</el-button>
        </span>
    </el-dialog>
  </div>

</template>
<script>
import $api from \'@api\'
// import { mapGetters } from \'vuex\'
const OSS = require(\'ali-oss\')
var credentials = null // STS凭证
var ossClient = null // oss客户端实例
export default {
  data () {
    return {
      statusMsg: \'\',
      progressValue: 0,
      showValue: 0,
      imgSrc: null,
      img: null,
      visible: false, // 弹框是否显示
      fileInfo: null, // 选择文件信息
      backObj: {},
      buttonControl: false
    }
  },
  model: {
    prop: \'videoUrl\',
    event: \'change\'
  },
  /**
   * parameter：Object 参数格式
   * accept: 文件格式  eg: \'image/jpg,image/gif,image/png,image/jpeg,image/bmp,image/svg\'
     size: 限制最大文件    eg: 10   type:number
     folder: 必填项  后台服务功能模块 各个模块不同，可以问后台此参数传什么  eg: user  //个人中心
            # 会员中心 customer
            # 工具服务 utility
            # 设备租赁 rent
            # 劳动力 uber
            # 部品 bpsc
            # 交易 trade
            # 建筑产品 jzsc
            # 供需平台 snd
            # 模型 model
    modelFlag: 上传模型传1 ，默认不传
   */
  props: {
    videoUrl: String,
    parameter: Object
  },
  //   computed: {
  //     ...mapGetters([
  //       \'bucketUrl\'
  //     ])
  //   },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.visible = true
    },
    // 确定
    confirm () {
      this.visible = false
      if (this.backObj.name) {
        this.$emit(\'change\', this.backObj)
      } else {
        this.$emit(\'change\', {})
      }
    },
    // 关闭
    close () {
      this.visible = false
      // console.log(\'关闭\')
      this.$emit(\'close\', {})
    },
    // 选择文件
    beforeAvatarUpload (file) {
      // 获取文件名字，取到文件类型，就是文件后缀，为避免不同设备后缀大小写不一致，统一改成大写
      var type
      if (file.name || file.raw.type === \'\') {
        var arr = file.name.split(\'.\')
        type = arr[arr.length - 1].toUpperCase()
      }
      // this.parameter.accept这个值是组件里的参数，是控制上传文件格式的
      if (this.parameter.accept && this.parameter.accept.toUpperCase().indexOf(type) <= 0) {
        this.$message({ type: \'error\', message: \'格式不正确!\', duration: 1000 })
        return false
      }
      if (this.parameter.size) {
        const isLt2M = file.size / 1024 / 1024 < this.parameter.size
        if (!isLt2M) {
          this.$message.error(\'大小不能超过 \' + this.parameter.size + \'MB!\')
          return false
        }
      }
      this.buttonControl = true // 控制确定按钮不能点击，上传成功才可点击
      this.fileInfo = file
      this.img = file.name
      this.upload()
    },
    // 清空
    clearInfo () {
      this.statusMsg = \'\'
      this.$refs.bigMap4UploadFile.value = \'\'
      this.progressValue = 0
      this.showValue = 0
      this.img = null
      this.backObj = {}
    },
    // 上传
    upload () {
      this.statusMsg = \'上传中\'
      $api.user.getStsToken({
        modelFlag: this.parameter.modelFlag
      }).then(({ data }) => {
        // console.log(data)
        if (data && data.head.retCode === \'0000\') {
          credentials = data.body
          const { accessKeyId, accessKeySecret, securityToken, bucketName } = credentials
          if (!this.parameter.folder) return this.$message({ type: \'error\', message: \'服务功能模块未上传!\', duration: 1000 })
          ossClient = new OSS({
            accessKeyId: accessKeyId,
            accessKeySecret: accessKeySecret,
            stsToken: securityToken,
            bucket: bucketName, // utility
            secure: true,
            region: \'oss-cn-beijing\', // todo
            folder: this.parameter.folder
          })
          if (ossClient) {
            var { raw } = this.fileInfo
            var fileList = [raw]
            fileList.forEach(file => {
            // 如果文件大学小于分片大小，使用普通上传，否则使用分片上传
            //   if (file.size < partSize) {
            //     this.showValue = 0
            //     this.commonUpload(file)
            //   } else {
              this.showValue = 1
              this.multipartUpload(file)
            //   }
            })
          } else {
            this.$message({ type: \'error\', message: \'服务端响应异常!\', duration: 1000 })
            this.statusMsg = \'initOSSClient异常空，请刷新重试或联系管理员\'
          }
        } else {
          this.$message({ type: \'error\', message: \'服务端响应异常!\', duration: 1000 })
          this.statusMsg = \'sts临时凭证获取失败，请刷新重试或联系管理员\'
        }
      }).catch(err => {
        this.$message({ type: \'error\', message: \'服务端响应异常!\', duration: 1000 })
        this.statusMsg = err + \'initOSSClient异常，请刷新重试或联系管理员\'
      })
    },
    // 添加文件夹名字
    getDateFolder () {
      const t = new Date()
      let timeStr = \'\'
      timeStr = timeStr + t.getFullYear() // 年
      timeStr = timeStr + (t.getMonth() + 1)// 月，因为从0开始，所以需要加1
      timeStr = timeStr + t.getDate() // 日
      return timeStr
    },
    // 普通上传
    commonUpload (file) {
    //   var fileName = file.name
      var newFileName = new Date().getTime() + Math.random().toString(36).substr(2) + file.name.substr(file.name.lastIndexOf(\'.\'))
      return ossClient.put(this.parameter.folder + \'/\' + newFileName, file).then(result => {
        // console.log(`Common upload ${file.name} succeeded, result === `, result)
        this.imgSrc = result.url // 此页面可用来展示图片
        this.backObj = result
        this.backObj.size = file.size
        this.backObj.oldName = file.name
        this.buttonControl = false
      }).catch(err => {
        this.statusMsg = \'上传失败\'
        this.buttonControl = true
        console.log(`Common upload ${file.name} failed === `, err)
      })
    },
    // 分片上传
    multipartUpload (file) {
      // oss上传到服务器上的名字 我这是后台服务名字+时间戳+6位随机数
      var newFileName = new Date().getTime() + Math.random().toString(36).substr(2) + file.name.substr(file.name.lastIndexOf(\'.\'))
      return ossClient.multipartUpload(this.parameter.folder + \'/\' + newFileName, file, {
        progress: this.onMultipartUploadProgress
      }).then(result => {
        this.statusMsg = \'上传成功\'
        this.backObj = result
        this.backObj.size = file.size
        this.backObj.oldName = file.name
        this.buttonControl = false
        // console.log(\'上传成功\')
      }).catch(err => {
        console.log(\'上传失败\')
        this.statusMsg = \'上传失败\'
        console.log(`Multipart upload ${file.name} failed === `, err)
        this.progressValue = 0
        this.showValue = 0
        this.buttonControl = true
      })
    },
    // 分片上传进度改变回调
    onMultipartUploadProgress (progress, checkpoint) {
      // console.log(`${checkpoint.file.name} 上传进度 ${progress}`)
    //   checkpoints[checkpoint.uploadId] = checkpoint
      this.progressValue = Math.round(progress * 100)
    },
    // 停止上传
    stop () {
      this.statusMsg = \'停止上传\'
      if (ossClient) {
        ossClient.cancel()
      } else {
        this.statusMsg = \'停止失败\'
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .img{
      width: 178px;
      height: 178px;
  }
  .relH3{
      padding: 0 27px;
      position: relative;
  }
  .absRight{
    position: absolute;
    right:10px;
  }
</style>