<template>
  <div>
    <CollapseItem :name="t('charts.chart.sankey')" :expanded="true">
      <SettingItemBox :name="t('common.styleText')">
        <SettingItem :name="t('common.dirextionText')">
          <n-select
            v-model:value="sankeyConfig.orient"
            size="small"
            :options="orientList"
            :placeholder="t('charts.chart.selectDirection')"
          />
        </SettingItem>
        <SettingItem :name="t('charts.chart.promptLabel')">
          <n-select
            v-model:value="optionData.tooltip.show"
            size="small"
            :options="toolTipSwitch"
            :placeholder="t('common.isEnabled')"
          />
        </SettingItem>
      </SettingItemBox>
    </CollapseItem>
  </div>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
// import { option, orientList, toolTipSwitch } from './config'
import { option} from './config'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option & GlobalThemeJsonType>,
    required: true
  }
})
const t = window['$t']

const sankeyConfig = computed<typeof option.series>(() => {
  return props.optionData.series
})

// 图表方向
 const orientList = [
  { label: t('common.orientList.horizontal'), value: 'horizontal' },
  { label: t('common.orientList.vertical'), value: 'vertical' }
]

// 标签展示
 const toolTipSwitch = [
  { label: t('common.toolTipSwitch.open'), value: 1 },
  { label: t('common.toolTipSwitch.close'), value: 0 }
]

</script>