<template>
  <div v-loading="uploadLoading">
    <el-upload
      v-if="isEdit"
      action="/file/uploadFile"
      multiple
      :on-success="handleSuccess"
      :http-request="uploadFile"
      :before-upload="beforeUpload"
      :on-preview="clickFile"
      :on-change="fileListChange"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">上传文件</el-button>
    </el-upload>
    <template v-else>
      <div v-for="(item,index) in fileList" :key="item[urlKey]" class="fileItem">
        <div class="name_test">
          <span style="float:left;width: 250px;"><i class="el-icon-document" style="margin-right: 10px;" />{{ item[nameKey] }} </span>
        </div>
        <span class="optionStyle" style="float:left" @click="openFile(item[urlKey])">下载</span>
      </div>
    </template>
    <template v-if="isEdit">
      <div v-for="(item,index) in fileList" :key="item[urlKey]" class="fileItem">
        <div class="name_test">
          <span style="float:left;min-width: 250px;"><i class="el-icon-document" style="margin-right: 10px;" />{{ item[nameKey] }} </span>
        </div>
        <span class="optionStyle" style="float:left;margin-right:10px" @click="openFile(item[urlKey])">下载</span>
        <span class="optionStyle" style="float:left" @click="deleteList(index)">删除</span>
      </div>
    </template>
  </div>
</template>

<script>
import { upload } from '@/api/openPlatform/sdk'
export default {
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    urlKey: {
      type: String,
      default: 'url'
    },
    maxNumber: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      showImage: false,
      imagUrl: '',
      uploadLoading: false
    }
  },
  computed: {},
  watch: {
    fileList(value) {
      value.forEach(element => {
        if (!element) {
          this.fileList = []
          const err = { message: 'list类型错误，请检查是否有空洞' }
          throw err
        }
      })
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    deleteList(index) {
      this.fileList.splice(index, 1)
      this.$emit('update:fileList', this.fileList)
      // this.$forceUpdate()
    },
    async uploadFile(file) {
      if (this.maxNumber && this.fileList.length >= this.maxNumber) {
        this.$message({ type: 'warning', offset: 60, message: `最多上传${this.maxNumber}个文件` })
        return false
      }
      this.uploadLoading = true
      const formData = new FormData()
      formData.append('file', file.file)
      const bucket = 'fsmodel'
      formData.append('bucket', bucket)
      const content = await upload(formData)
      this.uploadLoading = false
      if (content.success) {
        this.$message({ type: 'success', offset: 60, message: '上传成功' })
        // this.fileList.splice(this.fileList.length, 1, { name: file.file.name, url: content.data })
        this.fileList.push({ [this.nameKey]: file.file.name, [this.urlKey]: content.data })
        this.$emit('update:fileList', this.fileList)
      }
    },
    beforeUpload(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
    //   const whiteList = ['png', 'jpg']
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$message({ message: '上传文件只能是 jpg/png格式', type: 'warning' })
    //     return false
    //   }
    },

    handleSuccess(response, file, fileList) {
      console.log('上传完毕')
      console.log(response)
      console.log(file)
      // console.log(fileList)
      // this.$refs.batchAddForm.validateField('file')
    },
    openFile(url) {
      window.open(url, '_blank')
    },
    clickFile(file) {
      this.openFile(file.url)
    },
    fileListChange(file, fileList) {
      // this.$emit('update:fileList', fileList)
    }
  }
}
</script>
<style lang="scss" scoped>
.optionStyle{
    cursor: pointer;
    color: rgb(42, 72, 241);

}
.fileItem{
  height: 40px;
  width: 100%;
}
.name_test{
      float: left;

    height: 40px;
    width: 80%;
  white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
