<template>
  <div class="upload-layout">
    <div v-if="file.downloadUrl" class="file-lay">
      <div>
        <document-view :fileUrl="file.downloadUrl" :fileName="file.fileName" :imageArray="[file.downloadUrl]"></document-view>
      </div>
      <a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(file)" style="margin: 0px 4px;" />
    </div>
    <div v-else>
      <a-form-model-item :prop="name +'.'+ index + '.downloadUrl'" :rules="{required: isRequired, message: '请上传附件',trigger: 'blur',}">
        <input type="file" :ref="name +'fileElem' + index" class="visually-hidden" @change="handleFiles(file, index)" />
        <a-button @click="fileSelect(index)"><a-icon type="upload" />选择文件</a-button>
      </a-form-model-item>
    </div>
  </div>
</template>
<script>
import documentView from '@/views/components/common/documentView'
export default {
  name: "fileLoad",
  components: {
    documentView
  },
  data () {
    return {
      isRequired: false
    };
  },
  props: {
    file: {
      type: Object,
      default: () => {
        return null
      }
    },
    name: {
      type: String,
      default: () => {
        return 'fileList'
      }
    },
    index: {
      type: Number,
      default () {
        return 0
      },
    },
    format: {
      type: Array,
      default () {
        return []
      }
    },
  },
  created () {
    if (this.file.isRequired != null && this.file.isRequired != undefined) {
      this.isRequired = this.file.isRequired
    }
  },
  methods: {
    deletefile (obj) {
      this.$api.base.deletefile({ id: obj.downloadId }).then(({ data = {} }) => {
        if (data) {
          obj.fileName = null
          obj.downloadUrl = null
          obj.downloadId = null
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    handleFiles (obj, index) {
      let fileElem = this.$refs[this.name + 'fileElem' + index]
      let files = fileElem.files
      if (files.length <= 0) {
        this.$message.error('未选中文件，请尝试重新选择')
        return
      }
      if (!this.fileCheck(files[0]))
        return
      this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
        if (data) {
          obj.fileName = files[0].name
          obj.downloadUrl = data.downloadUrl
          obj.downloadId = data.id
        } else
          this.$message.error('上传失败')
      }).catch(() => {
        this.$message.error('上传失败')
      })
    },
    fileCheck (file) {
      //判断是否小于1M
      let isLtSize = file.size < 1024 * 1024 * 15;
      if (!isLtSize) {
        this.$message.error('文件大小不能超过15M！');
        return false
      }
      if (!!this.format && this.format.length > 0) {
        var fileNames = file.name.split('.')
        var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
        var extList = this.format
        if (!extList.find((e) => e == fileType)) {
          this.$message.error('文件格式错误！')
          return false
        }
      }
      return true
    },
    uploadHandle (file, fileName) {
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileName', fileName)
      return formData
    },
    fileSelect (index) {
      let fileElem = this.$refs[this.name + 'fileElem' + index]
      if (fileElem) {
        fileElem.click()
      }
    },
    downloadfile () {

    },
  },
};
</script>
<style scoped lang="less">
.upload-layout {
  width: 100%;
  .file-lay {
    display: flex;
    align-items: center;
    margin: 0 0;
    > div:nth-child(1) {
      max-width: calc(100% - 22px);
    }
  }
  .visually-hidden {
    display: none !important;
  }
}
</style>