<template>
  <CollapseItem name="设置" :expanded="true">
    <SettingItemBox name="整体样式">
      <SettingItem name="上边距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginTop"
          :min="0"
          size="small"
          placeholder="上边距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="弹窗关闭按钮大小">
        <n-input-number
          v-model:value="optionData.dataStyle.closeButtonWidth"
          :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.titleFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.titleFontSize"
          :min="0"
          size="small"
          placeholder="标题字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题图案大小">
        <n-input-number
          v-model:value="optionData.dataStyle.titleSvgWidthAndHeight"
          :min="0"
          size="small"
          placeholder="标题图案大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem />

      <SettingItem name="起点终点字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.wayStartFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="起点终点字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.wayStartFontSize"
          :min="0"
          size="small"
          placeholder="起点终点字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="起点终点底图大小">
        <n-input-number
          v-model:value="optionData.dataStyle.waySvgWidth"
          :min="0"
          size="small"
          placeholder="起点终点底图大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem />

      <SettingItem name="途经点字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.wayFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="途经点字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.wayFontSize"
          :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.planFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="规划方案字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.planFontSize"
          :min="0"
          size="small"
          placeholder="规划方案字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="规划方案图案大小">
        <n-input-number
          v-model:value="optionData.dataStyle.planButtonWidth"
          :min="0"
          size="small"
          placeholder="规划方案图案大小"
        ></n-input-number>
      </SettingItem>

      <SettingItem name="驾车和步行按钮字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.driveOrWalkFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="驾车和步行按钮字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.driveOrWalkFontSize"
          :min="0"
          size="small"
          placeholder="驾车和步行按钮字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="驾车和步行按钮按钮大小">
        <n-input-number
          v-model:value="optionData.dataStyle.driveOrWalkWidth"
          :min="0"
          size="small"
          placeholder="驾车和步行按钮按钮大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem />
      <SettingItem name="方案按钮字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.buttonFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="方案按钮字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonFontSize"
          :min="0"
          size="small"
          placeholder="方案按钮字体大小"
        ></n-input-number>
      </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,
    },
  });
</script>
