<template>
  <div class="inputs" ref="inputs" style="width: 100%;">
    <ht-file
      :key="refreshTime"
      v-model="inputVal"
      :name="inputName"
      :permission="permission_sub"
      :size="size"
      :limit="limits"
      :validate="inputValidate"
      :multiple="multiple"
      :accept="acceptFile"
      :propConfList="propConfList"
      :actionUrl="actionUrl"
      :header="header"
      :beforeUpload="beforeAvatarUpload"
      :onSuccess="onSuccess"
      :previewable="previewAble"
      :downloadable="downloadAble"
      :isSimple="simplicity"
      ref="upload"
      @download="download"
      @preview="preview"
      :class="{htfile__readonly: permission_sub === 'r'}"
    />
    <!-- @before-upload="beforeAvatarUpload" -->
    <!-- 预览压缩文件-->
    <FilePreview ref="filePreview" />
  </div>
</template>
<script>
import {mapState} from 'vuex'
import utils from '@/utils.js'
import req from '@/request.js'
import sub_pio_mixin from '@/sub-permission-mixin.js'
import FilePreview from '@/components/common/FilePreview.vue'
import {Message} from 'element-ui'
export default {
  name: 'eip-attachment',
  components: {FilePreview},
  props: [
    'validate',
    'value',
    'name',
    'permission',
    'size',
    'limit',
    'multiple',
    'accept',
    'propConf',
    'allowPreview',
    'allowDownload',
    'simplicity'
  ],
  mixins: [sub_pio_mixin], //混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission_sub）
  data() {
    return {
      limits: 9999,
      propConfList: [],
      inputVal: this.value,
      refreshTime: new Date().getTime(),
      src: '',
      fileId: '',
      fileTree: '',
      iframeSrc: '',
      acceptFile: '',
      newValidate: null,
      actionUrl: window.context.portal + '/system/file/v1/upload'
    }
  },
  computed: mapState({
    inputValidate: function() {
      if (this.newValidate) {
        return this.newValidate
      }
      var validateObj = this.$store.state.index.validate
      return utils.addRequiredOrNot(
        this.permission_sub,
        this.validate,
        validateObj,
        this
      )
    },
    header: state => {
      return {Authorization: `Bearer ${state.login.currentUser.token}`}
    },
    //actionUrl: function() {
    //  return window.context.portal + "/system/file/v1/upload";
    //},
    inputName: function() {
      let labeldesc = ''
      if (
        this.$slots &&
        this.$slots.labeldesc &&
        this.$slots.labeldesc[0].children &&
        this.$slots.labeldesc[0].children[0].text
      ) {
        labeldesc = this.$slots.labeldesc[0].children[0].text
        return this.name ? this.name : utils.getName() + '-' + labeldesc
      } else {
        return this.name ? this.name : utils.getName()
      }
    },
    previewAble: function() {
      if (this.permission_sub != 'w' && !this.allowPreview) {
        return false
      }
      return true
    },
    downloadAble: function() {
      if (this.permission_sub != 'w' && !this.allowDownload) {
        return false
      }
      return true
    }
  }),
  watch: {
    inputVal(val) {
      this.$emit('input', val)
    },
    value(val) {
      this.inputVal = val
      setTimeout(() => {
        this.refreshTime = new Date().getTime()
      }, 300)
    }
  },
  mounted() {
    if (this.limit) {
      this.limits = Number(this.limit)
    }
    try {
      const formInst = utils.getOnlineFormInstance(this)
      if (formInst.flowKey) {
        this.actionUrl = this.actionUrl + '?flowKey=' + formInst.flowKey
      }
    } catch (error) {}
  },
  beforeDestroy() {},
  destroyed() {},
  created() {
    if (this.propConf) {
      let list = JSON.parse(this.propConf)
      list.forEach(element => {
        if (element.desc) {
          if (element.requried) {
            element.inputValidate = 'required:true'
          }
          this.propConfList.push(element)
        }
      })
    }
    if (this.accept) {
      this.acceptFile = '.' + this.accept.split(',').join(',.')
    }
    this.$validator = this.$root.$validator
  },
  methods: {
    onSuccess(file) {},
    beforeAvatarUpload(file) {
      if (!this.accept || typeof this.accept == 'undefined') {
        return true
      }
      // 文件类型限制
      const name = file.name ? file.name : ''
      const ext = name
        ? name.substr(name.lastIndexOf('.') + 1, name.length)
        : true
      const isExt = this.accept.indexOf(ext) < 0
      if (isExt) {
        if (this.accept == '' || this.accept == undefined) {
          this.$message.error('请配置可上传文件的格式!')
        } else {
          this.$message.error('上传的附件只能是 ' + this.accept + '格式!')
        }
      }
      return !isExt
    },
    download(file) {
      if (!file.response && !file.id) {
        this.$message.warning('请稍后再试！')
        return
      }
      let fileId = ''
      if (file.id) {
        fileId = file.id
      } else {
        fileId = file.response.fileId
      }
      req.download('${portal}/system/file/v1/downloadFile?fileId=' + fileId)
    },
    preview(files) {
      if (!files.response && !files.id) {
        this.$message.warning('请稍后再试！')
        return
      }
      if (files.id) {
        let obj = {}
        obj.id = files.id
        obj.name = files.name
        obj.size = files.size
        this.$refs.filePreview.preview(obj)
      } else {
        var fileData = files.response
        let obj = {}
        obj.id = fileData.fileId
        obj.name = fileData.fileName
        obj.size = fileData.size
        this.$refs.filePreview.preview(obj)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] ::v-deep .el-input__inner,
div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
  border-color: #f56c6c;
}
.htfile__readonly {
  ::v-deep .file-list__wrap {
    margin-top: 2px;
  }
}
</style>
