<template>
  <CollapseItem name="标题设置" :expanded="true">
    <SettingItemBox :alone="true" name="标题名称">
      <SettingItem name="标题名称">
        <n-input v-model:value="optionData.dataset.value" type="text" size="small" />
      </SettingItem>
      <SettingItem name="智感模块常用标题名称">
        <n-select v-model:value="optionData.dataset.value" size="small" :options="titleList" />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="标题样式">
      <SettingItem name="标题字体大小">
        <n-input-number
          size="small"
          :min="0"
          v-model:value="optionData.dataStyle.fontSize"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.fontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="标题横坐标位置">
        <n-input-number
          v-model:value="optionData.dataStyle.x"
          :min="0"
          size="small"
          placeholder="宽度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="标题纵坐标位置">
        <n-input-number
          v-model:value="optionData.dataStyle.y"
          :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.gPolygonFillColorTL"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.gPolygonFillColorTL = dataStyleClone.gPolygonFillColorTL"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="右上角装饰颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.gFillColorTR"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.gFillColorTR = dataStyleClone.gFillColorTR"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左下角装饰颜色1">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.gPolygonFillColorBL1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.gPolygonFillColorBL1 = dataStyleClone.gPolygonFillColorBL1"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="左下角装饰颜色2">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.gPolygonFillColorBL2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.gPolygonFillColorBL2 = dataStyleClone.gPolygonFillColorBL2"
        >
          恢复默认
        </n-button>
      </SettingItem>

      <SettingItem name="标题左侧颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorL1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorL1 =
              dataStyleClone.linearGradientStopColorL1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题左侧颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorL2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorL2 =
              dataStyleClone.linearGradientStopColorL2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题中间颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorM1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorM1 =
              dataStyleClone.linearGradientStopColorM1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题中间颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorM2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorM2 =
              dataStyleClone.linearGradientStopColorM2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题右侧颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorR1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorR1 =
              dataStyleClone.linearGradientStopColorR1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题右侧颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorR2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorR2 =
              dataStyleClone.linearGradientStopColorR2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>

      <SettingItem name="标题右侧边颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorRT1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorRT1 =
              dataStyleClone.linearGradientStopColorRT1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题右侧边颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorRT2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorRT2 =
              dataStyleClone.linearGradientStopColorRT2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>

      <SettingItem name="标题上部分颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorT1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorT1 =
              dataStyleClone.linearGradientStopColorT1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题上部分颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorT2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorT2 =
              dataStyleClone.linearGradientStopColorT2
          "
        >
          恢复默认
        </n-button>
      </SettingItem>

      <SettingItem name="标题下部分颜色(始)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorB1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorB1 =
              dataStyleClone.linearGradientStopColorB1
          "
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标题下部分颜色(终)">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.linearGradientStopColorB2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="
            optionData.dataStyle.linearGradientStopColorB2 =
              dataStyleClone.linearGradientStopColorB2
          "
        >
          恢复默认
        </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 titleList = [
    { label: '卫星遥感信息', value: '卫星遥感信息' },
    { label: '无人机实时画面', value: '无人机实时画面' },
    { label: '无人机飞行数据', value: '无人机飞行数据' },
    { label: '线索上报渠道', value: '线索上报渠道' },
    { label: '每日上报数量统计', value: '每日上报数量统计' },
    { label: '摄像头类型', value: '摄像头类型' },
    { label: '用户名', value: '用户名' },
  ];

  const dataStyleClone = {
    gPolygonFillColorTL: '#EBBE10',
    gFillColorTR: '#00C157',
    gPolygonFillColorBL1: '#EBBE10',
    gPolygonFillColorBL2: '#4FE985',

    linearGradientStopColorR1: '#08251E',
    linearGradientStopColorR2: '#00A374',
    linearGradientStopColorL1: '#11B472',
    linearGradientStopColorL2: '#00A374',
    linearGradientStopColorM1: '#00FF8C',
    linearGradientStopColorM2: '#00F4B6',

    linearGradientStopColorRT1: '#00FF77',
    linearGradientStopColorRT2: '#00BF6B',
    linearGradientStopColorT1: '#00673F',
    linearGradientStopColorT2: '#00683F',
    linearGradientStopColorB1: '#72A18A',
    linearGradientStopColorB2: '#1CC370',
  };
</script>
