<template>
  <div :style="getStyle(borderRadius)">
    <n-image
      :object-fit="fit"
      preview-disabled
      :src="option.dataset"
      :fallback-src="requireErrorImg()"
      :width="w"
      :height="h"
      lazy
    />
  </div>
</template>

<script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs } from 'vue'
import { requireErrorImg } from '@/utils'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

const option = shallowReactive({
  dataset: ''
})

const getStyle = (radius: number) => {
  return {
    borderRadius: `${radius}px`,
    overflow: 'hidden'
  }
}

async function getBase64(imgUrl: string): Promise<string> {
   return new Promise(resolve => {
    let xhr = new XMLHttpRequest();
     xhr.open('get', imgUrl, true);
     xhr.responseType = 'blob';
     xhr.onload = function() {
         if (this.status == 200) {
              //得到一个blob对象
              let blob = this.response;
              // 重点2
              let oFileReader = new FileReader();
              oFileReader.onloadend = function(e) {
                  // 结果
                  const base64 = e.target?.result as string
                  resolve(base64)
              }; 
              oFileReader.readAsDataURL(blob);
         }
     };
     xhr.send();
   })
} 

// 编辑更新
watch(
  () => props.chartConfig.option.dataset,
 async (newData: any) => { 
    // const base64 = await getBase64(newData)
    // option.dataset = base64
    const reg = /^https?/ig
    if(reg.test(newData)){
      const base64 = await getBase64(newData)
      option.dataset = base64
      return
    }
    option.dataset = newData
  }, 
  {
    immediate: true
  }
)

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  option.dataset = newData
})
</script>