<template>
  <div class="el-upload">
    <div class="el-upload__header">
      <!-- 标题 -->
      <slot name="title"></slot>
      <!-- 上传图片数量 -->
      <span
        v-if="showNum"
        class="el-upload__header-num"
        :class="`el-upload__header-num--${numPosition}`"
      >{{ `(${value.length}/${limit})` }}</span>
    </div>
    <!-- 提示 -->
    <div
        v-if="tipPosition === 'top'"
        class="el-upload__tip el-upload__tip--top"
    >
        <slot name="tip"></slot>
    </div>
    <!-- 内容 -->
    <div
        class="el-upload__body"
        :class="{'el-upload__body--column': tipPosition === 'bottom'}"
    >
        <component
            :is="type"
            :uploadBtn="uploadBtn"
            :base-img="baseImg"
            :disabled="disabled"
            :btn-text="btnText"
            :show-delete="showDelete"
            :del-position="delPosition"
            :show-edit="showEdit"
            :edit-text="editText"
            :default-img="value"
            :action="_action"
            :show-file-list="showFileList"
            :height="height"
            :width="width"
            :size="size"
            :accept="accept"
            :show-cropper="showCropper"
            :limit="limit"
            :show-draggable="showDraggable"
            :cropper-text="cropperText"
            :before-upload="beforeUpload"
            @changeImgUrl="getChangeImgUrl"
            @changeFile="changeFile"
        />
        <div
            v-if="tipPosition !== 'top'"
            class="el-upload__tip"
            :class="`el-upload__tip--${tipPosition}`"
        >
            <slot name="tip"></slot>
        </div>
    </div>
  </div>
</template>
<script>
import uploadMixin from './mixin/uploadMixin';
import single from './single';
import multiple from './multiple';
export default {
  name: 'ElUpload',
  mixins: [uploadMixin],
  props: {
    // 使用v-model的原理value接收值，input返回改变的值
    value: [Array, String, Object],
    // 提示文案位置
    tipPosition: {
      type: String,
      default: 'bottom'
    },
    // 下面是批量上传图片特有
    // 批量上传图片是否打开
    multiple: {
      type: Boolean,
      default: false
    },
    // 已上传图片数量/最多上传张数,是否显示
    showNum: {
      type: Boolean,
      default: false
    },
    // 图片上传数量显示位置top-left top-right
    numPosition: {
      type: String,
      default: 'top-left'
    }
  },
  computed: {
    type() {
      return this.multiple ? 'multiple' : 'single';
    },
    _action() {
      return this.action || window.location.origin + (this.multiple ? '/v2/file/file/batchUploadImg' : '/v2/file/file/uploadImg');
    }
  },
  components: {
    single,
    multiple
  },
  methods: {
    getChangeImgUrl(urls) {
      this.$emit('input', urls);
      this.$emit('change', urls);
    },
    changeFile(files) {
      this.$emit('changeFile', files);
    }
  }
};
</script>
