<style>
</style>
<style lang="scss" scoped>
</style>
<template>
  <div class="upload-file">
    <a-upload
      name="file"
      :multiple="multiple"
      list-type="picture-card"
      class="avatar-uploader"
      action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
      :before-upload="beforeUpload"
      @change="handleChange"
      :accept="uploadType == 'script'?'.doc,.txt,.pdf,.xlsx':uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/png' : 'mp4')"
      :file-list="fileList"
      :remove="removeFile"
      @preview="handlePreview"
      :disabled="loadingElse || disabled"
    >
      <div v-if="fileList.length < fileCount || fileList.length < 1">
        <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
        <div class="ant-upload-text">点击上传</div>
      </div>
    </a-upload>
    <div style="color: red" v-if="sizeCheck">
      {{ uploadType == 'image' ? '请上传jpg,jpeg,png格式的图片,并且大小在'+(size/1024)+'m之内' : uploadType == 'video'?'请上传mp4格式,大小在'+(size/1024)+'m之内':'' }}
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
      <video :src="previewImage" v-else-if="uploadType == 'video'" style="width: 100%" controls="controls">您的浏览器不支持 video 标签。</video>
      <iframe id="iframeData" v-show="uploadType == 'script'" style="width: 100%; height: 500px" :src="previewImage+'?page=hsn#toolbar=0'"></iframe>
    </a-modal>
  </div>
</template>

<script>
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import { mapGetters } from 'vuex'
import moment from 'moment'

import BMF from 'browser-md5-file'

import qs from 'qs'
var COS = require('cos-js-sdk-v5')
var cos = new COS({
  SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
})
var i = 0
const oneKB = 1024

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}
export default {
  name: 'upload-file',
  components: {},
  props: {
    uploadType: {
      //上传类型  值为  image/video,同时目录名称也是这样
      type: String,
      default() {
        return 'image'
      },
    },
    multiple: {
      // true 可以批量上传  false 不可以
      type: Boolean,
      default() {
        return true
      },
    },
    fileCount: {
      //最大上传数量
      type: Number,
      default() {
        return 20
      },
    },
    checkFile: {
      //返回promise方法,判读文件是否上传过,进行上传拦截
      type: Function,
      default() {
        return Promise.resolve()
      },
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      },
    },
    value: {
      required: true,
      default() {
        return ''
      },
    },
    size: {
      type: Number,
      default() {

          if (this.uploadType == 'image') {
            return 2048
          } else {
            return 1024000
          }
        
      },
    },
    sizeCheck: {
      type: Boolean,
      default() {
        return true
      },
    },
    onOversize: {
      type: Function,
      default() {
        alert(`请选择${this.size}KB内的文件！`)
      },
    },
  },
  data() {
    return {
      fileList: [],
      loadingElse: false,
      imageUrl: '',
      percent: 0,
      previewVisible: false,
      previewImage: '',
    }
  },
  filters: {},
  computed: {},
  mounted() {},
  watch: {
    //    fileListAll
    value: {
      immediate: true,
      handler(n, o) {
        this.$nextTick(() => {
          if (this.fileList && this.fileList.length == 0) {
            if (typeof n == 'object') {
              this.fileList = n.map((item, index) => {
                return {
                  uid: index + 1,
                  name: index + 1,
                  status: 'done',
                  url: item,
                }
              })
            } else {
              if (n === '') {
                this.fileList = []
              } else {
                this.fileList = []
                var data = {
                  uid: 1,
                  name: '回显',
                  status: 'done',
                  url: n,
                }
                this.fileList.push(data)
              }
            }
          } else {
            if (n.length == 0 || n == '') {
              this.clearAll()
            }
          }
        })
      },
      deep: true,
    },
  },
  methods: {
    handleCancel() {
      closeAllVideoFun()
      this.previewVisible = false
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    removeFile(file) {
      // console.log(file)
      var index = this.fileList.findIndex((v) => v.uid === file.uid)
      this.fileList.splice(index, 1)
      this.$emit('removeUpload', file)
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    beforeUpload(file) {
      this.percent = 0
      this.loadingElse = true
      const fileOvesize = file.size > this.size * oneKB
      // console.log(fileOvesize)
      if (fileOvesize && this.sizeCheck) {
        this.onOversize()
        this.loadingElse = false
        return
      } else {
        this.checkFile(file)
          .then((res) => {
            this.cosUpload(file)
          })
          .catch(() => {
            this.loadingElse = false
          })
        return new Promise(function (resolve, reject) {
          reject()
        })
      }
    },
    clearAll() {
      this.fileList = []
    },
    cosUpload(file) {
      var that = this
      let date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      var timeElse = new Date().getTime()
      var arr = file.name.split('.')

      var str = ''
      for (let i = 0; i < arr.length; i++) {
        if (i == arr.length - 1) {
        } else {
          if (i == arr.length - 2) {
            str += arr[i]
          } else {
            str += arr[i] + '.'
          }
        }
      }
      // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
      cos.putObject(
        {
          Bucket: 'media-1301855440',
          /* 必须 */
          Region: 'ap-chongqing',
          /* 存储桶所在地域，必须字段 */
          Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
          /* 必须 */
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: function (progressData) {
            //进度条方法

            that.percent = progressData.percent * 100
          },
          onTaskReady: function (tid) {
            // console.log('onTaskReady', tid);
          },
          onTaskStart: function (info) {
            //开始上传
            // console.log('onTaskStart', info);
          },
        },
        function (err, data) {
          if (err) {
            that.loadingElse = false
            that.$message.error('上传失败!!!' + err)
            return
          }
          // alert('成功')
          that.loadingElse = false
          if (that.fileList.length < that.fileCount) {
            that.fileList.push({
              uid: file.name,
              name: file.name,
              status: 'done',
              url: '//' + data.Location,
            })

            // that.$emit('overUpload', that.fileList.map(item => {
            //                 return item.url
            //               }))
            that.$emit('overUpload', that.fileList)

            if (that.multiple) {
              let urlList =  that.fileList.map((item) => {
                return item.url
              })
             
                that.$emit(
                  'update:value',urlList
                 
                )
    
              
            } else {
              that.$emit(
                'update:value',
                that.fileList.map((item) => {
                  return item.url
                })[0]
              )
            }
          } else {
            that.$message.error('上传已达上限' + that.fileCount + '张')
          }
        }
      )
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>