<template>
  <el-form
    ref="uploadExcel"
    class="upload-excel-file"
  >
    <!-- 文件 -->
    <el-form-item :label="$t('trials:consistencyCheck:label:file')">
      <div class="upload-container">
        <el-upload
          class="upload-demo"
          action
          accept=".xlsx,.xls,.csv"
          :before-upload="beforeUpload"
          :http-request="handleUploadFile"
          :on-preview="handlePreview"
          :show-file-list="true"
          :limit="1"
          :on-exceed="handleExceed"
        >
          <el-button size="small" type="primary" :loading="btnLoading">
            {{ $t('trials:consistencyCheck:dialogButton:upload') }}
          </el-button>
          <span
            slot="tip"
            style="margin-left:10px;"
            class="el-upload__tip"
          >
            ({{ $t('trials:consistencyCheck:message:excelFileOnly') }})
          </span>
        </el-upload>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import { uploadVisitCheckExcel } from '@/api/trials'
export default {
  data() {
    return {
      btnLoading: false,
      trialId: this.$route.query.trialId
    }
  },
  methods: {
    beforeUpload(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        return true
      } else {
        // Must be xls or xlsx format
        this.$message.error(this.$t('trials:consistencyCheck:message:xlsx'))

        return false
      }
    },
    handleUploadFile(param) {
      this.btnLoading = true
      uploadVisitCheckExcel(this.trialId, param.file).then(res => {
        this.btnLoading = false
        this.$emit('refreshTable')
      }).catch(() => {
        this.btnLoading = false
      })
    },
    handlePreview(file) {
      if (file.fullPath) {
        window.open(file.fullPath, '_blank')
      }
    },
    handleExceed(files, fileList) {
      // Upload is currently limited to 1 file
      this.$message.warning(this.$t('trials:consistencyCheck:message:onlyOneFile'))
    },
    checkFileSuffix(fileName) {
      var typeArr = ['xls', 'xlsx', 'csv']
      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
      if (typeArr.indexOf(extendName) !== -1) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss">
.upload-excel-file{
  .upload-container .el-upload--text {
    border: none;
    width: 80px;
    height: 40px;
  }
  .upload-container .el-input--small {
    margin-bottom: 5px;
  }
  .upload-container .el-icon-circle-check {
    color: #00d1b2;
    font-size: 13px;
  }
  .account_item_clear{
    .el-tag__close{
      display: none !important;
    }
  }
}
</style>
