<template>
  <CollapseItem name="弹窗设置" :expanded="true">
    <SettingItemBox name="样式设置">
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.onlyShowLeftFrame" size="small" />
          <n-text>默认弹窗只显示左侧部分</n-text>
        </n-space>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.mouseListener" size="small" />
          <n-text>是否开启弹窗拖动</n-text>
        </n-space>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.mask" size="small" />
          <n-text>展示遮罩</n-text>
        </n-space>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.maskClickClose" size="small" />
          <n-text>点击非弹窗部分是否关闭弹窗</n-text>
        </n-space>
      </SettingItem>
      <SettingItem name="遮罩颜色" v-if="optionData.dataStyle.mask">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.maskColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="弹窗宽度" v-if="optionData.dataStyle.mask">
        <n-input-number
          v-model:value="optionData.dataStyle.maskFrameW"
          :min="0"
          size="small"
          placeholder="弹窗宽度"
        />
      </SettingItem>
      <SettingItem name="弹窗X轴位置" v-if="optionData.dataStyle.mask">
        <n-input-number
          v-model:value="optionData.dataStyle.maskFrameX"
          :min="0"
          size="small"
          placeholder="弹窗X轴位置"
        />
      </SettingItem>
      <SettingItem name="弹窗Y轴位置" v-if="optionData.dataStyle.mask">
        <n-input-number
          v-model:value="optionData.dataStyle.maskFrameY"
          :min="0"
          size="small"
          placeholder="弹窗Y轴位置"
        />
      </SettingItem>
      <!-- <SettingItem name="弹窗高度" v-if="optionData.dataStyle.mask">
        <n-input-number
          v-model:value="optionData.dataStyle.maskFrameH"
          :min="0"
          size="small"
          placeholder="弹窗高度"
        />
      </SettingItem> -->
    </SettingItemBox>

    <SettingItemBox name="颜色设置">
      <SettingItem name="总矩形边框颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.allUseStrokeColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.allUseStrokeColor = dataStyleClone.allUseStrokeColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="总矩形填充颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.allUseFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.allUseFillColor = dataStyleClone.allUseFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形边框颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftStrokeColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftStrokeColor1 = dataStyleClone.leftStrokeColor1"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形边框颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftStrokeColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftStrokeColor2 = dataStyleClone.leftStrokeColor2"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形填充颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftFillColor = dataStyleClone.leftFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形左上、右下修饰边角颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftStopColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftStopColor1 = dataStyleClone.leftStopColor1"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形左上、右下修饰边角颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftStopColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftStopColor2 = dataStyleClone.leftStopColor2"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左侧矩形左上、右下修饰边角颜色3">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.leftStopColor3"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.leftStopColor3 = dataStyleClone.leftStopColor3"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左上修饰矩形颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.topLeftFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.topLeftFillColor = dataStyleClone.topLeftFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左下修饰矩形颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.bottomLeftFillColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.bottomLeftFillColor = dataStyleClone.bottomLeftFillColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左上、修饰圆形颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.topLeftEllipseColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.topLeftEllipseColor = dataStyleClone.topLeftEllipseColor"
        >
          恢复默认
        </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 = {
    maskColor: '#000000FF',
    // 总矩形边框颜色
    allUseStrokeColor: '#435A4E',
    // 总矩形填充颜色
    allUseFillColor: '#021E17',

    // 左侧矩形边框颜色
    leftStrokeColor1: '#435A4E',
    leftStrokeColor2: '#7CA791',
    // 左侧矩形填充颜色
    leftFillColor: '#161A1A',
    // 左侧矩形左上、右下修饰边角颜色
    leftStopColor1: '#25673D',
    leftStopColor2: '#3E674A',
    leftStopColor3: '#8BE8A3',

    // 左上、左下修饰矩形颜色
    topLeftFillColor: '#4D815D',
    bottomLeftFillColor: '#FFE4AC',
    // 左上、修饰圆形颜色
    topLeftEllipseColor: '#4A5C4A',
  };
</script>
