<script lang="ts" setup>
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
import { computed, h } from 'vue';
import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile';

const chartEditStore = useChartEditStore()
const canvasConfig = chartEditStore.getEditCanvasConfig

const { transformPath, setPath, getPath } = useSyncAssetsFile()
const getSelectBgOptions = computed(() => {
  const imagesModules = import.meta.globEager('@/assets/external/background/*')
  return transformPath(Object.keys(imagesModules))
})

const renderOption = (option: SelectOption) => {
  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
    h(NImage, { width: 50, src: getPath(option.value as string), previewDisabled: true, class: 'select-image' } as Recordable),
    h(NEllipsis, null, () => option.label)
  ])
}

const handleUpdateValue = (value: string, _option: SelectOption) => {
  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, setPath(value))
}

</script>


<template>
  <NSpace>
    <NText>背景选择</NText>
    <NSelect size="small" placeholder="请选择您要使用的背景" style="width: 250px" :value="canvasConfig.backgroundImage"
      :options="getSelectBgOptions" :render-label="renderOption" @update-value="handleUpdateValue" />
  </NSpace>
</template>

<style lang="scss" scoped>
</style>