<template>
  <!-- Echarts 全局设置 -->
  <!-- <global-setting :optionData="optionData"></global-setting> -->
  <CollapseItem name="字段配置" :expanded="true">
    <SettingItemBox :alone="true" name="字段设置">
      <SettingItem name="名称字段">
        <n-select v-model:value="optionData.dimensions[0]" :options="columnsOptions" size="small" />
      </SettingItem>
      <SettingItem :alone="true" name="数据字段">
        <n-select v-model:value="optionData.dimensions[1]" :options="columnsOptions" size="small" />
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>

  <CollapseItem name="饼图配置" :expanded="true">
    <SettingItemBox name="总和样式">
      <SettingItem name="字体颜色（数字）">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.sumSpanColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小（数字）">
        <n-input-number
          v-model:value="optionData.dataStyle.sumSpanFontSize1"
          :min="0"
          size="small"
          placeholder="字体大小（数字）"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="字体颜色（标题）">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.sumSpanColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小（标题）">
        <n-input-number
          v-model:value="optionData.dataStyle.sumSpanFontSize2"
          :min="0"
          size="small"
          placeholder="字体大小（标题）"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="列表样式">
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.listMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="间隔距离">
        <n-input-number
          v-model:value="optionData.dataStyle.liMarginBottom"
          :min="0"
          size="small"
          placeholder="间隔距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="字体颜色（种类）">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.liFontSpanColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小（种类）">
        <n-input-number
          v-model:value="optionData.dataStyle.liFontSpanFontSize1"
          :min="0"
          size="small"
          placeholder="字体大小（种类）"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="字体颜色（数量）">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.liFontSpanColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小（数量）">
        <n-input-number
          v-model:value="optionData.dataStyle.liFontSpanFontSize2"
          :min="0"
          size="small"
          placeholder="字体大小（数量）"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="饼图">
      <SettingItem name="线条颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.series[0].itemStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="线条宽度">
        <n-input-number
          v-model:value="optionData.series[0].itemStyle.borderWidth"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="鼠标聚焦">
      <SettingItem name="文字大小">
        <n-input-number
          v-model:value="optionData.series[0].emphasis.label.fontSize"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="文字颜色" v-if="optionData.series[0].label.color">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.series[0].label.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="文字加粗" v-if="optionData.series[0].emphasis.label.fontWeight">
        <n-select
          v-model:value="optionData.series[0].emphasis.label.fontWeight"
          size="small"
          :options="labelConfig.fontWeight"
        />
      </SettingItem>
      <SettingItem name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
        <n-input-number
          v-model:value="optionData.series[0].label.textBorderWidth"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="文字边框色" v-if="optionData.series[0].label.textBorderColor">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.series[0].label.textBorderColor"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
  import { PropType, watch, computed } from 'vue';
  import { GlobalThemeJsonType } from '@/settings/chartThemes/index';
  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
  import { labelConfig } from '@/packages/chartConfiguration/echarts';

  const props = defineProps({
    optionData: {
      type: Object as PropType<GlobalThemeJsonType>,
      required: true,
    },
  });

  const columnsOptions = computed(() => {
    let result: any = [];
    const keys = Object.keys(props.optionData.dataset[0]);
    keys.forEach((key) => {
      result.push({
        label: key,
        value: key,
      });
    });
    return result;
  });
</script>
