<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData" :in-chart="true"></global-setting>

  <CollapseItem
    :name="`${t('charts.chart.scatter')}-${index + 1}`"
    expanded
    v-for="(item, index) in optionData.series"
    :key="index"
  >
    <SettingItemBox :name="t('common.styleText')">
      <SettingItem :name="t('common.typeText')">
        <n-select v-model:value="item.type" size="small" :options="ScatterEffectTypeEnumList" placeholder="选择" />
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="item.symbolSize" size="small" :min="1"></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.targetDomain')">
      <SettingItem :name="t('charts.chart.thickness')">
        <n-input-number v-model:value="item.markArea.itemStyle.borderWidth" size="small" :min="0"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.symbolText')">
        <n-select
          v-model:value="item.markArea.itemStyle.borderType"
          size="small"
          :options="axisConfig.splitLint.lineStyle.type"
          :placeholder="t('common.selectText')"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.punctuation')">
      <SettingItem :name="t('common.shapeText')">
        <n-select v-model:value="item.markPoint.symbol" size="small" :options="SymbolEnumList" placeholder="选择" />
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="item.markPoint.symbolSize" size="small" :min="0"></n-input-number>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
// import { ScatterEffectTypeEnumList, SymbolEnumList } from '../shard'
// import { axisConfig } from '@/packages/chartConfiguration/echarts/index'

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType & typeof option>,
    required: true
  }
})

const t = window['$t']

const ScatterEffectTypeEnumList = [
  { label: t('common.scatterEffectTypeEnumList.scatter'), value: 'scatter' },
  { label: t('common.scatterEffectTypeEnumList.effectScatter'), value: 'effectScatter' }
]

const SymbolEnumList = [
  { label: t('common.symbolEnumList.circle'), value: 'circle' },
  { label: t('common.symbolEnumList.rect'), value: 'rect' },
  { label: t('common.symbolEnumList.roundRect'), value: 'roundRect' },
  { label: t('common.symbolEnumList.triangle'), value: 'triangle' },
  { label: t('common.symbolEnumList.diamond'), value: 'diamond' },
  { label: t('common.symbolEnumList.pin'), value: 'pin' },
  { label: t('common.symbolEnumList.arrow'), value: 'arrow' },
  { label: t('common.symbolEnumList.none'), value: 'none' }
]
const axisConfig = {
  // X轴位置
  xposition: [
    {
      label: '顶部',
      value: 'top'
    },
    {
      label: '底部',
      value: 'bottom'
    }
  ],
  // Y轴位置
  yposition: [
    {
      label: '左侧',
      value: 'left'
    },
    {
      label: '右侧',
      value: 'right'
    }
  ],
  // 线条
  splitLint: {
    lineStyle: {
      type: [
        {
          label: t('common.axisConfig.splitLint.lineStyle.solid'),
          value: 'solid'
        },
        {
          label:  t('common.axisConfig.splitLint.lineStyle.dashed'),
          value: 'dashed'
        },
        {
          label:  t('common.axisConfig.splitLint.lineStyle.dotted'),
          value: 'dotted'
        }
      ]
    }
  },
  // 视觉映射
  visualMap: {
    orient: [
      {
        label: '竖直',
        value: 'vertical'
      },
      {
        label: '水平',
        value: 'horizontal'
      }
    ]
  }
}
</script>