<template>
  <div v-if="initField" class="ibps-file-image">
    <div>
      <van-field
        :disabled="disabled"
        :readonly="readonly"
        :label-class="labelClass"
        label-align="left"
        input-align="left"
        class="image_label"
      >
        <template #label>
          {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
        </template>
        <template #right-icon>
          <span v-if="limit">{{ (uploadType === 'attachment'?attachmentFlies.length:selectorValue.length)+'/'+limit }}</span>
        </template>
      </van-field>
    </div>
    <van-field
      v-if="initField"
      ref="input"
      v-model="inputValue"
      :name="name"
      :border="border"
      :disabled="disabled"
      :readonly="readonly"
      :clearable="clearable"
      :clickable="clickable"
      :is-link="isLink"
      :error="error"
      :error-message="errorMessage"

      :arrow-direction="arrowDirection"
      :label-class="labelClass"
      :label-width="labelWidth"
      :label-align="labelAlign"
      input-align="left"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="editable?rules:null"
    >
      <template #label />
      <template #input>
        <!-- 默认上传 -->
        <van-uploader
          v-if="uploadType === 'default'"
          ref="fileUploader"
          :disabled="readonly"
          :file-list="selectorValue"
          :max-size="maxSize"
          :accept="accept"
          :deletable="!readonly"
          :multiple="multiple"
          :max-count="limit"
          :preview-size="previewSize"
          :before-read="onBeforeRead"
          :before-delete="onDeleteRead"
          :after-read="onAfterRead"
          class="image-default-uploader"
        >
          <template #preview-cover="preview">
            <div v-if="$utils.isNotEmpty(tip)" class="preview-cover van-ellipsis">{{ tip }}</div>
            <div v-if="!readonly" class="preview-cover van-ellipsis van-uploader__preview-delete down-img" @click.stop="onDownEven(preview)">
              <i class="van-icon van-icon-down  van-uploader__preview-delete-icon" />
            </div>
          </template>
        </van-uploader>
        <!--附件上传-->
        <div v-if="uploadType === 'attachment'" class="image-attachment ">
          <van-uploader
            v-if="attachmentFlies.length>0"
            :max-size="maxSize"
            :deletable="!readonly"
            :before-delete="onDeleteRead"
            :file-list="attachmentFlies"
            class="image-attachment-uploader"
          >
            <template #preview-cover="preview">
              <div v-if="$utils.isNotEmpty(tip)" class="preview-cover van-ellipsis">{{ tip }}</div>
              <div v-if="!readonly" class="preview-cover van-ellipsis van-uploader__preview-delete down-img" @click.stop="onDownEven(preview)">
                <i class="van-icon van-icon-down  van-uploader__preview-delete-icon" />
              </div>
            </template>
          </van-uploader>
          <div v-if="!readonly">
            <div v-if="$utils.isEmpty(limit)||attachmentFlies.length<limit" class="image-attachment">
              <div class="van-uploader__upload" @click.stop="onClick">
                <i class="van-icon van-icon-photograph van-uploader__upload-icon" />
              </div>
            </div>
          </div>
        </div>
        <van-popup
          v-model="showPopup"
          class="ibps-fullscreen-popup"
          position="bottom"
          get-container="body"
        >
          <ibps-picker-toolbar
            :title="title"
            @cancel="onCancel"
            @title="onTitle"
            @confirm="onConfirm"
          />
          <div class="ibps-fixed-navbar">
            <van-tabs v-model="activeTab" @click="onTabClick">
              <van-tab :title="$t('components.uploader.uploadingTitle')">
                <div class="ibps-p-15">
                  <van-uploader
                    :after-read="onAfterRead"
                    :before-read="onBeforeRead"
                    :accept="accept"
                    :max-size="maxSize"
                    :multiple="multiple"
                  >
                    <van-button plain block type="info" icon="add-o">请上传文件</van-button>
                  </van-uploader>
                </div>
                <!--正在上传--->
                <van-checkbox-group ref="uploadingCheckboxGroup" v-model="checkbox" :max="limit-attachmentFlies.length">
                  <van-cell-group>
                    <van-cell
                      v-for="(item,index) in uploadingFiles"
                      :key="item[valueKey]+index"
                      clickable
                    >
                      <van-checkbox
                        slot="icon"
                        ref="uploadingCheckboxes"
                        :name="item[valueKey]"
                        style="overflow: unset;"
                      />
                      <template #title>
                        <ibps-file
                          :file="item"
                          :file-ext-key="fileExtKey"
                          :file-size-key="fileSizeKey"
                          :label-key="labelKey"
                        />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-checkbox-group>
              </van-tab>
              <van-tab :title="$t('components.uploader.uploadedTitle')">
                <van-sticky :offset-top="45">
                  <van-pagination
                    v-show="pagination.totalCount >0"
                    v-model="pagination.page"
                    :total-items="pagination.totalCount"
                    :items-per-page="pagination.limit"
                    :page-count="pagination.totalPages"
                    force-ellipses
                    @change="loadUploadedFiles"
                  />
                </van-sticky>

                <!--已上传--->
                <van-checkbox-group
                  ref="uploadedCheckboxGroup"
                  v-model="checkbox"
                  :max="1"
                >
                  <van-cell
                    v-for="(item,index) in uploadedFiles"
                    :key="item[valueKey]+index"
                    clickable
                    @click.stop="checkUploadedFiles(item,index)"
                  >
                    <template #icon>
                      <van-checkbox
                        ref="uploadedCheckboxes"
                        :name="item[valueKey]"
                        @change.stop="(e)=>changeUploadedCheckbox(item,index)"
                      />
                    </template>
                    <template #title>
                      <ibps-file
                        :file="item"
                        :file-ext-key="fileExtKey"
                        :file-size-key="fileSizeKey"
                        :label-key="labelKey"
                      />
                    </template>
                  </van-cell>
                </van-checkbox-group>
              </van-tab>
            </van-tabs>
          </div>
        </van-popup>
      </template>
    </van-field>
  </div>

</template>
<script>
import { get, transfer, uploadFile, previewFile, queryPageList } from '@/api/platform/file/attachment'
import FieldMixin from '@/mixins/field'
// import { remoteRequest, remoteTransRequest } from '@/utils/remote'
import { remoteRequest } from '@/utils/remote'
import { downloadFile } from '@/business/platform/file/utils'
import { TRANSFER_DATA } from '@/constant'
import i18n from '@/utils/i18n'
import IbpsFile from '../uploader/file'
import ActionUtils from '@/utils/action'
import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'

export default {
  name: 'ibps-image',
  components: {
    IbpsFile,
    IbpsPickerToolbar
  },
  mixins: [FieldMixin],
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    maxCount: Number,
    maxSize: [Number, String],
    previewSize: Number,
    valueKey: {
      type: String,
      default: 'id'
    },
    labelKey: {
      type: String,
      default: 'fileName'
    },
    fileExtKey: {
      type: String,
      default: 'ext'
    },
    fileSizeKey: {
      type: String,
      default: 'totalBytes'
    },
    pathKey: {
      type: String,
      default: 'filePath'
    },

    uploadType: String, // 图片控件类型
    tip: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '*'
    },
    fileFormates: { // 文件后缀【自定义格式】
      type: Array
    },
    limit: { // 文件上传个数
      type: Number
    },

    store: { // 返回值类型  array: 数组。string 字符串类型
      type: String,
      default: 'json',
      validator: function(value) {
        // value:只存value,all:存value和label
        // return ['all', 'value'].indexOf(value) !== -1
        // json ->是存储json字符串 [ {id:xxxx,fileName:xxxx}]
        // id -> xxxxxxxxx,xxx
        // path -> file\xxx\xxxxx
        return ['json', 'id', 'path'].indexOf(value) !== -1
      }
    },
    storeSeparator: { // 返回值分割符，对于设置字符串类型的分隔符
      type: String,
      default: ','
    }
  },
  data() {
    return {
      selectorValue: [],
      showOverlay: false,
      showPopup: false,
      activeTab: 0,
      curFileType: '',
      fileTypeList: [],
      cacheData: {},

      checkbox: [], // 选中的附件id
      uploadingFiles: [], // 正在上传的附件列表
      uploadedFiles: [], // 已上传的附件列表

      attachmentFlies: [], // 附件上传文件集合
      pagination: {
        limit: 20,
        page: 1,
        totalCount: 0,
        totalPages: 0
      },

      showPreviewPopup: false,
      previewFileList: {},
      showDetailPopup: false,
      verifyPass: true,
      initField: true
    }
  },
  computed: {
    title() {
      const length = this.checkbox.length
      if (this.multiple) {
        return length > 0 ? i18n.t('components.checkbox.title', { length: length }) : ''
      } else {
        if (this.$utils.isEmpty(this.checkbox)) {
          return ''
        }
        const checked = this.checkbox[length - 1]
        return this.$utils.isNotEmpty(checked) ? this.cacheData[checked] ? this.cacheData[checked][this.labelKey] : '' : ''
      }
    },
    fileData() {
      const { selectorValue, attachmentFlies } = this
      return {
        selectorValue,
        attachmentFlies
      }
    }
  },
  watch: {
    value: {
      handler() {
        this.checkbox = []
        this.$nextTick(() => { this.initData() })
        this.setInputValue()
      },
      deep: true,
      immediate: true
    },
    checkbox: {
      handler(val, oldVal) {
        this.filterFitTypeFiles(val, oldVal)
      },
      deep: true,
      immediate: true
    },
    fileData: {
      // 校验
      handler(val) {
        if (this.uploadType === 'default') {
          this.inputValue = this.$utils.isNotEmpty(val.selectorValue) ? JSON.stringify(val.selectorValue) : ''
        } else {
          this.inputValue = this.$utils.isNotEmpty(val.attachmentFlies) ? JSON.stringify(val.attachmentFlies) : ''
        }
        setTimeout(() => {
          this.validate()
        }, 10)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    setInputValue() {
      const val = this.value
      this.inputValue = this.$utils.isNotEmpty(val) ? JSON.stringify(val) : ''
      setTimeout(() => {
        this.validate()
      }, 10)
    },
    // ==============点击=====
    onClick() {
      // 重复文件无法上传，校验无法去除。
      if (this.readonly) { return }
      if (this.uploadType === 'attachment') {
        this.showPopup = true
        // 还原原来的数据
        this.activeTab = 0
        this.uploadingFiles = [] // 正在上传的文件
        this.uploadedFiles = []// 已上传的文件
        this.checkbox = [] // 初始化附件上传
        this.attachmentFlies.forEach(a => {
          this.checkbox.push(a.id)
        })
      }
    },
    onCancel() {
      this.selectorValue = []
      this.checkbox = []
      this.showPopup = false
    },
    onTitle() {
      if (!this.multiple) { return }
      this.showDetailPopup = true
    },
    onDownEven(item) {
      downloadFile(item)
    },
    onConfirm() {
      if (this.$utils.isEmpty(this.checkbox)) {
        this.$notify({
          type: 'warning',
          message: '请上传文件或选择已上传的文件！'
        })
        return
      }
      if (this.attachmentFlies.length + this.checkbox.length > this.limit) {
        this.$notify({
          type: 'warning',
          message: '文件上传数量的超出限制！'
        })
        return
      }
      this.emitInput()
      this.showPopup = false
      // 校验更新初始化
      this.initField = false
      setTimeout(() => {
        this.initField = true
      }, 10)
    },
    emitInput() {
      this.$emit('input', this.getStoreValue(this.getCheckValue()))
    },
    getCheckValue() {
      const selectorValue = []
      this.checkbox.forEach(v => {
        selectorValue.push(this.cacheData[v])
      })
      return this.multiple ? selectorValue : selectorValue[0]
    },
    onTabClick(index) {
      // 加载已上传的附件
      if (this.activeTab === 1) {
        // 没有加载文件类型
        // this.loadFileType()
        this.loadUploadedFiles()
      }
    },
    loadUploadedFiles() {
      const params = ActionUtils.formatParams({ 'Q^TYPE_ID_^SL': this.fileType || '' }, this.pagination)
      this.showOverlay = true
      queryPageList(params).then(response => {
        const data = response.data
        this.uploadedFiles = data.dataResult
        this.setCacheFiles(this.uploadedFiles) // 缓存文件
        this.pagination = data.pageResult
        this.showOverlay = false
      }).catch((e) => {
        console.error(e)
        this.showOverlay = false
      })
    },
    changeUploadedCheckbox(file, i) {
      const index = this.checkbox.findIndex(c => c === file.id)
      const checked = this.$refs['uploadedCheckboxes'][i].checked
      const fileName = file.fileName + '.' + file.ext
      const fileSize = file.totalBytes
      this.verifyPass = true
      // 已选文件格式判断
      const ext = this.getExtName(fileName)
      const checkTrue = this.checkFileFormat(fileName, fileSize, ext)
      if (!checkTrue) {
        index > -1 ? this.checkbox.splice(index, 1) : null
        return
      }
      if (this.$utils.isEmpty(this.limit)) {
        checked ? this.checkbox.splice(index, 1) : this.checkbox.push(file.id)
      } else {
        checked ? this.checkbox.splice(index, 1) : this.checkbox.push(file.id)
        if (this.checkbox.length > this.limit) {
          this.checkbox.splice(0, 1)
        }
      }
    },
    // 在线文件 行点击
    checkUploadedFiles(file, i, e) {
      this.changeUploadedCheckbox(file, i)
    },
    // 线上文件勾选时得文件类型筛选。【勾选框勾选】
    filterFitTypeFiles(newVal, oldVal) {
      if (this.activeTab === 0) return
      let newFiles
      let newFilesId
      if (this.$utils.isEmpty(oldVal)) {
        newFiles = this.cacheData[newVal[0]]
        newFilesId = newVal[0]
      } else {
        for (let n = 0; n < newVal.length; n++) {
          for (let o = 0; o < oldVal.length; o++) {
            if (newVal[n] !== oldVal[o]) {
              newFiles = this.cacheData[newVal[n]]
              newFilesId = newVal[n]
              break
            }
          }
        }
      }
      if (this.$utils.isEmpty(newFilesId)) return
      const index = this.checkbox.findIndex(c => c === newFilesId)
      const fileName = newFiles.fileName + '.' + newFiles.ext
      // 已选文件格式判断
      const ext = this.getExtName(fileName)
      if (this.accept !== '*' && (!ext || !this.accept.includes('.' + ext))) {
        this.$notify({
          type: 'warning',
          message: '请上传指定类型' + this.accept
        })
        index > -1 ? this.checkbox.splice(index, 1) : null
        return
      }
      // 自定义格式校验
      if (this.$utils.isNotEmpty(this.fileFormates) &&
          (!ext || !this.fileFormates.includes('.' + ext))) {
        const fileType = this.fileFormates.join(',')
        this.$notify({
          type: 'warning',
          message: '请上传指定类型' + '[' + fileType + ']'
        })
        index > -1 ? this.checkbox.splice(index, 1) : null
        return
      }
      // 只能指定个数  删除第一个
      // if (newVal.length > this.limit) {
      //   this.checkbox.splice(0, 1)
      // }
    },
    // ===================已上传===============
    checkFileFormat(fileName, fileSize, fileExt) {
      if (this.accept !== '*' && (!fileExt || !this.accept.includes('.' + fileExt))) {
        this.$notify({
          type: 'warning',
          message: '请上传指定类型' + this.accept
        })
        return false
      }
      // 自定义格式校验
      if (this.$utils.isNotEmpty(this.fileFormates) &&
          (!fileExt || !this.fileFormates.includes('.' + fileExt))) {
        const fileType = this.fileFormates.join(',')
        this.$notify({
          type: 'warning',
          message: '请上传指定类型' + '[' + fileType + ']'
        })
        return false
      }
      // 上传大小
      if (this.$utils.isNotEmpty(this.maxSize) &&
         fileSize > this.maxSize) {
        this.$notify({
          type: 'warning',
          message: `[${fileName}]文件大小的超出上传限制！`
        })
        return false
      }
      return true
    },
    /**
     * 初始化数据
     */
    initData() {
      const data = this.getArrayValue(this.value)
      this.selectorValue = []
      if (this.$utils.isEmpty(data)) {
        return
      }
      data.forEach(v => {
        if (this.cacheData[v]) {
          this.setSelectorValue(v)
        } else {
          this.getDataInfo(v)
        }
      })
      // 校验更新初始化
      this.initField = false
      setTimeout(() => {
        this.initField = true
      }, 10)
    },
    setCacheFiles(files) {
      if (this.$utils.isEmpty(files)) { return }
      files.forEach((v) => {
        this.cacheData[v[this.valueKey]] = v
      })
    },
    // 正在上传
    setSelectorValue(v) {
      const file = this.cacheData[v]
      const fileName = file.fileName + '.' + file.ext
      const fileSize = file.totalBytes
      const fileId = file.id
      const res = {
        [this.valueKey]: fileId,
        [this.labelKey]: this.gerFileName(fileName),
        [this.fileSizeKey]: fileSize,
        [this.fileExtKey]: this.getExtName(fileName),
        [this.pathKey]: file[this.pathKey],
        url: this.getImageUrl(fileId),
        isImage: true
      }
      if (this.uploadType === 'attachment') {
      // 附件上传
        this.attachmentFlies.push(res)
        const attachmentFlies = this.attachmentFlies
        for (let i = 0, len = attachmentFlies.length; i < len; i++) {
          for (let j = i + 1; j < len; j++) {
            if (attachmentFlies[i].id === attachmentFlies[j].id) {
              attachmentFlies.splice(j, 1)
              // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
              len--
              j--
            }
          }
        }
      } else {
      // 直接上传
        this.selectorValue.push(res)
      }
    },
    /**
     * 获得数组数据
     */
    getArrayValue(value, bindId) {
      if (this.$utils.isEmpty(value)) {
        return []
      }
      if (this.store === 'json') { // json
        return this.parseJsonData(value)
      } else if (this.store === 'id') { // id
        // 可能是json数据[之前存储的josn格式]
        if (this.$utils.isJSON(value)) {
          return this.parseJsonData(value)
        } else {
          return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
        }
      } else if (this.store === 'bind') { // 绑定id
        if (this.$utils.isEmpty(bindId)) {
          return []
        }
        return bindId.split(this.storeSeparator)
      } else { // array
        return value.map((d) => {
          return d[this.valueKey]
        })
      }
    },
    parseJsonData(value) {
      try {
        const data = this.$utils.parseData(value)
        const result = []
        if (Array.isArray(data)) {
          data.forEach(d => {
            const node = d[this.valueKey]
            if (node) result.push(node)
          })
        } else {
          if (this.$utils.isPlainObject(data)) {
            result.push(data[this.valueKey])
          } else {
            const realData = this.$utils.isString(value) ? value.split(this.storeSeparator) : []
            realData.forEach(v => {
              result.push(v)
            })
          }
        }
        return result
      } catch (error) {
        console.warn(error)
        return []
      }
    },
    getStoreValue(value) {
      const res = []
      if (this.store === 'json') { // json
        if (this.$utils.isEmpty(value)) {
          return ''
        }
        if (this.multiple) {
          value.forEach(v => {
            const o = {}
            o[this.valueKey] = v[this.valueKey]
            o[this.labelKey] = v[this.labelKey]
            res.push(o)
          })
          return JSON.stringify(res)
        } else {
          const o = {}
          o[this.valueKey] = value[this.valueKey]
          o[this.labelKey] = value[this.labelKey]
          return JSON.stringify(o)
        }
      } else if (this.store === 'id') { // id
        if (this.$utils.isEmpty(value)) {
          return ''
        }
        if (this.multiple) {
          value.forEach(v => {
            res.push(v[this.valueKey])
          })
        } else {
          res.push(value[this.valueKey])
        }
        return res.join(this.storeSeparator)
      } else if (this.store === 'bind') { // 绑定id
        const res = []
        const bindIdValue = []
        value.forEach(v => {
          bindIdValue.push(v[this.valueKey])
          res.push(v[this.labelKey])
        })
        this.bindIdValue = bindIdValue.join(this.storeSeparator)

        return res.join(this.storeSeparator)
      } else { // 数组 array
        return value || []
      }
    },
    /**
    * 通过ID获取数据
     */
    getDataInfo(id) {
      if (TRANSFER_DATA === 'transfer') {
        this.getTransferData(id)
      } else {
        this.getRemoteData(id)
      }
    },
    getTransferData(id) {
      // remoteTransRequest('attachment', id).then(idset => {
      //   const ids = Array.from(idset)
      //   remoteRequest('attachmentIds', ids, () => {
      //     return this.getRemoteTransFunc(ids)
      //   }).then(response => {
      //     const responseData = response.data
      //     const data = responseData[id]
      //     this.setRemoteData(data)
      //   }).catch(() => {
      //   })
      // })
      const paramsId = JSON.parse(JSON.stringify(id))
      this.getRemoteTransFunc([paramsId]).then(response => {
        const responseData = response.data
        const data = responseData[id]
        this.setRemoteData(data)
      }).catch(() => {
      })
    },
    getRemoteTransFunc(ids) {
      return new Promise((resolve, reject) => {
        transfer({
          'ids': ids
        }).then(response => {
          resolve(response)
        }).catch((error) => {
          reject(error)
        })
      })
    },

    getRemoteData(id) {
      remoteRequest('attachment' + this.valueKey, id, () => {
        return this.getRemoteByIdFunc(id)
      }).then(response => {
        const data = response.data
        this.setRemoteData(data)
      }).catch(() => {
      })
    },
    getRemoteByIdFunc(id) {
      return new Promise((resolve, reject) => {
        get({
          attachmentId: id
        }).then(response => {
          resolve(response)
        }).catch(() => {
        })
      })
    },
    setRemoteData(data) {
      if (this.$utils.isNotEmpty(data)) {
        this.cacheData[data[this.valueKey]] = data
        this.setSelectorValue(data[this.valueKey])
      }
    },

    onBeforeRead(file) {
      const size = file.size
      const ext = this.getExtName(file.name)
      if (this.uploadType === 'default' && this.selectorValue.length === this.limit) {
        this.$notify({
          type: 'warning',
          message: '文件上传数量的超出限制！'
        })
        return false
      }
      // 上传大小
      if (this.$utils.isNotEmpty(this.maxSize) &&
         size > this.maxSize) {
        this.$notify({
          type: 'warning',
          message: '[' + file.name + ']文件大小的超出上传限制！'
        })
        return false
      }
      // 上传格式
      if (this.$utils.isNotEmpty(this.fileFormates) &&
          (!ext || !this.fileFormates.includes('.' + ext))) {
        const fileType = this.fileFormates.join(',')
        this.$notify({
          type: 'warning',
          message: '请上传指定类型' + '[' + fileType + ']'
        })
        return false
      }
      this.$emit('before-read', file)
      return true
    },
    onDeleteRead(file, detail) {
      // TODO:内部数据变化调整对应数据结构。
      if (this.uploadType === 'default') {
        // 直接上传删除
        this.selectorValue.splice(detail.index, 1)
      } else {
        // 附件上传删除
        this.attachmentFlies.splice(detail.index, 1)
        if (this.$utils.isNotEmpty(this.attachmentFlies)) {
          this.checkbox = []
          this.attachmentFlies.forEach(a => {
            this.checkbox.push(a.id)
          })
        } else {
          this.checkbox = this.attachmentFlies
        }
      }
      // this.emitInput()
    },
    onAfterRead(file) {
      if (file.length > 0) {
        for (let i = 0; i < file.length; i++) {
          this.addFile(file[i])
        }
      } else {
        this.addFile(file)
      }
    },

    addFile(attachment) {
      // 上传文件用file
      const fileData = attachment.file
      const fileName = fileData.name
      const fileSize = fileData.size
      // 上传文件
      uploadFile(fileData).then(response => {
        const data = response.data
        const fileId = data.id
        const res = {
          [this.valueKey]: fileId,
          [this.labelKey]: this.gerFileName(fileName),
          [this.fileSizeKey]: fileSize,
          [this.fileExtKey]: this.getExtName(fileName),
          [this.pathKey]: data[this.pathKey],
          url: this.getImageUrl(fileId),
          isImage: true
        }
        if (this.uploadType === 'attachment') {
          this.checkbox.push(res.id) // 合并线上已选得附件
        } else {
          this.selectorValue.push(res)
          this.$emit('input', this.getStoreValue(this.selectorValue))
        }
        this.loadUploadedFiles()
        if (this.activeTab === 0) {
          const files = JSON.parse(JSON.stringify(this.uploadingFiles))
          files.push(res)
          this.uploadingFiles = JSON.parse(JSON.stringify(files)) // 正在上传列表数据
        }
      }).catch((e) => {
        console.error(e)
      })
    },
    // -------------------------
    getImageUrl(id) {
      return previewFile(id)
    },
    // 获取扩展名
    getExtName(name) {
      return name ? name.substring(name.lastIndexOf('.') + 1, name.length) : ''
    },
    // 获取文件名
    gerFileName(name) {
      return name ? name.substring(0, name.lastIndexOf('.')) : ''
    }
  }
}
</script>
<style lang="scss">
.ibps-file-image{
  .image_label{
    padding-bottom: 0;
  }
  .image-default-uploader,.image-attachment{
    display: flex;
    flex-wrap: wrap;
  }
  .van-uploader__upload{
    border-radius: 4px;
  }
}
.image-attachment-uploader{
  .van-uploader__upload{
    display: none;
  }
}
.image-default-uploader{
  .van-uploader__wrapper--disabled{
    opacity: 1;
  }
}
.image-default-uploader,
.image-attachment-uploader{
  .preview-cover {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .down-img{
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    width: 20px;
    height: 20px;
    padding: inherit;
    right: 22px;
  }
  .van-uploader__preview-delete{
    font-size: 16px;
    border-radius:0;
    width: 20px;
    height: 20px;
  }
  .preview-cover{
    padding: 0;
  }
  .van-uploader__preview-delete-icon{
    font-size: 22px;
  }
}
</style>
