<template>
  <collapse-item name="属性" :expanded="true">
    <setting-item-box name="路径" :alone="true">
      <setting-item name="请选择要加载的组态">
        <n-select size="small" v-model:value="optionData.dataset" :options="configurationOptions" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="样式">
      <setting-item name="圆角">
        <n-input-number
          v-model:value="optionData.borderRadius"
          size="small"
          :min="0"
          placeholder="圆角"
        ></n-input-number>
      </setting-item>
    </setting-item-box>
  </collapse-item>
</template>

<script setup lang="ts">
import { PropType, onMounted, ref } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { getConfigurationList } from '@/api/external/common/index'

defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})

const configurationOptions = ref([])

const getConfigurationOptions = async (params: object) => {
  const { items } = await getConfigurationList(params)
  if (items) {
    configurationOptions.value = items.map((item: Record<string, string>) => ({ label: item.name, value: item.id }))
  }
}

onMounted(() => {
  getConfigurationOptions({ page: 1, pageSize: 10 })
})
</script>