<template>
  <div v-if="file.downloadUrl" class="file-box">
    <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)" />
  </div>
  <div v-else>
    <a-form-model-item :prop="name +'.'+ index + '.downloadUrl'" :rules="{required: true, 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>
</template>
<script>
import documentView from '@/views/components/common/documentView'
export default {
  name: "fileLoad",
  components: {
    documentView
  },
  data () {
    return {
    };
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return null
      }
    },
    file: {
      type: Object,
      default: () => {
        return null
      }
    },
    name: {
      type: String,
      default: () => {
        return 'fileList'
      }
    },
    index: {
      type: Number,
      default () {
        return 0
      },
    },
  },
  created () {

  },
  methods: {
    deletefile (item) {
      this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => {
        if (data) {
          item.fileName = ''
          item.downloadUrl = ''
          item.downloadId = ''
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    handleFiles (item, 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) {
          item.fileName = files[0].name
          item.downloadUrl = data.downloadUrl
          item.downloadId = data.id
          console.log(item, data)
        } 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
      }
      // var fileNames = file.name.split('.')
      // var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
      // var extList = ['doc', 'docx', 'pdf']
      // if (!extList.find((item) => item == 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()
      }
    },
  },
  watch: {
    value: {
      handler (value) {

      },
    }
  }
};
</script>
<style scoped lang="less">
.upload-layout {
  display: inline-block;
  margin: 0 10px;
  height: 30px;
  line-height: 30px;

  .file-box {
    margin: 0 8px;
  }
  .visually-hidden {
    display: none !important;
  }
}
</style>