import { v4 as uuidv4 } from 'uuid';
import { ref, reactive } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import qs from 'Qs'

// tslint:disable
export const useUpload = () => {
  let lock_btn = ref(false); // 保存按钮锁
  let fileList = ref([]);
  let metaId = ref('');
  let upload_image = reactive({ src: '' });
  const afterRead = (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
    axios.post('/srv/?a=upload', qs.stringify({
      filename: `${affix}_${res.file.name}`,
      file: base64url
    }))
      .then(res => {
        if (res.data.code === 1) {
          let config = {
            headers: {
              'Content-Type': 'application/octet-stream',
              'Authorization': 'UpToken ' + res.data.token,    // UpToken后必须有一个 ' '(空格)
            }
          }
          // 上传七牛服务器
          axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
            .then(res => {
              if (res.data.filekey) {
                let info = res.data;
                // 保存图片返回ID
                axios.post('/srv/?a=upload&t=save_file', qs.stringify({
                  format: info.image_info.format,
                  hash: info.hash,
                  height: info.image_info.height,
                  width: info.image_info.width,
                  filekey: info.filekey,
                }))
                  .then(res => {
                    upload_image.src = res.data.data.src;
                    lock_btn.value = false; // 头像上传完成, 打开锁
                  })
                  .catch(err => {
                    console.error(err);
                  })
              } else {
                console.warn(res);
                if (!res.data.show) return false;
                Toast({
                  icon: 'close',
                  message: res.data.msg
                });
              }
            })
            .catch(err => {
              console.error(err);
              if (!res.data.show) return false;
              Toast({
                icon: 'close',
                message: res.data.msg
              });
            })
        } else {
          console.warn(res);
        }
      })
      .catch(err => {
        console.error(err);
      })
  };
  const beforeDelete = () => { // 删除图片回调
    upload_image.src = '';
    return true;
  }

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