<template>
  <CollapseItem name="标记设置" :expanded="true">
    <SettingItemBox name="标记样式">
      <SettingItem name="标识颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.typeColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.typeColor1 = dataStyleClone.typeColor1">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标识颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.typeColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.typeColor2 = dataStyleClone.typeColor2">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标识标题1">
        <n-input
          v-model:value="optionData.dataStyle.typeTitle1"
          size="small"
          placeholder="标识标题1"
        ></n-input>
      </SettingItem>
      <SettingItem name="标识标题2">
        <n-input
          v-model:value="optionData.dataStyle.typeTitle2"
          size="small"
          placeholder="标识标题2"
        ></n-input>
      </SettingItem>
      <SettingItem name="标识字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.typeFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="标识字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.typeFontSize"
          :min="0"
          size="small"
          placeholder="标识字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="背景颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.backgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-radio-group v-model:value="optionData.dataStyle.sortOrder" name="radiogroup">
          <n-space>
            <n-radio value="0"> {{ optionData.dataStyle.typeTitle2 }}排序 </n-radio>
            <n-radio value="1"> {{ optionData.dataStyle.typeTitle1 }}排序 </n-radio>
            <n-radio value="2"> 比例排序 </n-radio>
            <n-text>排序方式</n-text>
          </n-space>
        </n-radio-group>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="数据样式">
      <SettingItem name="字体颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.fontColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小1">
        <n-input-number
          v-model:value="optionData.dataStyle.fontSize1"
          size="small"
          :min="0"
          placeholder="字体大小1"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="字体颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.fontColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小2">
        <n-input-number
          v-model:value="optionData.dataStyle.fontSize2"
          size="small"
          :min="0"
          placeholder="字体大小2"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="字体颜色3">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.fontColor3"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="字体大小3">
        <n-input-number
          v-model:value="optionData.dataStyle.fontSize3"
          size="small"
          :min="0"
          placeholder="字体大小3"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="颜色样式">
      <SettingItem name="标题矩形边框颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTitlePathStrokeColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.listTitlePathStrokeColor = dataStyleClone.listTitlePathStrokeColor
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题矩形填充颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTitlePathFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.listTitlePathFillColor = dataStyleClone.listTitlePathFillColor
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题左侧矩形颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTitlePathStrokeColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.listTitlePathStrokeColor2 =
              dataStyleClone.listTitlePathStrokeColor2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题右侧矩形边框颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTitleRectFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.listTitleRectFillColor = dataStyleClone.listTitleRectFillColor
          "
        >
          恢复默认
        </n-button>
      </SettingItem>

      <SettingItem name="比例矩形边框颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTypePathStrokeColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.listTypePathStrokeColor = dataStyleClone.listTypePathStrokeColor
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="比例矩形填充颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTypePathFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.listTypePathFillColor = dataStyleClone.listTypePathFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="比例矩形装饰点颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.listTypeRactFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.listTypeRactFillColor = dataStyleClone.listTypeRactFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

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

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

  const dataStyleClone = {
    typeColor1: '#FFC600',
    typeColor2: '#08B47A',
    listTitlePathStrokeColor: '#049D73',
    listTitlePathFillColor: '#05A074',
    listTitlePathStrokeColor2: '#049D72',
    listTitleRectFillColor: '#05A074',
    listTypePathStrokeColor: '#06A475',
    listTypePathFillColor: '#FFFFFF00',
    listTypeRactFillColor: '#06A475',
  };
</script>
