<template>
  <CollapseItem name="弹窗设置" :expanded="true">
    <SettingItemBox name="样式设置">
      <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.backgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.backgroud = dataStyleClone.backgroud">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左上、右下角的装饰颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.lineColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.lineColor1 = dataStyleClone.lineColor1">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左上、右下角的装饰颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.lineColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.lineColor2 = dataStyleClone.lineColor2">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左上、右下角的装饰颜色3">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.lineColor3"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.lineColor3 = dataStyleClone.lineColor3">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="外侧边框线颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.pathLineColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.pathLineColor1 = dataStyleClone.pathLineColor1"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="内侧边框线颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.pathLineColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.pathLineColor2 = dataStyleClone.pathLineColor2"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="顶部矩形块颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.topPolygonColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.topPolygonColor = dataStyleClone.topPolygonColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="顶部椭圆形块颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.topEllipseColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.topEllipseColor = dataStyleClone.topEllipseColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="底部矩形块颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.bottomUseColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.bottomUseColor = dataStyleClone.bottomUseColor"
        >
          恢复默认
        </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',
    // 背景颜色
    backgroud: '#161A1A',
    // 左上、右下角装饰颜色
    lineColor1: '#25673D',
    lineColor2: '#3E674A',
    lineColor3: '#8BE8A3',
    // 外侧边框线颜色
    pathLineColor1: '#7CA791',
    // 内侧边框线颜色
    pathLineColor2: '#435A4E',
    // 顶部矩形块颜色
    topPolygonColor: '#4D815D',
    // 顶部椭圆形块颜色
    topEllipseColor: '#4A5C4A',
    // 底部矩形块颜色
    bottomUseColor: '#FFE4AC',
  };
</script>
