<!--
 * @Date: 2022-08-31 16:16:49
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-21 14:54:30
 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
 * @Description: 图片上传控件
-->
<template>
  <div class="image-uploader-field">
    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
    <div style="padding: 1rem">
      <van-uploader
        upload-icon="add"
        :before-read="beforeRead"
        :after-read="afterRead"
        v-model="fileList"
        :multiple="item.component_props.multiple"
      />
    </div>
    <div class="type-text">上传格式：{{ type_text }}</div>
  </div>
</template>

<script setup>
/**
 * 图片上传
 * @param name[String] 组件名称
 * @param image_type[Array] 图片上传类型
 * @param multiple[Boolean] 图片多选
 */
import { Toast } from "vant";
import _ from "lodash";
import { v4 as uuidv4 } from "uuid";
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";

const props = defineProps({
  item: Object,
});

const type_text = computed(() => {
  return props.item.component_props.image_type.join("/");
});

// 上传前置处理
const beforeRead = (file) => {
  const image_types = _.map(
    props.item.component_props.image_type,
    (item) => `image/${item}`
  );
  let flag = true;
  if (_.isArray(file)) {
    // 多张图片
    const types = _.difference(_.uniq(_.map(file, (item) => item.type)), image_types); // 数组返回不能上传的类型
    if (types.length) {
      flag = false;
      Toast("请上传指定格式图片");
    }
  } else {
    if (!_.includes(image_types, file.type)) {
      Toast("请上传指定格式图片");
      flag = false;
    }
  }
  return flag;
};

const afterRead = async (file) => {
  // 此时可以自行将文件上传至服务器
  let affix = uuidv4();
  let base64url = file.content.slice(file.content.indexOf(",") + 1); // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
  // 获取七牛token
  const { token, key, code } = await qiniuTokenAPI({
    filename: `${affix}_image_upload`,
    file: base64url,
  });
  if (code) {
    const config = {
      headers: {
        "Content-Type": "application/octet-stream",
        Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
      },
    };
    // 上传七牛服务器
    const { filekey, hash, image_info } = await qiniuUploadAPI(
      "http://upload.qiniup.com/putb64/-1/key/" + key,
      base64url,
      config
    );
    if (filekey) {
      // 保存图片
      const { data } = await saveFileAPI({
        filekey,
        hash,
        format: image_info.format,
        height: image_info.height,
        width: image_info.width,
      });
      console.warn(data.src);
    }
  }
};

const fileList = ref([
  { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  // { url: 'https://cloud-image', isImage: true },
]);
</script>

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

    span {
      color: red;
    }
  }

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