<template>
  <div>
    <n-image
      preview-disabled
      :fallback-src="requireErrorImg()"
      :src="!dataset ? logo : dataset"
      :width="w"
      :height="h"
    ></n-image>
  </div>
</template>

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

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

const { w, h } = toRefs(props.chartConfig.attr)

const { dataset, valueConfig } = toRefs(props.chartConfig.option as unknown as typeof option)

watch(
  () => dataset?.value,
  newValue => {
    const findImageUrl = valueConfig?.value.find(
      (valueConfigItem: typeof option['valueConfig'][0]) => String(valueConfigItem.value) === String(newValue)
    )
    if (findImageUrl) {
      dataset.value = findImageUrl?.imageUrl
    }
  },
  {
    immediate: true
  }
)

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore)
</script>