<template>
  <div v-loading="loading" class="non-dicom-wrapper">
    <!-- <h4 class="box-title">既往放疗史</h4> -->
    <div style="text-align:right">
      <el-button v-if="(allowAddOrEdit)" icon="el-icon-plus" type="primary" size="small" @click.native.prevent="handleAdd">
        {{ $t('common:button:new') }}
      </el-button>
<!--      <el-button-->
<!--        icon="el-icon-view"-->
<!--        type="primary"-->
<!--        size="small"-->
<!--        :disabled="nonDicomStudyList.length === 0"-->
<!--        @click="handlePreviewAllVisitFiles"-->
<!--      >-->
<!--        {{ $t('trials:uploadNonDicoms:button:preview') }}-->
<!--      </el-button>-->
    </div>

    <el-table
      :data="nonDicomStudyList"
      style="width: 100%"
    >
      <!-- 检查编号 -->
      <el-table-column
        prop="CodeView"
        :label="$t('trials:uploadNonDicoms:table:studyId')"
      />
      <!-- 检查类型 -->
      <el-table-column
        prop="Modality"
        :label="$t('trials:uploadNonDicoms:table:modality')"
      />
      <!-- 检查部位 -->
      <el-table-column
        prop="BodyPart"
        :label="$t('trials:uploadNonDicoms:table:bodyPart')"
      />
      <!-- 文件 -->
      <el-table-column
        prop="FileCount"
        :label="$t('trials:uploadNonDicoms:table:files')"
      >
        <template slot-scope="scope">
          <el-popover v-if="scope.row.FileCount" trigger="click" placement="bottom">
            <el-table v-loading="filesLoading" :data="nonDicomfilesList" height="300" size="small">
              <!-- 文件名称 -->
              <el-table-column
                prop="FileName"
                :label="$t('trials:uploadNonDicoms:table:fileName')"
                width="200"
              />
              <el-table-column :label="$t('common:action:action')" width="120">
                <template slot-scope="files">
                  <!-- 预览 -->
                  <el-button
                    icon="el-icon-view"
                    circle
                    :title="$t('trials:uploadNonDicoms:action:preview')"
                    size="small"
                    @click.native.prevent="files.row.type === 'MP4' ? handleLookVideo(scope.row) : handlePreviewImg(files.row)"
                  />
                  <!-- 删除 -->
                  <el-button
                    v-if="(data.SubmitState*1 < 2 || (data.SubmitState === 2 && data.IsQCConfirmedReupload))"
                    v-hasPermi="['trials:trials-panel:visit:crc-upload:upload']"
                    icon="el-icon-delete"
                    circle
                    :title="$t('trials:uploadNonDicoms:action:delete')"
                    size="small"
                    @click.native.prevent="files.row.type === 'MP4' ? hadnleDeleteVideo(scope.row) : handleDeleteFile(files.row.Id)"
                  />

                </template>
              </el-table-column>
            </el-table>
            <div slot="reference" class="name-wrapper">
              <el-button
                type="text"
                @click.native.prevent="handleGetFilesList(scope.row)"
              >
                {{ scope.row.FileCount }}
              </el-button>
            </div>
          </el-popover>
          <span v-else>{{ scope.row.FileCount }}</span>
        </template>
      </el-table-column>
      <!-- 检查日期 -->
      <el-table-column
        prop="ImageDate"
        :label="$t('trials:uploadNonDicoms:table:studyDate')"
      >
        <template slot-scope="scope">
          {{ moment(scope.row.ImageDate).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <!-- 更新时间 -->
      <el-table-column
        prop="UpdateTime"
        :label="$t('trials:uploadNonDicoms:table:updateTime')"
      />
      <el-table-column
        :label="$t('common:action:action')"
        min-width="200"
      >
        <template slot-scope="scope">
          <!-- 预览 -->
<!--          <el-button-->
<!--            icon="el-icon-view"-->
<!--            circle-->
<!--            :title="$t('trials:uploadNonDicoms:action:preview')"-->
<!--            :disabled="scope.row.FileCount===0"-->
<!--            @click.native.prevent="handlePreviewAllFiles(scope.row)"-->
<!--          />-->
          <!-- 上传 -->
          <el-button
            v-if="( allowAddOrEdit)"
            icon="el-icon-upload2"
            circle
            :title="$t('trials:uploadNonDicoms:action:upload')"
            @click.native.prevent="handleUpload(scope.row)"
          />
          <!-- 上传视频 -->
          <!-- <el-button
            v-if="( allowAddOrEdit)"
            icon="el-icon-video-camera-solid"
            circle
            :title="$t('trials:uploadNonDicoms:action:xfuploadvideo')"
            @click.native.prevent="handleUploadVideo(scope.row)"
          /> -->
          <!-- 编辑 -->
          <el-button
            v-if="(allowAddOrEdit)"
            icon="el-icon-edit-outline"
            circle
            :title="$t('trials:uploadNonDicoms:action:edit')"
            @click.native.prevent="handleEdit(scope.row)"
          />
          <!-- 删除 -->
          <el-button
            v-if="(data.SubmitState*1 < 2 || (data.SubmitState === 2 && data.IsQCConfirmedReupload))"
            v-hasPermi="['trials:trials-panel:visit:crc-upload:upload']"
            icon="el-icon-delete"
            circle
            :title="$t('trials:uploadNonDicoms:action:delete')"
            @click.native.prevent="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="title"
      width="600px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <el-form
        ref="editForm"
        :model="form"
        label-width="100px"
      >
        <div class="base-dialog-body">
          <!-- 检查编号 -->
          <el-form-item v-if="!!form.CodeView" :label="$t('trials:uploadNonDicoms:table:studyId')">
            <el-input :maxLength="$inputMax" v-model="form.CodeView" disabled />
          </el-form-item>
          <!-- 检查类型 -->
          <el-form-item
            :label="$t('trials:uploadNonDicoms:table:modality')"
            prop="Modality"
            :rules="[
              { required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
            ]"
          >
            <el-radio-group v-model="form.Modality">
              <el-radio v-for="m in trialModalitys" v-if="m !== ''" :key="m" :label="m" style="margin-bottom: 15px;" />
            </el-radio-group>
          </el-form-item>
          <!-- 检查部位 -->
          <el-form-item
            :label="$t('trials:uploadNonDicoms:table:bodyPart')"
            prop="BodyParts"
            :rules="[
              { required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
            ]"
          >
            <el-checkbox-group v-model="form.BodyParts">
              <el-checkbox v-for="bodyPart in trialBodyPartTypes" :key="bodyPart" :label="bodyPart" />
            </el-checkbox-group>
          </el-form-item>
          <!-- 检查日期 -->
          <el-form-item
            :label="$t('trials:uploadNonDicoms:table:studyDate')"
            prop="ImageDate"
            :rules="[
              { required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
            ]"
          >
            <el-date-picker
              v-model="form.ImageDate"
              type="date"
              :picker-options="pickerOption"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width:100%;"
            />
          </el-form-item>
        </div>
        <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
          <el-form-item>
            <el-button size="small" type="primary" :disabled="btnLoading" @click="dialogVisible = false">
              {{ $t('common:button:cancel') }}
            </el-button>
            <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">
              {{ $t('common:button:save') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

    <!-- 上传非dicom文件 -->
    <el-dialog
      v-if="uploadVisible"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
      :title="$t('trials:uploadNonDicoms:dialogTitle:upload')"
      width="600px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <!-- 多文件上传 -->
      <form id="inputForm" ref="uploadForm">
        <el-divider content-position="left">{{ $t('trials:uploadNonDicoms:label:fileType') }}</el-divider>
        <div class="form-group">
          <div class="upload">
            <input multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="uploadFolder" class="select-file" title="" @change="beginScanFiles($event)">
            <div class="btn-select">
              {{ $t('trials:uploadNonDicoms:button:selectFolder') }}
            </div>
          </div>
          <div class="upload">
            <input class="select-file" multiple="" :accept="faccept.join(',')" type="file" name="uploadFile" title="" @change="beginScanFiles($event)">
            <div class="btn-select">
              {{ $t('trials:uploadNonDicoms:button:select') }}
            </div>
          </div>

        </div>
      </form>
      <!-- 文件列表 -->
      <el-table
        ref="filesTable"
        :data="fileList"
        class="dicomFiles-table"
        height="300"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          width="50"
        />
        <!-- 文件名称 -->
        <el-table-column
          prop="name"
          :label="$t('trials:uploadNonDicoms:table:fileName')"
          min-width="180"
        />
        <el-table-column :label="$t('common:action:action')">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              icon="el-icon-view"
              circle
              :title="$t('trials:uploadNonDicoms:button:preview')"
              @click="handlePreviewImg(scope.row)"
            /> -->
            <el-button
              size="mini"
              icon="el-icon-delete"
              circle
              :title="$t('trials:crcUpload:action:delete')"
              @click="handleRemoveFile(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right;padding: 10px 0px">
        <el-button
          size="small"
          type="primary"
          :disabled="selectArr.length == 0"
          :loading="btnLoading"
          @click="beginUpload"
        >
          {{ $t('trials:uploadNonDicoms:action:upload') }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 上传非dicom视频文件 -->
    <el-dialog
      v-if="uploadVideoVisible"
      :visible.sync="uploadVideoVisible"
      upload-video-visible
      :close-on-click-modal="false"
      :title="$t('trials:uploadNonDicoms:title:xfuploadvideo')"
      width="480px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <upload-videos @uploadOver="uploadOver" />
    </el-dialog>
    <!-- 预览非DICOM视频文件 -->
    <el-dialog
      v-if="lookVideoVisible"
      :visible.sync="lookVideoVisible"
      upload-video-visible
      :close-on-click-modal="false"
      :title="$t('trials:uploadNonDicoms:title:xflookvideo')"
      width="480px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <div style="display: flex;justify-content: center">
        <video v-if="lookVideoVisible" id="video" controls crossorigin="anonymous" width="400" height="270">
          <source :src="currentRow.VideoUrl" type="video/mp4">
        </video>
      </div>
      <div style="text-align:right;padding: 10px 0px">
        <el-button
          size="small"
          @click="lookVideoVisible = false"
        >
          关闭
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="previewImgVisible"
      :visible.sync="previewImgVisible"
      :title="$t('trials:uploadNonDicoms:dialogTitle:preview')"
      append-to-body
      width="565px"
    >
      <div v-loading="imageLoading" class="base-modal-body" style="border:2px solid #ccc;padding: 10px;">
        <el-image
          :src="`/api${imgUrl}`"
          fit="fit"
          style="height:500px;width:500px"
          @error="imageLoading = false"
          @load="imageLoading = false"
        />
      </div>

    </el-dialog>

  </div>
</template>
<script>
import { preArchiveStudy, getNoneDicomStudyList, getNoneDicomStudyFileList, uploadNoneDicomFile, addOrUpdateNoneDicomStudy, deleteNoneDicomStudy, deleteNoneDicomStudyFile } from '@/api/trials'
import { getToken } from '@/utils/auth'
// import PreviewFiles from './previewFiles'
import uploadVideos from '@/components/videos'
import moment from 'moment'
export default {
  name: 'UploadNonDicomFiles',
  components: { uploadVideos },
  props: {
    bodyParts: {
      type: String,
      default: ''
    },
    modalities: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() { return {} }
    },
    subjectVisitId: {
      type: String,
      required: true
    },
    allowAddOrEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lookVideoVisible: false,
      nonDicomStudyList: [],
      dialogVisible: false,
      loading: false,
      trialBodyPartTypes: [],
      trialModalitys: [],
      btnLoading: false,
      title: '',
      form: { CodeView: '', Id: '', BodyPart: '', BodyParts: [], Modality: '', ImageDate: '' },
      pickerOption: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      },
      uploadVisible: false,
      fileList: [],
      selectArr: [],
      faccept: ['.jpg', '.jpeg', '.png', '.bmp'],
      fCount: 0,
      currentRow: {},
      filesLoading: false,
      nonDicomfilesList: [],
      previewImgVisible: false,
      imageLoading: false,
      fileUrl: '',
      type: '',
      uploadVideoVisible: false,
      trialId: this.$route.query.trialId,
      moment
    }
  },
  mounted() {
    this.getNoneDicomList()
    this.trialBodyPartTypes = this.bodyParts ? this.bodyParts.split('|') : []
    this.trialModalitys = this.modalities ? this.modalities.split('|') : []
  },
  methods: {
    // 初始化非Dicom列表数据
    getNoneDicomList() {
      this.loading = true
      getNoneDicomStudyList(this.subjectVisitId).then(res => {
        this.nonDicomStudyList = res.Result.map(v => {
          if (v.VideoObjectName) {
            v.FileCount += 1
          }
          return v
        })
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 打开新增弹框，并初始化数据
    handleAdd() {
      this.title = this.$t('trials:uploadNonDicoms:dialogTitle:add')
      this.form.Id = ''
      this.form.CodeView = ''
      this.form.BodyPart = ''
      this.form.Modality = ''
      this.form.ImageDate = ''
      this.form.BodyParts = []
      this.dialogVisible = true
    },
    // 打开比编辑弹框，并初始化数据
    handleEdit(row) {
      this.title = this.$t('trials:uploadNonDicoms:dialogTitle:edit')
      const { CodeView, Id, BodyPart, Modality, ImageDate } = { ...row }
      this.form.CodeView = CodeView
      this.form.Id = Id
      this.form.BodyPart = BodyPart
      this.form.Modality = Modality
      this.form.ImageDate = ImageDate
      this.form.BodyParts = this.form.BodyPart.split(', ')
      this.dialogVisible = true
    },
    // 保存非Dicom检查信息
    handleSave() {
      this.$refs.editForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.form.BodyPart = this.form.BodyParts.join(', ')
        this.form.TrialId = this.trialId
        this.form.SiteId = this.data.SiteId
        this.form.SubjectId = this.data.SubjectId
        this.form.SubjectVisitId = this.subjectVisitId
        addOrUpdateNoneDicomStudy(this.form).then(res => {
          this.btnLoading = false
          this.$refs.editForm.resetFields()
          this.getNoneDicomList()
          // 刷新父组件列表
          this.$emit('getList')
          this.$message.success(this.$t('common:message:savedSuccessfully'))

          this.dialogVisible = false
        }).catch(() => {
          this.btnLoading = false
        })
      })
    },
    // 根据id删除某个非Dicom检查信息
    handleDelete(row) {
      var message = ''
      if (row.FileCount > 0) {
        message = this.$t('trials:uploadNonDicoms:message:deleteStudyAndFiles')
      } else {
        message = this.$t('trials:uploadNonDicoms:message:delete')
      }
      this.$confirm(message, {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          deleteNoneDicomStudy(this.trialId, this.subjectVisitId, row.Id)
            .then(res => {
              this.loading = false
              if (res.IsSuccess) {
                // 刷新父组件列表
                this.$emit('getList')
                this.nonDicomStudyList.splice(this.nonDicomStudyList.findIndex(item => item.Id === row.Id), 1)

                this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
              }
            }).catch(() => { this.loading = false })
        }).catch(() => {})
    },
    // 打开上传文件弹窗
    handleUpload(row) {
      this.fileList = []
      this.uploadVisible = true
      this.fCount = 0
      this.currentRow = { ...row }
    },
    handleLookVideo(row) {
      this.currentRow = { ...row }
      this.lookVideoVisible = true
    },
    handleUploadVideo(row) {
      this.uploadVideoVisible = true
      this.currentRow = { ...row }
    },
    hadnleDeleteVideo(row) {
      this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.filesLoading = true
          this.loading = true
          var params = Object.assign({}, row)
          params.VideoName = ''
          params.VideoObjectName = ''
          params.VideoUrl = ''
          params.UploadVideoTime = ''
          addOrUpdateNoneDicomStudy(params).then(res => {
            this.filesLoading = false
            this.loading = false
            this.nonDicomfilesList.pop()
            this.$emit('getList')
            this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
            this.getNoneDicomList()
          }).catch(() => {
            this.filesLoading = false
            this.loading = false
          })
        })
    },
    uploadOver(isSuccess, res, fileName) {
      if (isSuccess) {
        var params = Object.assign({}, this.currentRow)
        params.VideoName = fileName
        params.VideoObjectName = res.name
        params.VideoUrl = res.url
        params.UploadVideoTime = this.parseTime(new Date())
        addOrUpdateNoneDicomStudy(params).then(res => {
          this.getNoneDicomList()
          // 刷新父组件列表
          this.uploadVideoVisible = false
          this.$emit('getList')
          this.$message.success(this.$t('components:uploadvideo:message:xf1'))
        }).catch(() => {
          this.uploadVideoVisible = false
        })
      }
    },
    // 扫描待上传文件
    beginScanFiles(e) {
      var files = e.target.files
      var sameFiles = []
      files.forEach(file => {
        var extendName = file.name.substring(file.name.lastIndexOf('.')).toLocaleLowerCase()
        if (this.faccept.indexOf(extendName) !== -1 && this.fileList.findIndex(v => v.name === file.name) > -1) {
          sameFiles.push(file.name)
        }
      })
      var scope = this
      if (sameFiles.length > 0) {
        const h = this.$createElement
        var msg = this.$t('trials:uploadNonDicoms:message:exsitSameFile').replace('xxx', sameFiles.join(', '))
        this.$msgbox({
          message: h('div', { style: 'maxHeight:300px;overflow: auto;' }, [
            h('p', null, msg),
            h('p', null, this.$t('trials:uploadNonDicoms:message:isContinueUpload'))
          ]),
          type: 'warning',
          showCancelButton: true
        }).then(() => {
          scope.pendingUploadQuene(files)
        }).catch(() => { scope.resetUploadForm() })
      } else {
        scope.pendingUploadQuene(files)
      }
    },
    pendingUploadQuene(files) {
      for (var i = 0; i < files.length; ++i) {
        const fileName = files[i].name
        var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
        if (this.faccept.indexOf(extendName) !== -1) {
          files[i].id = `${files[i].lastModified}${files[i].name}`
          this.fileList.push(files[i])
        }
      }
      this.resetUploadForm()
    },
    resetUploadForm() {
      this.$nextTick(() => {
        this.$refs.uploadForm.reset()
      })
    },
    handlePreviewImg(row) {
      this.imgUrl = row.FullFilePath
      this.previewImgVisible = true
      this.imageLoading = true
    },
    beginScanFolder(e) {
      var files = e.target.files
      this.fCount += files.Count
      for (var i = 0; i < files.length; ++i) {
        const fileName = files[i].name
        var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
        if (this.faccept.indexOf(extendName) !== -1) {
          files[i].id = `${files[i].lastModified}${files[i].name}`
          this.fileList.push(files[i])
        }
      }
    },
    handleRemoveFile(row) {
      this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.fileList.splice(this.fileList.findIndex(item => item.id === row.id), 1)
        }).catch(() => {})
    },
    // 获取待上传文件信息
    handleSelectionChange(selection) {
      this.selectArr = selection
    },
    // 开始上传文件
    beginUpload() {
      console.log(this.selectArr)
      const fileMaxSize = 1024 * 1024 * 1024 * 1 // 1G
      var currentFilesSize = 0
      this.selectArr.forEach(item => {
        currentFilesSize += item.size
      })
      if (currentFilesSize / fileMaxSize > 1) {
        // 'Upload file size cannot exceed 1G'
        this.$message.error(this.$t('trials:uploadNonDicoms:message:uploadSize'))
      } else {
        var fileData = new FormData()
        for (var i = 0; i < this.selectArr.length; ++i) {
          fileData.append('file', this.selectArr[i])
        }
        preArchiveStudy({
          subjectVisitId: this.subjectVisitId,
          isDicom: false
        }).then(res => {
          this.btnLoading = true
          uploadNoneDicomFile(this.trialId, this.subjectVisitId, this.currentRow.Id, fileData, res.Result).then(res => {
            this.btnLoading = false
            this.uploadVisible = false
            this.getNoneDicomList()
            // 刷新父组件列表
            this.$emit('getList')
            this.$message.success(this.$t('trials:uploadNonDicoms:message:uploadedSuccessfully'))
          }).catch(() => { this.btnLoading = false })
        })
      }
    },
    handleGetFilesList(row) {
      this.filesLoading = true
      getNoneDicomStudyFileList(row.Id).then(res => {
        this.nonDicomfilesList = res.Result
        if (row.VideoName) {
          this.nonDicomfilesList.push({ FileName: row.VideoName, type: 'MP4' })
        }
        this.filesLoading = false
      }).catch(() => { this.filesLoading = false })
    },
    // 根据id删除某个文件
    handleDeleteFile(id) {
      this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.filesLoading = true
          this.loading = true
          deleteNoneDicomStudyFile(this.trialId, this.subjectVisitId, id)
            .then(res => {
              this.filesLoading = false
              this.loading = false
              if (res.IsSuccess) {
                // 刷新父组件列表
                this.$emit('getList')
                this.nonDicomfilesList.splice(this.nonDicomfilesList.findIndex(item => item.Id === id), 1)
                this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
                this.getNoneDicomList()
              }
            }).catch(() => {
              this.filesLoading = false
              this.loading = false
            })
        }).catch(() => {})
    },
    // 预览
    handlePreview(row) {
      window.open(row.FullFilePath, '_blank')
    },
    // 预览访视下所有的非DICOM文件
    handlePreviewAllVisitFiles() {
      // 预览所有检查下非Dicom文件
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showNoneDicoms?subjectVisitId=${this.subjectVisitId}&TokenKey=${token}`
      })
      window.open(routeData.href, '_blank')
    },
    handlePreviewAllFiles(row) {
      this.currentRow = { ...row }
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showNoneDicoms?subjectVisitId=${this.subjectVisitId}&studyId=${row.Id}&TokenKey=${token}`
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.upload{
  display: inline-block;
  height: 30px;
  width: 90px;
  padding: 2px 10px;
  line-height: 23px;
  position: relative;
  text-decoration: none;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  background: #33dac1;
  border-color: #33dac1;
  color: #FFF;
  .select-file{
    height: 30px;
    width: 90px;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    opacity: 0;
    font-size: 0;
  }
  .btn-select {    //给显示在页面上的按钮写样式
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;        //pointer-events:none用来控制该标签的点击穿透事件
}
}

</style>
