<template>
  <div>
    <el-col :span="12">
      <el-upload
        ref="upload"
        :limit="1"
        :action="action"
        :auto-upload="true"
        :show-file-list="false"
        :before-upload="uploadBefore"
        :on-success="uploadSuccess"
        :on-change="handleChange"
      >
        <span style="float: left;">
          <el-button plain type="primary" size="small" icon="el-icon-plus">
            Select file
          </el-button>
        </span>
        <br>
      </el-upload>
    </el-col>
    <el-col :span="12">
      <span> {{ file.filename || '' }} </span>
    </el-col>
  </div>
</template>


<script>
import { authDB } from '@/db'
//import md5 from '@/utils/md5'

const getAction = function() {
  const uid = authDB.get('uid')||0;
  return '/upload?uid=${uid}&type=property'
}

export default {
  name: 'Upload',
  components:{},
  props: {
    titleFile: {
      type: String,
      default: 'Title',
    },
  },
  data() {
    //let action = getAction();
    return {
      action: getAction(),
      file: {
        title: '',
        filename: '',
        url: '',
        change: false,
      }
    }
  },
  created() {
    this.file.title = this.titleFile
  },
  methods: {
    uploadFile() {
      // upload file to url specified by action
      this.$refs.upload.submit();
    },
    uploadBefore(file) {
      // 限制上传类型
      let fileExtensions = '.jpg'
      //限制的上限为20M
      const max2M = file.size / 1024 / 1024 < 2;
      if (!fileExtensions) {
        this.$message.error('Only upload file is .doc, .docx, .pdf!');
      }
      if (!max2M) {
        this.$message.error('Each file limit 2MB size!');
      }
      return fileExtensions && max2M;
    },
    uploadSuccess(res) {
      const { data } = res;
      if (data) {
        this.file.url = data.url;
        this.$emit('onFinish', this.file);
      }
    },
    handleChange(file) {
      if (file.status == 'ready') {
        this.file.filename = file.name;
        this.file.url = '';
        this.file.change = true;
      }
    },
    /*
    handleRemove(file) {
      this.$emit('onRemove', file.name);
      this.file.title = '';
      this.file.filename = '';
      this.file.url = '';
    },
    */
  }
}
</script>

<style lang="scss" scoped>
/*
@import "~@/styles/mixin.scss";
.upload-container {
  width: 100%;
  position: relative;
  @include clearfix;
  .image-uploader {
    width: 100px;
    display:block;
    width: 100%;
    height: auto;
  }
  .image-preview {
    width: 100px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      img {
        width: 100%;
        height: auto;
      }
    }
    .image-preview-action {
      position: absolute;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .5);
      transition: opacity .3s;
      cursor: pointer;
      text-align: center;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}
*/
</style>
