<template>
  <div class="upload-container">
    <el-upload
      class="upload-demo"
      action
      :http-request="uploadFile"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :before-remove="beforeRemove"
      :on-remove="handleRemoveFile"
      :on-preview="handlePreview"
      :limit="1"
      :on-exceed="handleExceed"
      accept=".pdf"
    >
      <el-button size="small" type="primary" :disabled="btnDisabled">Upload</el-button>
      <span slot="tip" class="el-upload__tip">(must be in pdf format)</span>
    </el-upload>
  </div>
</template>
<script>
import { uploadNonDoctorFile } from '@/api/attachment'
import { uploadTrialSOW, deleteTrialSOW } from '@/api/financials'
const type = 'Statement of Work'
export default {
  name: 'UploadFile',
  props: {
    trialId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      btnDisabled: false
    }
  },
  methods: {
    initFileList(fileList) {
      this.fileList = fileList
    },
    uploadFile(param) {
      var fileName = param.file.name
      this.btnDisabled = true
      uploadNonDoctorFile(param.file, type)
        .then(res => {
          if (res.IsSuccess) {
            this.fileList.push({ name: fileName, FileName: fileName, Path: res.Result.FilePath, FullPath: res.Result.FullFilePath, Type: type })
            this.saveFile()
          }
        })
        .catch(err => {
          console.log(err)
          this.btnDisabled = false
        })
    },
    saveFile() {
      const { name, Path } = this.fileList[0]
      const param = { SowPath: Path, SowName: name, TrialId: this.trialId }
      uploadTrialSOW(param).then(res => {
        this.btnDisabled = false
        if (res.IsSuccess) {
          this.$message.success('Uploaded successfully')
          this.$emit('getFileList', this.fileList)
        }
      })
        .catch(err => {
          console.log(err)
          this.btnDisabled = false
        })
    },
    beforeUpload(file, fileList) {
      const isValidFile = this.fileValid(file.name, 'pdf')
      if (isValidFile) {
        this.fileList = []
      } else {
        this.$alert('must be in pdf format')
        return false
      }
    },
    beforeRemove(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`Sure to remove ${file.name}?`)
      }
    },
    handleRemoveFile(file, fileList) {
      if (file && file.status === 'success') {
        const { Path } = this.fileList[0]
        const param = { SowPath: Path, TrialId: this.trialId }
        deleteTrialSOW(param).then(res => {
          if (res.IsSuccess) {
            this.fileList = []
            this.$message({
              message: 'Deleted successfully!',
              type: 'success'
            })
            this.$emit('getFileList', this.fileList)
          }
        })
      }
    },
    handlePreview(file) {
      file.FullPath ? window.open(file.FullPath, '_blank') : ''
    },
    handleExceed(files, fileList) {
      this.$message.warning(`Upload is currently limited to 1 file`)
    },
    fileValid(fileName, typeArr) {
      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
      if (typeArr.toLocaleLowerCase().indexOf(extendName) > -1) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style>
.upload-container .el-upload--text {
  border: none;
  width: 80px;
  height: 30px;
}
.upload-container .el-form-item__label {
  font-size: 12px;
}
.upload-container .el-upload-list__item {
  font-size: 12px;
}
</style>
