<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, unref } from 'vue';
import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';

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

const { getAllBackgroundImageList, getBackgroundImagePath } = useBackgroundSelect()

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

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

</script>


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

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