<template>
  <div
    class="form_upload"
    @click.stop="clickUploadEvent"
    v-loading.fullscreen.lock="loading"
    element-loading-text="数据上传中..."
  >
    <ul class="form_upload_img_box">
      <fileList-view
        ref="fileListView"
        :file="fileList"
        :fileListStyle="formUploadStyle"
        :fileListDraggable="uploadItemDraggable"
        :hideUploadDelete="hideUploadDelete"
        @form-upload-event="formUploadRemove"
        @dragend="dragend"
      >
        <template #fileListSlot>
          <el-upload
            ref="elUpload"
            class="form_upload_add"
            :accept="accept"
            :action="action"
            :on-success="formUploadSuccess"
            :on-error="formOnError"
            :before-upload="formBeforeUpload"
            :file-list="fileList"
            :show-file-list="false"
            :limit="limit"
            :multiple="multiple"
            :data="fileUploadPramas"
            :disabled="disabled"
            list-type="picture"
            :style="formUploadStyle"
          >
            <div class="form_upload_add_box">
              <i slot="default" class="el-icon-plus upload_icon"></i>
              <div class="upload__text">{{ uploadText }}</div>
            </div>
          </el-upload>
        </template>
      </fileList-view>
    </ul>
    <div v-if="!!formUploadTips" class="upload_tip">{{ formUploadTips }}</div>
  </div>
</template>

<script>
import fileListView from './baseView/fileList'
export default {
  name: 'form-upload-view',
  components: {
    fileListView
  },
  props: {
    /*只能上传一个文件，这个参数是自定义的,
        因为使用limit:1限制只能上传一个的话，
        再次上传不会替换原图，使用singleUpload则会
      */
    singleUpload: {
      type: Boolean
    },
    //是否可拖拽
    uploadItemDraggable: {
      type: Boolean
    },
    //  接受上传的文件类型
    accept: {
      type: String,
      default: '.jpg,.png,.gif'
    },
    // 上传提示文字
    formUploadTips: {
      type: String
    },
    // 是否禁用
    disabled: {
      type: Boolean
    },
    // 是否隐藏删除功能按钮
    hideUploadDelete: {
      type: Boolean
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean
    },
    // 最大允许上传个数
    limit: {
      type: Number
    },
    // 上传的文件列表
    files: {
      type: Array,
      default: () => []
    },
    // 文件列表的样式
    formUploadStyle: {
      type: [Object],
      default: () => ({
        height: '80px',
        width: '80px'
      })
    },
    // 上传框内的文字
    uploadText: {
      type: String,
      default: '上传图片'
    },
    // 上传时附带的额外参数
    uploadPramas: {
      type: Object,
      default: () => ({})
    },
    // 接口名称，用于拼接上传时附带的额外参数
    apiName: {
      type: String
    },
    // 必选参数，上传的地址
    action: {
      require: true,
      type: String,
      default: '/api/attachment/uploadPictureOrVideo'
    }
  },
  computed: {
    // 上传时附带的额外参数
    fileUploadPramas() {
      let obj = {}
      if (this.apiName) obj.bizCode = this.apiName
      return Object.assign({}, obj, this.uploadPramas)
    }
  },
  data() {
    return {
      fileList: [],
      msg: '',
      loading: false,
      oldData: null, // 开始排序时按住的旧数据
      newData: null // 拖拽过程的数据
    }
  },
  watch: {
    files(file) {
      this.fileList = file || []
      console.log('watch赋值', this.fileList)
    }
  },
  methods: {
    // 点击上传节点触发的事件
    clickUploadEvent() {
      this.$emit('click-upload-event')
    },
    // 重置数据
    resetData() {
      this.fileList = []
      this.$refs.fileListView.resetData()
      console.log('重置数据', this.fileList)
    },
    // 上传成功
    formUploadSuccess(res, file, fileList) {
      console.log('上传成功', res)
      this.loading = false
      if (this.singleUpload) {
        this.fileList = [res.data]
      } else {
        this.fileList.push(res.data)
      }
      this.$emit('form-upload-event', this.fileList)
    },
    // 上传失败
    formOnError(err, file, fileList) {
      console.log(err)
      let errorTips = JSON.parse(err.message).message || '上传失败,请重试!'
      this.$api.error(errorTips)
      this.loading = false
      this.$emit('form-on-error', err, file, fileList)
    },
    // 上传文件之前的钩子
    formBeforeUpload(file) {
      // console.log("formBeforeUpload")
      this.loading = true
      // return false
      this.$emit('form-before-upload', file)
    },
    // 删除事件
    formUploadRemove(fileList) {
      //删除图片
      console.log('formUploadRemove', fileList)
      // this.fileList.splice(index, 1)
      this.$emit('form-upload-event', fileList)
    },
    dragend(fileList) {
      console.log('拖拽完成', fileList)
      this.fileList = fileList
    }
  }
}
</script>
<style lang="less" scoped>
.form_upload .form_upload_add:hover {
  border: 1px dashed #eee;
}
.clamp2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.form_upload {
  display: flex;
  position: relative;
  .upload_tip {
    position: absolute;
    left: 0;
    bottom: -18px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 12px;
    min-width: 300px;
  }
  .form_upload_add {
    // height:60px;
    // width:60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px dashed #dcdfe6;
    margin: 0 10px 10px 0;
    .form_upload_add_box {
      height: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .upload_icon {
        font-size: 18px;
        font-weight: bold;
      }
      .upload__text {
        font-size: 12px;
        line-height: 20px;
        color: #bfbfbf;
      }
    }
  }
}
</style>
