<template>
  <div>
    <!-- 文件列表 -->
    <transition-group
      class="upload-file-list el-upload-list el-upload-list--text"
      name="el-fade-in-linear"
      tag="ul"
    >
      <li
        :key="file"
        class="el-upload-list__item ele-upload-list__item-content"
        v-for="(file, index) in value"
      >
        <el-link @click="downloadFile(file)" :underline="false" target="_blank">
          <span class="el-icon-document">
            {{ isMulti ? fileName + (index + 1) : fileName }}
          </span>
        </el-link>
      </li>
    </transition-group>
  </div>
</template>

<script>
// import { getToken } from "@/utils/auth";
import ElLink from "element-ui/packages/link/src/main";

export default {
  name: "MultifileLink",
  components: { ElLink },
  model: {
    prop: "value",
  },
  props: {
    //配合v-model 加载初始值
    value: {
      type: Array,
      default: () => [],
    },
    limit: Number,
    fileName: String,
    serverAddr: String,
  },
  data() {
    return {
      isMulti: true,
      // filePath: "",
      // imageVisible: false,
      // dialogImageUrl: "",
      // imgAction: process.env.VUE_APP_BASE_API + "/upload",
      // progressPercent: 0,
      // imageType: "",
      // minSize: 50 * 1024,
      // maxSize: 50 * 1024 * 1024,
      // minSizeTip: "50KB",
      // maxSizeTip: "50MB",
    };
  },
  computed: {
    // headers() {
    //   return { Authorization: "Bearer " + getToken() };
    // },
  },
  created() {
    this.setFileList(this.value);
  },
  // //监听父组件值是否在变化
  // watch: {
  //   //有些页面初始初始src没有赋值
  //   value(newValue, oldValue) {
  //     this.setFileList(newValue);
  //   },
  // },
  methods: {
    //通过父组件传过来的value更新子组件
    setFileList(stringList) {
      this.isMulti = false;
      if (stringList && stringList.length > 1) {
        this.isMulti = true;
      }
    },
    downloadFile(fileUrl) {
      const loading = this.$loading({
        lock: true,
        text: '正在下载，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      downloadFast(fileUrl,loading);
    }
  },
};
</script>

<style scoped>
</style>
