<template>
  <div class="upload-video">
    <div id="videoBox" ref="videoBox"></div>
    <div>
      <el-upload
        v-loading="uploadLoading"
        class="upload-demo"
        :action="''"
        :multiple="false"
        accept="video/mp4,video/quicktime,video/avi"
        :auto-upload="false"
        :file-list="fileList"
        :limit="1"
        :on-change="handleVideoChange"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :on-error="handleError"
      >
        <el-button plain>上傳視頻</el-button>
        <div slot="tip" class="el-upload__tip">
          選擇本地視頻上傳，不支持多條視頻同步上傳
        </div>
      </el-upload>
    </div>
    <div v-if="progressSeen">
      <el-progress
        v-if="!uploadStatus"
        :percentage="progress"
        status="warning"
        style="width:350px"
      ></el-progress>
      <el-progress
        v-else-if="uploadStatus && progress !== 100"
        :percentage="progress"
        style="width:350px"
      ></el-progress>
      <el-progress v-else :percentage="progress" status="success" style="width:350px"></el-progress>
    </div>
    <!-- <el-button plain @click="test">測試</el-button> -->
  </div>
</template>

<script>
export default {
  name: 'UploadVideo',
  props: {
    content: {
      type: String,
      default: ''
    },
    uploadImgMaxSize: {
      type: Number,
      default: 10 * 1024 * 1024
    },
    uploadImgServer: {
      type: String,
      default: ''
    },
    uploadFileName: {
      type: String,
      default: 'file'
    },
    uploadImgAccept: {
      type: Array,
      default: () => ['jpg', 'jpeg', 'png', 'gif']
    }
  },
  data () {
    return {
      uploadSign: {
        host: ''
      },
      uploadLoading: false,
      fileList: [],
      progress: 0,
      progressSeen: false,
      uploadStatus: true
    }
  },
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    async handleVideoChange (file) {
      const validFile = file.raw
      //只能插入一個(gè)視頻
      console.log(validFile)
      if (this.fileList.length > 0) {
        this.$message.error('只能插入一個(gè)視頻')
        return false
      }
      const isLt1G = validFile && validFile.size / 1024 / 1024 / 1024 < 1
      if (!isLt1G) {
        this.$message.error('視頻大小不能超過1G')
        return false
      }
      this.uploadStatus = true
      this.progressSeen = true
      this.progress = 10
      await this.getSignature(validFile && validFile.name)
      const client = {
        key: this.uploadSign.filePath,
        policy: this.uploadSign.policy,
        OSSAccessKeyId: this.uploadSign.accessId,
        signature: this.uploadSign.signature,
        expire: this.uploadSign.expire,
        dir: this.uploadSign.dir,
        callBack: this.uploadSign.callBack,
        success_action_status: '200'
      }
      this.uploadOssVideo(client, validFile)
    },
    async getSignature (fileName) {
      let res = await fetchApi.article.getUploadSign({ fileName })
      this.uploadSign = res.data
      console.log(this.uploadSign)
    },
    async uploadOssVideo (client, file) {
      let _this = this
      var oMyForm = new FormData()

      for (var field_name in client) {
        oMyForm.append(field_name, client[field_name])
      }

      oMyForm.append('file', file)

      var oReq = new XMLHttpRequest()
      //上傳進(jìn)度監(jiān)聽
      oReq.upload.onprogress = function (e) {
        if (e.type == 'progress') {
          _this.uploadLoading = true
          var percent = Math.round((e.loaded / e.total) * 100, 2)
          _this.progress = percent
        }
      }
      //上傳結(jié)果
      oReq.onreadystatechange = function (e) {
        _this.uploadLoading = false
        if (oReq.readyState == 4) {
          if (oReq.status == 200) {
            //這里如果成功返回的是 success_action_status設(shè)置的值
            _this.$message.success('上傳成功')
            try {
              const path = e.target.response && JSON.parse(e.target.response).fileFullPath
              console.log(path)
              _this.$emit('uploadVide', path)
            } catch (error) {}
          } else {
            _this.$message.error('上傳失敗')
            this.uploadStatus = false
          }
        }
      }
      oReq.open('POST', this.uploadSign.host)
      oReq.send(oMyForm)
    },

    test () {
      this.handleError()
    },
    handleRemove (file, fileList) {
      this.progressSeen = false
      this.progress = 0
    },
    handleExceed () {
      this.$message.warning(`只能插入一個(gè)視頻`)
    },
    handleError () {
      this.$message.error('上傳失敗')
      this.uploadStatus = false
      // this.fileList = []
      this.$emit('uploadVide', '')
    }
  }
}
</script>

<style lang="scss">
.upload-video {
  .el-upload-list__item-name {
    padding-left: 0px !important;
  }
}
</style>