<template>
  <el-upload
      class="fp-setting-upload"
      :show-file-list="false"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-preview="handlePreview"
      :on-change="changeHandler"
      :before-upload="beforeUploadHandler"
      :headers="{'token':token}"
      :action="uploadUrl"
      :auto-upload="autoUpload"
      :accept="accept"
  >
    <!--      <el-button size="small" type="info">上传图片</el-button>-->
    <fp-button :disabled="disabled">{{ buttonText }}</fp-button>
    <!--        <i class="el-icon-upload"></i>-->
    <!--        <i class="el-icon-upload iconfont el-icon-upload"></i>-->
    <!--        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
    <!--        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
  </el-upload>
</template>

<script>
import FpButton from "./FpButton";
import {mapGetters} from "vuex";

export default {
  name: "FpFileUpload",
  components: {FpButton},
  props: {
    buttonText: {
      default: '上传'
    },
    accept: {
      default: 'image/png, image/jpeg'
    },
    disabled: {
      default: false
    },
    autoUpload: {
      default: true
    }
  },
  computed: {
    ...mapGetters({
      'uploadUrl': 'editor/uploadUrl',
      'token': 'editor/token'
    })
  },
  methods: {
    handleSuccess(r) {
      if (r.code === 0) {
        this.$emit('success', r.data.files[0].path)
      } else {
        this.$message.error("上传失败，请联系管理员查看日志");
        console.error('上传失败', r.msg);
      }
    },
    handleError(r) {
      this.$message.error("上传失败，请联系管理员查看日志");
      console.error('上传失败', r);
    },
    beforeUploadHandler(ev) {
      this.$emit('before-upload', ev)
    },
    handlePreview(ev){
      // console.info('handlePreview', ev)
    },
    changeHandler(ev){
      // console.info('changeHandler', ev)
      this.$emit('change', ev)
    }
  }
}
</script>

<style scoped>

</style>

<style>

.fp-setting-upload .el-upload-dragger {
  width: 228px;
  height: 100px;
}

</style>