<!--
 * @Date: 2022-08-31 16:16:49
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-14 13:05:31
 * @FilePath: /data-table/src/components/FileUploaderField/index.vue
 * @Description: 文件上传控件
-->
<template>
  <div v-if="HideShow" class="file-uploader-field">
    <div class="label">
      <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span>
      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
    </div>
    <div
      v-if="item.component_props.note"
      v-html="item.component_props.note"
      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
    />
    <div v-if="!item.component_props.readonly" class="upload-wrapper">
      <div>
        <p
          v-for="(file, index) in fileList"
          :key="index"
          style="padding-left: 1rem; margin-bottom: 0.5rem"
        >
          <p style="font-size: 1rem; word-break: break-all; margin-right: 0.75rem;">
            <span>{{ index + 1 }}.&nbsp;{{ file.name }}&nbsp;&nbsp;{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
            &nbsp;&nbsp;
            <span style="color: #e32525; font-size: 0.85rem" @click="beforeDelete(file)">移除</span>
          </p>
        </p>
      </div>
      <div style="padding: 1rem">
        <van-uploader
          :name="item.name"
          upload-icon="add"
          accept="*"
          :before-read="beforeRead"
          :after-read="afterRead"
          :before-delete="beforeDelete"
          :multiple="item.component_props.max_size > 1"
        >
          <van-button icon="plus" type="primary">上传文件</van-button>
        </van-uploader>
      </div>
      <!-- <div class="type-text">上传格式：{{ type_text }}</div> -->
      <div
        v-if="show_empty"
        class="van-field__error-message"
        style="padding: 0 1rem 1rem 1rem"
      >
        文件上传不能为空
      </div>
      <van-divider />
    </div>
    <div v-else style="padding: 1rem;">
        <div v-if="previewImageList.length" class="readonly-image-list">
          <van-image
            v-for="(item, index) in previewImageList"
            :key="item.url || index"
            width="80"
            height="80"
            fit="contain"
            position="center"
            :src="item.url"
            style="margin-right: 0.5rem; margin-block-end: 0.25rem; border: 1px solid #eee; padding: 0.5rem;"
            @click="onPreviewImage(index)"
          />
        </div>
        <a
          @click="downloadFile(item)"
          v-for="(item, index) in readonlyFileList" :key="`${item.url || item.name}-${index}`"
          style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem; cursor:pointer;"
        >
          {{ item.name }}
        </a>
        <a class="app-download-btn" id="BtnClick" href="javascript:;" style="display: none;"> 点此继续访问 </a>
    </div>
  </div>

  <van-overlay :show="loading">
    <div class="wrapper" @click.stop>
      <van-loading vertical color="#FFFFFF">上传中...</van-loading>
    </div>
  </van-overlay>

  <van-image-preview
    v-model:show="showImagePreview"
    :images="previewImageUrls"
    :start-position="previewImageIndex"
    @change="onImagePreviewChange"
  >
    <template #index>第{{ previewImageIndex + 1 }}张</template>
  </van-image-preview>
</template>

<script setup>
/**
 * 文件上传
 * @param name[String] 组件名称
 * @param file_type[Array] 文件上传类型
 * @param multiple[Boolean] 文件多选
 */
import { showSuccessToast, showFailToast, showToast } from "vant";
import _ from "lodash";
import { v4 as uuidv4 } from "uuid";
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
import { qiniuFileHash } from "@/utils/qiniuFileHash.js";
import { useRoute } from "vue-router";
import axios from "axios";
import { wxInfo } from "@/utils/tools";

const $route = useRoute();
const props = defineProps({
  item: Object,
});
// 隐藏显示
const HideShow = computed(() => {
  return !props.item.component_props.disabled
})
// 只读显示-流程模式
const ReadonlyShow = computed(() => {
  return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly;
});
const emit = defineEmits(["active"]);
const show_empty = ref(false);
const default_file = ref(props.item.component_props.default);
const previewImageIndex = ref(0);
const showImagePreview = ref(false);

// TAG：详情态兼容历史文件数据，只靠文件名或链接后缀判断是否可按图片预览
const imageExtensionList = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "tif", "tiff"];

const getFileExtension = (value = "") => {
  const cleanValue = value.split("?")[0].split("#")[0];
  const extension = cleanValue.split(".").pop();
  return extension ? extension.toLowerCase() : "";
};

const isImageFile = (file = {}) => {
  const nameExtension = getFileExtension(file.name || "");
  const urlExtension = getFileExtension(file.url || "");
  return imageExtensionList.includes(nameExtension) || imageExtensionList.includes(urlExtension);
};

const readonlyFileList = computed(() => {
  if (!Array.isArray(default_file.value)) {
    return [];
  }
  return default_file.value.filter((item) => item?.url);
});

const previewImageList = computed(() => {
  return readonlyFileList.value.filter((item) => isImageFile(item));
});

const previewImageUrls = computed(() => {
  return previewImageList.value.map((item) => item.url);
});

onMounted(() => {
  // 非只读模式并且有默认值时
  if (!props.item.component_props.readonly && props.item.component_props.default) {
    fileList.value = default_file.value;
    // TAG：把存在的默认值同步到表单数据列表里
    // 过滤非包含URL的文件
    fileList.value = fileList.value.filter((item) => {
      if (item.url) return item;
    });
    props.item.value = {
      key: "file_uploader",
      filed_name: props.item.key,
      value: fileList.value,
    };
    // 完整数据回调到表单上
    emit("active", props.item.value);
  }
})

const downloadFile = (item) => {
  if (wxInfo().isWeiXin) {
    // 安卓浏览器
    if (wxInfo().isAndroid) {
      var iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.src = item.url;
      document.body.appendChild(iframe);
      iframe.click();
    }
    // IOS浏览器
    else if (wxInfo().isiOS) {
      var entityDom = document.getElementById('BtnClick');
      entityDom.href = item.url;
      entityDom.click();
    }
  } else {
    // 不在微信内置浏览器中，直接打开下载链接
    fileLinkToStreamDownload(item.url, item.name, item.name.split('.').pop());
  }
}

const onPreviewImage = (index) => {
  previewImageIndex.value = index;
  showImagePreview.value = true;
};

const onImagePreviewChange = (index) => {
  previewImageIndex.value = index;
};

// TAG: 文件下载操作
/**
 * 数据流下载
 * @param {*} url
 * @param {*} fileName
 * @param {*} type
 */
const fileLinkToStreamDownload = (url, fileName, type) => {
  let reg =
    /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
  if (!reg.test(url)) {
    throw new Error("传入参数不合法,不是标准的文件链接");
  } else {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.setRequestHeader("Content-Type", `application/${type}`);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        //接受二进制文件流
        var blob = this.response;
        downloadExportFile(blob, fileName, type);
      }
    };
    xhr.send();
  }
}
/**
 * 下载文件
 * @param {*} blob
 * @param {*} fileName
 * @param {*} fileType
 */
const downloadExportFile = (blob, fileName, fileType) => {
  let downloadElement = document.createElement("a");
  let href = blob;
  if (typeof blob == "string") {
    downloadElement.target = "_blank";
  } else {
    href = window.URL.createObjectURL(blob); //创建下载的链接
  }
  downloadElement.href = href;
  downloadElement.download = fileName;
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  if (typeof blob != "string") {
    window.URL.revokeObjectURL(href); //释放掉blob对象
  }
}
/************ END ************/

// 文件类型中文页面显示
const type_text = computed(() => {
  return props.item.component_props.file_type;
});
// 上传文件集合
const fileList = ref([
  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // Uploader 根据文件后缀来判断是否为文件文件
  // 如果文件 URL 中不包含类型信息，可以添加 isImage 标记来声明
  // { url: 'https://cloud-image', isImage: true },
]);

// 上传前置处理
const beforeRead = (file) => {
  // TODO: 需要file_type集合
  // 类型限制
  // const file_types = _.map(
  //   props.item.component_props.file_type.split("/"),
  //   (item) => `video/${item}`
  // );
  let flag = true;
  if (file.length + 1 > props.item.component_props.max_count) {
    // 数量限制
    flag = false;
    showToast(`最大上传数量为${props.item.component_props.max_count}个`);
  }
  if (fileList.value.length + 1 > props.item.component_props.max_count) {
    // 数量限制
    flag = false;
    showToast(`最大上传数量为${props.item.component_props.max_count}个`);
  }
  if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
    // 体积限制
    flag = false;
    showToast(
      `最大文件体积为${props.item.component_props.max_size}MB`
    );
  }
  // if (_.isArray(file)) {
  //   // 多张文件
  //   const types = _.difference(_.uniq(_.map(file, (item) => item.type)), file_types); // 数组返回不能上传的类型
  //   if (types.length) {
  //     flag = false;
  //     showFailToast("请上传指定格式文件");
  //   }
  // } else {
  //   if (!_.includes(file_types, file.type)) {
  //     showFailToast("请上传指定格式文件");
  //     flag = false;
  //   }
  // }
  return flag;
};

// 文件读取完成后的回调函数
const afterRead = async (files) => {
  if (Array.isArray(files)) {
    // 多张文件上传files是一个数组
    muliUpload(files);
  } else {
    const imgUrl = await handleUpload(files);
    // 上传失败提示
    if (!imgUrl.src) {
      files.status = "failed";
      files.message = "上传失败";
      loading.value = false;
    } else {
      files.status = "";
      files.message = "";
      fileList.value.push({
        // meta_id: imgUrl.meta_id,
        name: files.file.name,
        url: imgUrl.src,
        size: files.file.size
        // isImage: true,
      });
      loading.value = false;
    }
  }
  // 过滤非包含URL的文件
  fileList.value = fileList.value.filter((item) => {
    if (item.url) return item;
  });
  props.item.value = {
    key: "file_uploader",
    filed_name: props.item.key,
    // value: fileList.value.map((item) => item.url),
    value: fileList.value,
  };
  show_empty.value = false;
  // 完整数据回调到表单上
  emit("active", props.item.value);
};

// 文件删除前的回调函数
const beforeDelete = (files) => {
  fileList.value = fileList.value.filter((item) => {
    if (item.url !== files.url) return item;
  });
  props.item.value = {
    key: "file_uploader",
    filed_name: props.item.key,
    // value: fileList.value.map((item) => item.url),
    value: fileList.value,
  };
  // 完整数据回调到表单上
  emit("active", props.item.value);
};

/********** 上传七牛云获取文件地址 ***********/
const loading = ref(false);
const formCode = $route.query.code; // 表单code

/**
 * 上传文件并返回文件URL
 * @param {Object} files 当前上传项（van-uploader传入对象）
 * @returns {Promise<Object>} 服务端返回的文件信息
 * @description 使用 qiniuFileHash 计算文件哈希（遵循七牛ETag），替换原MD5逻辑
 */
const handleUpload = async (files) => {
    loading.value = true;
    return new Promise(async (resolve, reject) => {
        try {
            // 计算文件哈希（ETag），用于服务端去重及生成上传key
            const md5 = await qiniuFileHash(files.file, (progress) => {
                // 计算进度（此处保留钩子，便于后续展示进度）
            });
            // 获取七牛token
            const filename = files.file.name; // 真实文件名
            const getToken = await qiniuTokenAPI({
                name: filename,
                hash: md5,
            });
            // 文件上传七牛云
            let imgUrl = "";
            // 第一次上传
            if (getToken.token) {
                files.status = "uploading";
                files.message = "上传中...";
                // 返回数据库真实文件地址
                imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
            }
            // 重复上传
            if (getToken.data) {
                imgUrl = getToken.data;
            }
            resolve(imgUrl);
        } catch (err) {
            console.log(err);
            reject(err);
        }
    });
};

// 多选文件上传遍历
var muliUpload = async (files) => {
  for (let item of files) {
    const res = await handleUpload(item);
    // 上传失败提示
    if (!res.src) {
      item.status = "failed";
      item.message = "上传失败";
      loading.value = false;
    } else {
      item.status = "";
      item.message = "";
      fileList.value.push({
        // meta_id: res.meta_id,
        name: item.file.name,
        url: res.src,
        size: files.file.size
        // isImage: true,
      });
      loading.value = false;
    }
  }
};

// 生成数据库真实文件地址
const uploadQiniu = async (file, token, name, md5) => {
  let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
  // let affix = uuidv4();
  let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
  let formData = new FormData();
  formData.append("file", file); // 通过append向form对象添加数据
  formData.append("token", token);
  formData.append("key", fileName);
  let config = {
    headers: { "Content-Type": "multipart/form-data" },
  };
  // 自拍文件上传七牛服务器
  let qiniuUploadUrl;
  if (window.location.protocol === 'https:') {
      qiniuUploadUrl = 'https://up.qbox.me';
  } else {
      qiniuUploadUrl = 'http://upload.qiniu.com';
  }
  const { filekey, hash, image_info } = await qiniuUploadAPI(
    qiniuUploadUrl,
    formData,
    config
  );
  if (filekey) {
    // 保存文件
    const { data } = await saveFileAPI({
      name,
      filekey,
      hash: md5,
      // format: image_info.format,
      // height: image_info.height,
      // width: image_info.width,
    });
    return data;
  }
};

/****************** END *******************/

// 校验模块
const validFileUploader = () => {
  if (props.item.component_props.disabled) { // 通过规则隐藏的属性，不校验
    show_empty.value = false;
  } else {
    // 必填项 未上传文件
    if (props.item.component_props.required && !fileList.value.length) {
      show_empty.value = true;
      showToast(props.item.component_props.label + "必填项未填写");
    } else {
      show_empty.value = false;
    }
  }
  return !show_empty.value;
};

defineExpose({ validFileUploader });
</script>

<style lang="less" scoped>
.file-uploader-field {
  .label {
    padding: 1rem 1rem 0 1rem;
    font-size: 0.9rem;
    font-weight: bold;
  }

  .type-text {
    font-size: 0.9rem;
    margin-left: 1rem;
    padding-bottom: 1rem;
    color: gray;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>