/*
 * @Date: 2022-05-10 12:15:14
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-29 23:36:29
 * @FilePath: /tswj/src/composables/useUpload.js
 * @Description: 图片上传模块
 */
import { v4 as uuidv4 } from 'uuid';
import { ref, reactive } from 'vue'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'

export const useUpload = () => {
  let lock_btn = ref(false); // 保存按钮锁
  let fileList = ref([]);
  let upload_image = reactive({ src: '' });
  const afterRead = async (res) => {
    lock_btn.value = true; // 上传开始, 不能保存
    let affix = uuidv4();
    // 此时可以自行将文件上传至服务器
    let dataURL = res.content;
    let base64url = dataURL.slice(dataURL.indexOf(',') + 1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
    // 获取七牛token
    const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_${res.file.name}`, 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 });
        upload_image.src = data.src;
        lock_btn.value = false; // 头像上传完成, 打开锁
      }
    }
  };
  const beforeDelete = () => { // 删除图片回调
    upload_image.src = '';
    return true;
  }

  return {
    lock_btn,
    fileList,
    upload_image,
    afterRead,
    beforeDelete
  }
}