<template>
  <div v-loading="loading" class="ed-upload-warp">
    <el-upload class="ed-upload" v-bind="uploadProps">
      <!-- 上传组件--触发文件选择框的内容 -->
      <template #trigger>
        <slot name="trigger"></slot>
      </template>

      <slot name="upload">
        <!-- 拖拽上传 -->
        <div v-if="drag===true" class="ed-upload--content">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </div>

        <!-- 上传组件样式 -->
        <div v-else class="ed-upload--content">
          <!-- 自定义组件 -->
          <component :is="model.tags" v-if="modelType==='component'" v-bind="model.attrs">
            {{ model.text }}
          </component>

          <!-- 按钮图标 -->
          <el-button v-if="modelType==='button'" icon="el-icon-upload" size="small" type="primary"/>

          <!-- 图片框: 仅listType==='picture-card' 时才能使用 -->
          <i v-if="modelType==='image' && listType==='picture-card'" class="el-icon-plus"></i>
        </div>
      </slot>


      <!-- 上传组件 -- 提示说明文字 -->
      <template #tip>
        <slot name="tip">
          <div class="el-upload__tip">{{ tipText }}</div>
        </slot>
      </template>

      <!-- 上传组件 -- 自定义文件列表展示样式 -->
      <template v-slot:file="scope">
        <slot name="file" v-bind="scope"></slot>
      </template>
    </el-upload>

    <template v-if="!showFileList">
      <slot name="fileList"></slot>
    </template>
  </div>
</template>

<script>
import Props, {CustomProps} from "./Props";
import {getVarType}         from "../../../tools/utils";

export default {
  name: "EdUpload",
  props: Props,
  data() {
    return {
      loading: false
    }
  },

  computed: {
    // 装载ElUpload属性
    uploadProps() {
      let props = Object.assign({}, this.$props);
      for (const key in props) {
        if (CustomProps[key]) delete props[key]
      }
      return props
    },

    // 上传组件样式
    modelType() {
      if (getVarType(this.model) === "object") {
        return "component"
      } else if (getVarType(this.model) === "string") {
        return this.model
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
