<template>
  <div>
    <el-upload
      ref="uploader"
      :action="`/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`"
      :multiple="false"
      :show-file-list="false"
      accept="image/jpeg,image/png"
      class="image-uploader"
      :drag="drag"
      name="avatar"
      :on-success="handleImageSuccess"
      :before-upload="beforeImageUpload">
      <el-button type="primary" :style="{'width': width}" class="mt20">
        {{placeholder}}
      </el-button>
    </el-upload>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  export default {
    name: 'Upload',
    components: {},
    props: {
      placeholder:{
        type: String,
        default: "点击上传基准照片",
      },
      drag:{
        type: Boolean,
        default: false,
      },
      width:{
        type: String,
        default: "200px",
      },
      mins:{
        type: Number,
        default: 20,
      },
      maxs:{
        type: Number,
        default: 200,
      },
    },
    data() {
      let s = { u: localStorage.uid||'0', t:Date.now(), v:1.1 }
      s.s = md5( "hall_" + s.v + s.t + '017c0743819088468e590246464cc75f' )
      return {
        fileMd5:'',
        onupload: false,
        s
      }
    },
    methods: {
      beforeImageUpload(file) {

        let fileSize = file.size / 1024
        let {maxs,mins} = this;
        if (fileSize > maxs ) {
          this.$message.error(`上传文件大小不能超过 ${maxs}KB!`);
          return false
        }
        if (fileSize < mins ) {
          this.$message.error(`上传文件大小不能小于 ${mins}KB!`);
          return false
        }
        file.is_pass = true;
        return true;
      },
       handleImageSuccess(res) {
         console.log( this.$refs )
          this.$emit("onFinish", res.data.url);
       }
    }
  }
</script>
