<template>
  <div class="upload-file-container">
    <el-progress
      v-if="uploadFileInfo.progress > 0"
      :percentage="uploadFileInfo.progress"
      :stroke-width="2"
    />
    <div v-if="uploadFileInfo.progress > 0" class="file-name">
      {{ uploadFileInfo.fileName }}
    </div>
    <div>
      <el-button
        type="primary"
        size="small"
        @click="_uploadFile"
      >
        {{ $t('uploadFile.upload') }}
      </el-button>
      <input
        ref="fileInput"
        type="file"
        class="file-input"
        accept="*"
        capture="camcorder"
        @change="_chooseFile"
      >
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/oa/editWorkApi'

export default {
  name: 'UploadFile',
  props: {
    callBackListener: {
      type: String,
      default: ''
    },
    callBackFunction: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadFileInfo: {
        vedio: {},
        fileName: '',
        realFileName: '',
        progress: 0
      }
    }
  },
  watch: {
    uploadFileInfo: {
      deep: true,
      handler(newVal) {
        this.$emit(this.callBackListener, this.callBackFunction, newVal)
      }
    }
  },
  methods: {
    notifyVedio(fileName) {
      this.uploadFileInfo = {
        vedio: {},
        fileName: fileName,
        realFileName: fileName,
        progress: 100
      }
    },
    clearVedio() {
      this.uploadFileInfo = {
        vedio: {},
        fileName: '',
        realFileName: '',
        progress: 0
      }
    },
    _uploadFile() {
      this.$refs.fileInput.click()
    },
    _chooseFile(event) {
      const files = event.target.files
      if (files && files.length > 0) {
        const file = files[0]
        if (file.size > 1024 * 1024 * 20) {
          this.$message.error(this.$t('uploadFile.sizeLimit'))
          return false
        }
        this.uploadFileInfo.fileName = file.name
        this._doUploadFile(file)
      }
    },
    async _doUploadFile(file) {
      const formData = new FormData()
      formData.append('uploadFile', file)

      try {
        const res = await uploadFile(formData, {
          onUploadProgress: (progressEvent) => {
            const rate = progressEvent.loaded / progressEvent.total
            if (rate < 0.9) {
              this.uploadFileInfo.progress = Math.floor(rate * 100)
            }
          }
        })

        this.uploadFileInfo.progress = 100
        this.$message.success(this.$t('uploadFile.success'))
        this.uploadFileInfo.fileName = res.fileName
        this.uploadFileInfo.realFileName = res.realFileName
        this.$emit(this.callBackListener, this.callBackFunction, res)
      } catch (error) {
        console.error('上传失败:', error)
        this.$message.error(this.$t('uploadFile.failed'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-file-container {
  .file-name {
    margin-bottom: 5px;
  }

  .file-input {
    display: none;
  }
}
</style>