<template>
  <CollapseItem name="样式设置" :expanded="true">
    <SettingItemBox :alone="false" name="整体设置">
      <SettingItem :alone="false" name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem :alone="false" name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
      <SettingItem name="背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.backgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="单个高度">
        <n-input-number
          v-model:value="optionData.dataStyle.itemHeight"
          :min="0"
          size="small"
          placeholder="单个高度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="单位与内容之间的距离">
        <n-input-number
          v-model:value="optionData.dataStyle.itemMarginTop"
          :min="0"
          size="small"
          placeholder="单位与内容之间的距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="排序方式">
        <n-radio-group
          v-model:value="optionData.dataStyle.sortOrder"
          size="small"
          name="radiogroup"
        >
          <n-space>
            <n-radio value="0"> 不排序 </n-radio>
            <n-radio value="1"> 升序 </n-radio>
            <n-radio value="2"> 降序 </n-radio>
          </n-space>
        </n-radio-group>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :alone="false" name="单位设置">
      <SettingItem :alone="false" name="单位名称">
        <n-input
          v-model:value="optionData.dataStyle.unitTitle"
          size="small"
          placeholder="单位名称"
        />
      </SettingItem>
      <SettingItem :alone="false" name="单位符号">
        <n-input
          v-model:value="optionData.dataStyle.unitName"
          size="small"
          placeholder="单位符号"
        />
      </SettingItem>
      <SettingItem name="单位字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.unitFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.unitFontColor = dataStyleClone.unitFontColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem :alone="false" name="单位字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.unitFontSize"
          :min="0"
          size="small"
          placeholder="单位字体大小"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="标题设置">
      <SettingItem name="标题宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.labelWidth"
          :min="0"
          size="small"
          placeholder="标题宽度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.labelFontSize"
          :min="0"
          size="small"
          placeholder="标题字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.labelFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.labelFontColor = dataStyleClone.labelFontColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题对齐方式">
        <n-select
          v-model:value="optionData.dataStyle.labelAlign"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
          size="small"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="进度条设置">
      <SettingItem name="进度条背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.lineBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="进度条高度">
        <n-input-number
          v-model:value="optionData.dataStyle.lineHeight"
          :min="0"
          size="small"
          placeholder="进度条高度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="进度条边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.lineBorderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="进度条边框宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.lineBorderWidth"
          :min="0"
          size="small"
          placeholder="进度条边框宽度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.lineStartColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.lineStartColor = '#0B4D2C'">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.lineEndColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.lineEndColor = '#4DFFB5'">
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="值设置">
      <SettingItem name="值的字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.valueFontSize"
          :min="0"
          size="small"
          placeholder="值的字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="值的字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.valueFontColor"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
  import { PropType } from 'vue';
  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
  import { option } from './config';

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

  const dataStyleClone = {
    unitFontColor: '#738073',
    labelFontColor: '#9ab398',
    lineStartColor: '#0B4D2C',
    lineEndColor: '#4DFFB5',
  };
</script>
