<template>
  <view>
    <qf-image-cropper
      ref="qfImageCropper"
      :width="200"
      :height="200"
      :src="cropImg"
      :rotatable="false"
      @crop="handleCrop"
    >
    </qf-image-cropper>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { uploadFile } from '@/api/modules/inspector';
import { onLoad } from '@dcloudio/uni-app';
import { usepersonalStoreHook } from '@/store/inspector';
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
const cropImg = ref('');
function dataURLtoFile(dataurl, filename) {
  let arr = dataurl.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}
async function handleCrop(e) {
  const file = dataURLtoFile(e.tempFilePath, String(Date.now()));
  const { code, data } = await uploadFile(file);
  if (code === 200) {
    usepersonalStoreHook().SET_AVATAR(data.filePath);
    uni.navigateBack({
      delta: 1,
    });
  }
}
onLoad(option => {
  cropImg.value = option.file;
  uni.setNavigationBarColor({
    frontColor: '#ffffff', // 前景色值，包括按钮、标题、状态栏的颜色
    backgroundColor: '#2d2d2d', // 背景颜色值，包括背景、按钮等
  });
});
</script>
