<template>
  <el-upload
    class="ym-upload-file"
    drag
    :headers="headers"
    :action="`${api}upload`"
    :on-success="handleSuccess"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">{{ tip }}</div>
  </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadImage',
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    value: {
      type: [Array, String],
      default: () => []
    },
    tip: {
      type: String,
      default: ''
    },
    api: {
      type: String,
      default: window.global.baseURL
    }
  },
  data() {
    return {
      headers: {
        'Authorization': getToken()
      }
    }
  },
  methods: {

    handleSuccess(res, file) {
      console.table('🚀  文件上传成功:', res, file)
      const { data, code } = res
      if (code === 0) {
        this.$emit('update', data.url)
      }
    }
  }
}

</script>
<style lang="scss">
.ym-upload-file{
  .el-upload{
    width: 100%;
  }
  .el-upload-dragger{
    width: auto;
    height: auto;
  }
}
</style>
