<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.backgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
      <SettingItem name="饼图和列表之间的距离">
        <n-input-number
          v-model:value="optionData.dataStyle.listMarginLeft"
          :min="0"
          size="small"
          placeholder="饼图和列表之间的距离"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <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.listGap"
          :min="0"
          size="small"
          placeholder="间隔距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="列表单个宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.liWidth"
          :min="0"
          size="small"
          placeholder="列表单个宽度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="列表标题颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.productFontSpanColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.productFontSpanColor = '#D0E6CF'">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="列表数量颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.dataFontSpanColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.dataFontSpanColor = '#C3D7E6'">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="列表标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.productFontSpanFontSize"
          :min="0"
          size="small"
          placeholder="列表标题字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="列表数量字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.dataFontSpanFontSize"
          :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>
