<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 2px;" />
    </div>
    <div v-else>
      <a-form-model-item :prop="name+'downloadUrl'" :rules="{required: isRequired, message: message,trigger: 'blur',}">
        <input type="file" ref="fileElem" class="visually-hidden" @change="handleFiles">
        <a-button @click="fileSelect">
          <a-icon type="upload" />选择文件
        </a-button>
      </a-form-model-item>
    </div>
  </div>
</template>
<script>
const File = { fileName: null, downloadUrl: null, fileExplain: null, downloadId: null }
import documentView from '@/views/components/common/documentView'
export default {
  name: "FileUpload",
  components: {
    documentView
  },
  data () {
    return {

    };
  },
  props: {
    file: {
      type: Object,
      default: () => {
        return { ...File }
      }
    },
    isUpload: {
      type: Boolean,
      default () {
        return false
      }
    },
    isRequired: {
      type: Boolean,
      default () {
        return true
      }
    },
    format: {
      type: Array,
      default () {
        return []
      }
    },
    name: {
      type: String,
      default () {
        return 'fileobj'
      }
    },
    message: {
      type: String,
      default () {
        return '请上传附件'
      }
    },
  },
  created () {

  },
  methods: {
    fileSelect () {
      let fileElem = this.$refs['fileElem']
      if (fileElem) {
        fileElem.click()
      }
    },
    handleFiles () {
      let fileElem = this.$refs['fileElem']
      let files = fileElem.files
      if (files.length <= 0) {
        this.$message.error('未选中文件，请尝试重新选择')
        return
      }
      if (!this.fileCheck(files[0]))
        return
      if (this.isUpload) {
        this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
          if (data) {
            this.file.fileName = files[0].name
            this.file.downloadId = data.id
            this.file.downloadUrl = data.downloadUrl
          } else
            this.$message.error('上传失败')
        }).catch(() => {
          this.$message.error('上传失败')
        })
      } else {
        this.file.fileName = files[0].name
        this.file.downloadUrl = '/' + files[0].name
        this.$emit("beforeUpload", files[0]);
      }
    },
    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()
      if (!!this.format && this.format.length > 0) {
        var extList = this.format
        if (!extList.find((item) => item == fileType)) {
          this.$message.error('文件格式错误！')
          return false
        }
      }
      return true
    },
    deletefile () {
      this.$emit("cancel");
      if (this.isUpload) {
        this.$api.base.deletefile({ id: this.file.downloadId }).then(({ data = {} }) => {
          if (data) {
            this.file.fileName = null
            this.file.downloadUrl = null
            this.file.downloadId = null
          }
        }).catch(() => {
          this.$message.error('删除失败')
        })
      } else {
        this.file.fileName = null
        this.file.downloadUrl = null
        this.file.downloadId = null
      }
    },
    uploadHandle (file, fileName) {
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileName', fileName)
      return formData
    },
    downloadfile () {

    },
  },
  watch: {
    value: {
      handler (value) {

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