<template>
  <div class="upload-file">
    <el-upload action="string" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit"
               :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-remove="handleDelete"
               :show-file-list="true" :accept="uploadFileTypes.toString()" :http-request="handleUpload" class="upload-file-uploader" ref="upload">
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
        的文件
      </div>
    </el-upload>
    <el-progress v-if="uploading" :percentage="uploadPercent"></el-progress>
    <!-- 文件列表 -->
    <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
        <el-link :href="file.url" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
        </div>
      </li>
    </transition-group> -->
  </div>
</template>

<script>
import uploadMixins from '../ali-oss-upload-mixins'

export default {
  mixins: [uploadMixins],
  props: {
  },
  data() {
    return {
      limit: 1
    };
  },
  computed: {

  },
  methods: {

  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
