<template>
  <div :style="getStyle(borderRadius)">
    <a-image
      :preview="false"
      :src="filePreviewUrl + option.dataset"
      v-if="props.chartConfig.option?.fileId"
      :style="{ width: w, height: h }"
      lazy
      style="object-fit: contain"
    />
    <a-image :preview="false" :src="option.dataset" v-else :style="{ width: w, height: h }" lazy style="object-fit: contain" />
  </div>
</template>

<script setup>
import { API_BASE_PREFIX } from '@/config/setting';
import { shallowReactive, watch, toRefs, ref } from 'vue';
import { useChartDataFetch } from '../../../hooks/useChartDataFetch.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';

const props = defineProps({
  chartConfig: {
    type: Object,
    required: true
  }
});

const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

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

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

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

// 编辑更新
watch(
  () => props.chartConfig.option.dataset,
  newData => {
    option.dataset = newData;
  },
  {
    immediate: true
  }
);

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

<style lang="less" scoped>
:deep(.ant-image-img) {
  height: 100% !important;
}
:deep(.ant-image) {
  height: 100%;
  width: 100%;
}
</style>
