<template>
  <div class="nonedicomFile">
    <div class="top">
      <span>{{ $t('upload:nonedicom:title') }}</span>
      <div class="tip">
        <i class="el-icon-warning-outline"></i>
        <div v-html="$t('upload:nonedicom:tip:message')"></div>
      </div>
    </div>
    <!--检查列表-->
    <el-table
      :data="list"
      style="width: 100%"
      v-adaptive="{ bottomOffset: 60 }"
      :loading="loading"
      @sort-change="handleSortByColumn"
      :default-sort="{ prop: 'TaskBlindName', order: 'descending' }"
    >
      <!--受试者-->
      <el-table-column
        prop="SubjectCode"
        :label="$t('upload:nonedicom:table:subject')"
      />
      <!--任务名称-->
      <el-table-column
        prop="TaskBlindName"
        :label="$t('upload:nonedicom:table:taskName')"
        sortable="custom"
      />
      <!--检查类型-->
      <el-table-column
        prop="Modality"
        :label="$t('upload:nonedicom:table:molityType')"
        sortable="custom"
      >
      </el-table-column>
      <!--检查部位-->
      <el-table-column
        prop="BodyPart"
        :label="$t('upload:nonedicom:table:bodyPart')"
        sortable="custom"
      />
      <!--原文件数-->
      <el-table-column
        prop="FileCount"
        :label="$t('upload:nonedicom:table:fileCount')"
      >
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.FileCount"
            trigger="click"
            placement="bottom"
          >
            <el-table :data="scope.row.FileList" height="300" size="small">
              <!-- 文件名称 -->
              <el-table-column
                prop="FileName"
                :label="$t('trials:audit:table:nonDicomsFileName')"
                width="200"
              />
              <el-table-column
                prop="FileSize"
                :label="$t('trials:audit:table:nonDicomsFileSize')"
                width="100"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.FileSize && scope.row.FileSize > 0
                      ? `${(scope.row.FileSize / 1024 / 1024).toFixed(2)}MB`
                      : ''
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common:action:action')" width="120">
                <template slot-scope="files">
                  <!-- 预览 -->
                  <viewer
                    :ref="files.row.Path"
                    style="margin: 0 10px"
                    :images="[`${OSSclientConfig.basePath}${files.row.Path}`]"
                  >
                    <el-button
                      circle
                      icon="el-icon-view"
                      :title="$t('upload:nonedicom:button:preview')"
                      :disabled="
                        files.row.FileType &&
                        files.row.FileType.indexOf('zip') >= 0
                      "
                      @click.native.prevent="previewFile(files.row)"
                    />
                    <img
                      v-show="false"
                      crossorigin="anonymous"
                      :src="`${OSSclientConfig.basePath}${files.row.Path}`"
                      alt="Image"
                    />
                  </viewer>
                </template>
              </el-table-column>
            </el-table>
            <div slot="reference" class="name-wrapper">
              <el-button type="text">
                {{ scope.row.FileCount }}
              </el-button>
            </div>
          </el-popover>
          <span v-else>{{ scope.row.FileCount }}</span>
        </template>
      </el-table-column>
      <!--后处理文件数-->
      <el-table-column
        prop="UploadedFileCount"
        :label="$t('upload:nonedicom:table:uploadFileCount')"
      >
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.UploadedFileCount"
            trigger="click"
            placement="bottom"
          >
            <el-table
              :data="scope.row.UploadedFileList"
              height="300"
              size="small"
            >
              <!-- 文件名称 -->
              <el-table-column
                prop="FileName"
                :label="$t('trials:audit:table:nonDicomsFileName')"
                width="200"
              />
              <el-table-column
                prop="FileSize"
                :label="$t('trials:audit:table:nonDicomsFileSize')"
                width="100"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.FileSize && scope.row.FileSize > 0
                      ? `${(scope.row.FileSize / 1024 / 1024).toFixed(2)}MB`
                      : ''
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common:action:action')" width="120">
                <template slot-scope="files">
                  <!-- 预览 -->
                  <viewer
                    :ref="files.row.Path"
                    style="margin: 0 10px"
                    :images="[`${OSSclientConfig.basePath}${files.row.Path}`]"
                  >
                    <el-button
                      circle
                      icon="el-icon-view"
                      :title="$t('upload:nonedicom:button:preview')"
                      :disabled="
                        files.row.FileType &&
                        files.row.FileType.indexOf('zip') >= 0
                      "
                      @click.native.prevent="previewFile(files.row)"
                    />
                    <img
                      v-show="false"
                      crossorigin="anonymous"
                      :src="`${OSSclientConfig.basePath}${files.row.Path}`"
                      alt="Image"
                    />
                  </viewer>
                </template>
              </el-table-column>
            </el-table>
            <div slot="reference" class="name-wrapper">
              <el-button type="text">
                {{ scope.row.UploadedFileCount }}
              </el-button>
            </div>
          </el-popover>
          <span v-else>{{ scope.row.UploadedFileCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common:action:action')"
        fixed="right"
        width="180"
      >
        <template slot-scope="scope">
          <!--预览--->
          <el-button
            circle
            :disabled="scope.row.UploadedFileCount <= 0"
            icon="el-icon-view"
            :title="$t('upload:nonedicom:button:preview')"
            @click.stop="handlePreviewNoneDicomFiles(scope.row)"
          />
          <!--上传--->
          <el-button
            circle
            icon="el-icon-upload2"
            :title="$t('upload:nonedicom:button:upload')"
            @click.native.prevent="handleUpload(scope.row)"
          />
          <!--删除--->
          <el-button
            :disabled="
              scope.row.UploadedFileCount <= 0 ||
              scope.row.ReadingTaskState === 2
            "
            circle
            icon="el-icon-delete"
            :title="$t('upload:nonedicom:button:delete')"
            @click.stop="remove(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 预览单个图像 -->
    <el-dialog
      v-if="imgObj.visible"
      :visible.sync="imgObj.visible"
      :title="$t('upload:nonedicom:dialogTitle:preview')"
      append-to-body
      width="565px"
    >
      <div
        v-loading="imgObj.loading"
        class="base-modal-body"
        style="border: 2px solid #ccc; padding: 10px"
      >
        <el-image
          :src="`${OSSclientConfig.basePath}${imgObj.url}`"
          crossorigin="anonymous"
          fit="fit"
          style="height: 500px; width: 500px"
          @error="imgObj.loading = false"
          @load="imgObj.loading = false"
        />
      </div>
    </el-dialog>
    <!-- 上传非dicom文件 -->
    <el-dialog
      v-if="uploadVisible"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
      :title="$t('trials:uploadNonDicoms:dialogTitle:upload')"
      width="800px"
      append-to-body
      custom-class="base-dialog-wrapper"
      @close="resetFileDiaolg"
    >
      <!-- 多文件上传 -->
      <form id="inputForm" ref="uploadForm">
        <el-divider content-position="left">{{
          $t('trials:uploadNonDicoms:label:fileType')
        }}</el-divider>
        <div class="form-group">
          <div class="upload" style="margin-right: 10px">
            <input
              multiple="multiple"
              webkitdirectory=""
              directory
              accept="*/*"
              type="file"
              name="uploadFolder"
              class="select-file"
              title=""
              @change="beginScanFiles($event)"
              v-if="!btnLoading"
            />
            <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)"
              v-if="!btnLoading"
            />
            <div class="btn-select">
              {{ $t('trials:uploadNonDicoms:button:select') }}
            </div>
          </div>
          <!-- <span style="margin-left: 10px">{{
            $store.state.trials.uploadTip
          }}</span> -->
        </div>
      </form>
      <!-- 文件列表 -->
      <el-table
        ref="filesTable"
        :data="fileList"
        class="dicomFiles-table"
        height="300"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="(row, index) => row.status !== 2 && !btnLoading"
        />
        <el-table-column type="index" width="50" />
        <!-- 文件名称 -->
        <el-table-column
          prop="name"
          :label="$t('trials:uploadNonDicoms:table:fileName')"
          min-width="100"
        />
        <!-- 文件大小 -->
        <el-table-column
          prop="size"
          :label="$t('trials:uploadNonDicoms:table:fileSize')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.size && scope.row.size > 0
                ? `${(scope.row.size / 1024 / 1024).toFixed(2)}MB`
                : ''
            }}</span>
          </template>
        </el-table-column>
        <!-- 文件类型 -->
        <el-table-column
          prop="type"
          :label="$t('trials:uploadNonDicoms:table:fileType')"
        />
        <!-- 上传状态 -->
        <el-table-column
          prop="status"
          :label="$t('trials:uploadNonDicoms:table:uploadStatus')"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-tag
              :type="['warning', 'info', 'success', 'danger'][scope.row.status]"
              v-if="scope.row.status || scope.row.status === 0"
              >{{ $fd('NoneDicomUploadStatus', scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('trials:uploadNonDicoms:table:failedFileCount')"
          min-width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-progress
              color="#409eff"
              :percentage="
                ((scope.row.uploadFileSize * 100) / scope.row.size).toFixed(2) *
                1
              "
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('common:action:action')">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-delete"
              circle
              :disabled="btnLoading"
              :title="$t('trials:crcUpload:action:delete')"
              @click="handleRemoveFile(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; padding: 10px 0px">
        <span style="margin-right: 10px">{{
          $store.state.trials.uploadTip
        }}</span>
        <el-button
          size="small"
          type="primary"
          :disabled="selectArr.length == 0"
          :loading="btnLoading"
          @click="beginUpload"
        >
          {{ $t('trials:uploadNonDicoms:action:upload') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getIRUploadTaskNoneDicomStudyList,
  deleteTaskStudy,
} from '@/api/load.js'
import { preArchiveStudy, uploadNoneDicomFile } from '@/api/trials'
import store from '@/store'
import { getToken } from '@/utils/auth'
let defaultSearchData = () => {
  return {
    SubjectId: null,
    TrialReadingCriterionId: null,
    SubjectCode: null,
    Asc: false,
    SortField: 'TaskBlindName',
  }
}
export default {
  name: 'nonedicomFile',
  props: {
    SubjectId: {
      type: String,
      default: '',
    },
    SubjectCode: {
      type: String,
      default: '',
    },
    Criterion: {
      type: Object,
      default: () => {
        return {}
      },
    },
    VisitTaskId: {
      type: String,
      default: '',
    },
    isUpload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      searchData: defaultSearchData(),
      imgObj: { url: '', visible: false, loading: false },
      uploadVisible: false,
      fileList: [],
      selectArr: [],
      successFileList: [],
      isFail: false,
      faccept: ['.jpg', '.jpeg', '.png', '.bmp', '.zip'],
      fCount: 0,
      btnLoading: false,
      currentRow: {},
      studyMonitorId: null,
      open: null,
    }
  },
  watch: {
    isFail() {
      if (this.isFail) {
        this.$confirm(
          this.$t('trials:visit:crcUpload:nomDicomFiles:failUpload'),
          {
            type: 'warning',
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t('common:button:confirm'),
            cancelButtonText: this.$t('common:button:cancel'),
          }
        )
          .then(() => {
            this.beginUpload()
          })
          .catch((err) => {
            this.btnLoading = false
            console.log(err)
          })
      }
    },
    btnLoading() {
      store.dispatch('trials/setUnLock', this.btnLoading)
    },
  },
  created() {
    this.getList()
  },
  beforeDestroy() {
    store.dispatch('trials/setUnLock', false)
  },
  methods: {
    async getList() {
      try {
        this.searchData.SubjectId = this.SubjectId
        this.searchData.TrialReadingCriterionId =
          this.Criterion.TrialReadingCriterionId
        this.searchData.SubjectCode = this.SubjectCode
        if (this.VisitTaskId) {
          this.searchData.VisitTaskId = this.VisitTaskId
        }
        this.loading = true
        let res = await getIRUploadTaskNoneDicomStudyList(this.searchData)
        this.loading = false
        if (res.IsSuccess) {
          this.list = res.Result
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    // 扫描待上传文件
    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}`
          let obj = {
            name: files[i].name,
            size: files[i].size,
            type: extendName.split('.')[1],
            status: 0,
            file: files[i],
            id: `${files[i].lastModified}${files[i].name}`,
            fileType: files[i].type,
            uploadFileSize: 0,
          }
          this.fileList.push(obj)
          this.$refs.filesTable.toggleRowSelection(obj, true)
        }
      }
      this.resetUploadForm()
    },
    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
          )
          let flag = this.successFileList.some((item) => item.id === row.id)
          if (flag) {
            this.successFileList.splice(
              this.successFileList.findIndex((item) => item.id === row.id),
              1
            )
          }
        })
        .catch(() => {})
    },
    resetUploadForm() {
      this.$nextTick(() => {
        this.$refs.uploadForm.reset()
      })
    },
    // 打开上传文件弹窗
    handleUpload(row) {
      this.fileList = []
      this.uploadVisible = true
      this.fCount = 0
      this.currentRow = { ...row }
    },
    resetFileDiaolg() {
      this.btnLoading = false
      this.uploadVisible = false
      this.selectArr = []
      this.successFileList = []
      this.OSSclient.close()
    },
    // 预览文件
    previewFile(row) {
      // window.open(row.FullFilePath, '_blank')
      // this.imgObj.url = row.FullFilePath || row.Path
      // this.imgObj.loading = true
      // this.imgObj.visible = true
      this.$refs[row.Path].$viewer.show()
    },
    // 预览单个检查下非Dicom文件
    handlePreviewNoneDicomFiles(row) {
      if (this.open) {
        this.open.close()
      }
      let trialId = this.$route.query.trialId
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showNoneDicoms?trialId=${trialId}&subjectVisitId=${row.SourceSubjectVisitId}&studyId=${row.Id}&visitTaskId=${row.VisitTaskId}&TokenKey=${token}`,
      })
      this.open = window.open(routeData.href, '_blank')
    },
    // 删除
    async remove(item) {
      try {
        let confirm = await this.$confirm(
          this.$t('upload:nonedicom:confirm:delMessage'),
          {
            type: 'warning',
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t('common:button:confirm'),
            cancelButtonText: this.$t('common:button:cancel'),
          }
        )
        if (confirm !== 'confirm') return
        let params = {
          VisitTaskId: item.VisitTaskId,
          IsDicom: false,
          NoneDicomStudyId: item.Id,
        }
        let res = await deleteTaskStudy(params)
        if (res.IsSuccess) {
          this.getList()
          this.$emit('update:isUpload', true)
          this.$message.success(
            this.$t('trials:uploadImage:message:delSuccess')
          )
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 获取待上传文件信息
    handleSelectionChange(selection) {
      this.selectArr = selection
    },
    // 开始上传文件
    async beginUpload() {
      this.btnLoading = true
      this.isFail = false
      const fileMaxSize = 1024 * 1024 * 1024 * 2 // 1G
      var currentFilesSize = 0
      this.selectArr.forEach((item) => {
        currentFilesSize += item.size
      })
      if (currentFilesSize / fileMaxSize > 1) {
        // 'Upload file size cannot exceed 1G'
        this.$alert(this.$t('trials:uploadNonDicoms:message:uploadSize'))
        this.btnLoading = false
      } else {
        this.selectArr.forEach((item) => (item.status = 0))
        let num = this.selectArr.length > 6 ? 6 : this.selectArr.length
        let funArr = []
        let res = await preArchiveStudy({
          subjectVisitId: this.currentRow.SourceSubjectVisitId,
          isDicom: false,
          FileCount: this.selectArr.length,
        })
        if (res.IsSuccess) {
          this.studyMonitorId = res.Result
          for (let i = 0; i < num; i++) {
            funArr.push(this.handleUploadTask(this.selectArr, i))
          }
          if (funArr.length > 0) {
            let res = await Promise.all(funArr)
          }
        } else {
          this.isFail = true
        }
      }
    },
    // 并发上传
    async handleUploadTask(arr, index) {
      if (!this.uploadVisible) return
      let file = this.fileList.filter((item) => item.id === arr[index].id)[0]
      file.status = 1
      let path = `/${this.$route.query.trialId}/TaskImage/${
        this.currentRow.SubjectId
      }/${this.currentRow.VisitTaskId}/${this.$guid()}${file.name
        .substring(file.name.lastIndexOf('.'))
        .toLocaleLowerCase()}`
      file.curPath = path
      const fileData = await this.fileToBlob(file.file)
      let res = await this.fileToOss(path, fileData, file)
      if (res) {
        file.status = 2
        this.successFileList.push({
          fileName: file.name,
          filePath: this.$getObjectName(res.url),
          fileFize: file.size,
          fileType: file.fileType,
        })
        let flag = arr.every((item) => item.status === 2)
        if (flag) {
          let RecordPath = await this.uploadRecord(arr)
          return this.submitFile(this.successFileList, RecordPath)
        }
      } else {
        file.status = 3
      }
      let flag = arr.every((item) => item.status > 1)
      if (flag) {
        let failFileList = arr.filter((item) => item.status === 3)
        if (failFileList && failFileList.length > 0) {
          let RecordPath = await this.uploadRecord(arr)
          this.$refs.filesTable.clearSelection()
          failFileList.forEach((row) => {
            row.uploadFileSize = 0
            this.$refs.filesTable.toggleRowSelection(row)
          })
          this.isFail = true
          this.submitFile(this.successFileList, RecordPath, true)
          return false
        }
      }
      let ind = arr.findIndex((item) => item.status === 0)
      if (ind >= 0) {
        return this.handleUploadTask(arr, ind)
      } else {
        return false
      }
    },
    // file上传到oss
    async fileToOss(path, file, item) {
      try {
        let res = await this.OSSclient.multipartUpload(
          {
            path,
            file,
            speed: true,
          },
          (percentage, checkpoint, lastPer) => {
            item.uploadFileSize += checkpoint.size * (percentage - lastPer)
            if (item.uploadFileSize > file.fileSize) {
              item.uploadFileSize = file.fileSize
            }
          }
        )
        if (res) {
          return res
        } else {
          return false
        }
      } catch (err) {
        console.log(err)
        return false
      }
    },
    // 非Dicom文件上传归档
    submitFile(uploadedFileList, RecordPath, isReLoad = false) {
      if (!this.uploadVisible) return
      this.btnLoading = true
      var params = {
        trialId: this.$route.query.trialId,
        subjectVisitId: this.currentRow.SourceSubjectVisitId,
        noneDicomStudyId: this.currentRow.Id,
        studyMonitorId: this.studyMonitorId,
        VisitTaskId: this.currentRow.VisitTaskId,
        uploadedFileList: uploadedFileList,
      }
      if (RecordPath) {
        params.RecordPath = RecordPath.path
        params.FailedFileCount = RecordPath.Record.Failed.length
      }
      uploadNoneDicomFile(params)
        .then((res) => {
          if (!isReLoad) {
            this.resetFileDiaolg()
          }
          this.getList()
          this.$emit('update:isUpload', true)
          // 刷新父组件列表
          this.$emit('getList')
          this.$message.success(
            this.$t('trials:uploadNonDicoms:message:uploadedSuccessfully')
          )
        })
        .catch(() => {
          this.btnLoading = false
        })
    },
    // 上传提交记录
    uploadRecord(arr) {
      return new Promise(async (resolve) => {
        try {
          let Record = {
            Failed: [],
            Existed: [],
            Uploaded: [],
            FileCount: arr.length,
          }
          arr.forEach((item) => {
            let file = this.fileList.find((data) => data.id === item.id)
            if (file.status === 2) {
              Record.Uploaded.push(file.curPath)
            }
            if (file.status === 3) {
              Record.Failed.push(file.curPath)
            }
          })
          let text = JSON.stringify(Record)
          let logJsonBlob = this.generateTxtFile(text)
          let logJsonObjectName = `/${this.$route.query.trialId}/TaskImage/${this.currentRow.SubjectId}/${this.currentRow.VisitTaskId}/${this.studyMonitorId}.txt`
          let logRes
          try {
            logRes = await this.OSSclient.put(logJsonObjectName, logJsonBlob)
            if (logRes && logRes.url) {
              resolve({ path: this.$getObjectName(logRes.url), Record })
            } else {
              resolve(false)
            }
          } catch (e) {
            resolve(false)
          }
        } catch (err) {
          console.log(err)
          resolve(false)
        }
      })
    },
    generateTxtFile(text) {
      let blob = new Blob(['\ufeff', text], { type: 'text/plain' })
      return blob
    },
  },
}
</script>
<style lang="scss" scoped>
.top {
  margin: 10px 0;
}
.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: #428bca;
  border-color: #428bca;
  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用来控制该标签的点击穿透事件
  }
}
.tip {
  display: flex;
  align-items: flex-start;
  margin-top: 5px;
  i {
    margin: 3px 5px 0 0;
  }
}
</style>