<template>
  <div>
    <!-- 上传文件组件 -->
    <el-upload
      ref="upload" <!-- 定义上传组件的引用名称 -->
      :action="getActionUrl" <!-- 指定文件上传的目标地址 -->
      list-type="picture-card" <!-- 设置为图片卡片样式 -->
      :multiple="multiple" <!-- 是否支持多文件上传 -->
      :limit="limit" <!-- 限制上传文件的数量 -->
      :headers="myHeaders" <!-- 设置上传请求头 -->
      :file-list="fileList" <!-- 绑定文件列表 -->
      :on-exceed="handleExceed" <!-- 超出文件数量限制时的回调函数 -->
      :on-preview="handleUploadPreview" <!-- 点击文件列表时的预览回调 -->
      :on-remove="handleRemove" <!-- 文件移除时的回调函数 -->
      :on-success="handleUploadSuccess" <!-- 文件上传成功时的回调函数 -->
      :on-error="handleUploadErr" <!-- 文件上传失败时的回调函数 -->
      :before-upload="handleBeforeUpload" <!-- 文件上传前的钩子函数 -->
    >
      <i class="el-icon-plus"></i> <!-- 显示上传按钮图标 -->
      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
    </el-upload>
    <!-- 查看大图的对话框 -->
    <el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt> <!-- 显示大图 -->
    </el-dialog>
  </div>
</template>
<script>
import storage from "@/utils/storage"; // 导入存储工具类
import base from "@/utils/base"; // 导入基础配置工具类
export default {
  data() {
    return {
      // 查看大图的对话框是否可见
      dialogVisible: false,
      // 查看大图的图片地址
      dialogImageUrl: "",
      // 组件渲染图片的数组字段，有特殊格式要求
      fileList: [],
      fileUrlList: [], // 存储文件 URL 的数组
      myHeaders:{} // 上传请求头对象
    };
  },
  props: ["tip", "action", "limit", "multiple", "fileUrls"], // 定义组件接收的属性
  mounted() {
    this.init(); // 初始化组件数据
    this.myHeaders= {
      'Token':storage.get("Token") // 设置上传请求头中的 Token
    }
  },
  watch: {
    fileUrls: function(val, oldVal) {
      // 监听 fileUrls 属性变化，重新初始化数据
      this.init();
    }
  },
  computed: {
    // 计算属性，动态生成上传地址
    getActionUrl: function() {
      // return base.url + this.action + "?token=" + storage.get("token");
      return `/${this.$base.name}/` + this.action; // 拼接上传地址
    }
  },
  methods: {
    // 初始化方法
    init() {
      // 如果传入了 fileUrls，则解析并设置文件列表
      if (this.fileUrls) {
        this.fileUrlList = this.fileUrls.split(","); // 将字符串分割为数组
        let fileArray = [];
        this.fileUrlList.forEach(function(item, index) {
          var url = item; // 获取文件 URL
          var name = index; // 使用索引作为文件名
          var file = {
            name: name,
            url: url
          };
          fileArray.push(file); // 将文件对象添加到数组中
        });
        this.setFileList(fileArray); // 设置文件列表
      }
    },
    handleBeforeUpload(file) {
      // 文件上传前的处理逻辑（暂未实现）
    },
    // 上传文件成功后执行
    handleUploadSuccess(res, file, fileList) {
      if (res && res.code === 0) {
        // 如果上传成功，更新文件列表中的 URL
        fileList[fileList.length - 1]["url"] =
          this.$base.url + "upload/" + file.response.file;
        this.setFileList(fileList); // 更新文件列表
        this.$emit("change", this.fileUrlList.join(",")); // 触发父组件的 change 事件
      } else {
        this.$message.error(res.msg); // 提示上传失败信息
      }
    },
    // 图片上传失败
    handleUploadErr(err, file, fileList) {
      this.$message.error("文件上传失败"); // 提示用户上传失败
    },
    // 移除图片
    handleRemove(file, fileList) {
      this.setFileList(fileList); // 更新文件列表
      this.$emit("change", this.fileUrlList.join(",")); // 触发父组件的 change 事件
    },
    // 查看大图
    handleUploadPreview(file) {
      this.dialogImageUrl = file.url; // 设置大图的 URL
      this.dialogVisible = true; // 显示大图对话框
    },
    // 限制图片数量
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传${this.limit}张图片`); // 提示用户超出数量限制
    },
    // 重新对 fileList 进行赋值
    setFileList(fileList) {
      var fileArray = []; // 用于存储新的文件列表
      var fileUrlArray = []; // 用于存储新的文件 URL 列表
      // 有些图片不是公开的，所以需要携带 token 信息做权限校验
      var token = storage.get("token");
      fileList.forEach(function(item, index) {
        var url = item.url.split("?")[0]; // 去掉 URL 中的参数部分
        var name = item.name; // 获取文件名
        var file = {
          name: name,
          url: url + "?token=" + token // 添加 token 参数
        };
        fileArray.push(file); // 将文件对象添加到数组中
        fileUrlArray.push(url); // 将 URL 添加到数组中
      });
      this.fileList = fileArray; // 更新文件列表
      this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
