<template>
  <section class="th-file-upload">
    <el-upload
      ref="upload"
      action=""
      :on-change="onChange"
      :on-remove="onRemove"
      :auto-upload="false"
      show-file-list
      v-bind="props"
    >
      <slot>
        <el-button size="mini" plain>{{ buttonText || '选择文件' }}</el-button>
      </slot>
      <div v-if="tip" slot="tip" class="th-file-upload__tip">{{ tip }}</div>
    </el-upload>
  </section>
</template>
<script>

export default {
  name: 'ThFileUpload',
  props: {
    // 文件
    value: {
      validator() {
        return true
      },
      default: ''
    },
    // 字段名称
    filed: {
      type: String,
      default: 'file'
    },
    // 按钮文字
    buttonText: {
      type: String,
      default: '选择文件'
    },
    // 说明文字
    tip: {
      type: String,
      default: ''
    },
    // 类型限制 1不限 2启用 3禁用
    typeLimit: {
      type: Number,
      default: 1
    },
    // 启用类型 逗号分隔
    enableType: {
      type: String,
      default: ''
    },
    // 禁用类型 逗号分隔
    disableType: {
      type: String,
      default: ''
    },
    // 大小限制
    size: {
      type: [Number, String],
      default: ''
    },
    // 大小单位
    unit: {
      type: String,
      default: ''
    },
    // 上传组件属性
    props: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      file: null
    }
  },
  watch: {
    value(newVal) {
      if (!newVal) {
        this.$refs.upload.clearFiles()
      }
      this.file = newVal
    }
  },
  methods: {
    // 上传-选择文件
    onChange(file, fileList) {
      if (!this.beforeUpload(file)) return
      const param = new FormData()
      param.append(this.filed, file.raw, file.name)
      this.$emit('input', param)
    },
    // 上传前检查
    beforeUpload(file) {
      // 判断文件格式
      let isJPG = true
      var i = file.name.lastIndexOf('.')
      var suffix = file.name.substring(i + 1)
      if (this.typeLimit === 3) {
        const disableType = this.$length(this.disableType) ? this.disableType : (this.disableType ? this.disableType.split(',') : [])
        if (disableType.length) {
          isJPG = !disableType.includes(suffix)
        }
      } else if (this.typeLimit === 2) {
        const allowTypes = this.$length(this.enableType) ? this.enableType : (this.enableType ? this.enableType.split(',') : [])

        if (allowTypes.length) {
          isJPG = allowTypes.includes(suffix)
        }
      }
      // 判断文件大小
      let isLt2M = true
      if (this.size) {
        const allowSize = this.unit === 'MB' ? (1024 * 1024) : 1024
        isLt2M = file.size / allowSize < Number(this.size)
      }
      // 提示错误信息
      if (!isJPG) {
        if (this.typeLimit === 3) {
          this.$message.error(`上传文件不能是 ${this.disableType} 格式!`)
        } else if (this.typeLimit === 2) {
          this.$message.error(`上传文件只能是 ${this.enableType} 格式!`)
        }
      }
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过 ${this.size}${this.unit || 'KB'}!`)
      }
      return isJPG && isLt2M
    },
    // 删除
    onRemove(file) {
      this.$emit('input', null)
    }
  }
}
</script>
