<template>
  <CollapseItem name="按钮点击后展示的组件" :expanded="true">
    <div v-for="(item, index) in optionData.dataset" :key="item.key">
      <br />
      <n-space>{{ item.label }}</n-space>
      <n-select
        v-model:value="optionData.dataStyle.list[index]"
        multiple
        :options="options"
        placeholder="请选择点击按钮后要展示的组件"
        clearable
      />
    </div>
  </CollapseItem>
  <CollapseItem name="样式设置" :expanded="true">
    <SettingItemBox name="边框样式">
      <SettingItem name="边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.borderColor = dataStyleClone.borderColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="边框宽度">
        <n-input-number size="small" v-model:value="optionData.dataStyle.borderWidth" :min="0" />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="未选中项样式">
      <SettingItem name="按钮颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.titleBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.titleBackgroud = dataStyleClone.titleBackgroud"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="文字颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.titleColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.titleColor = dataStyleClone.titleColor">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="文字大小">
        <n-input-number size="small" v-model:value="optionData.dataStyle.titleFontSize" :min="0" />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="选中项样式">
      <SettingItem name="按钮颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.chooseBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.chooseBackgroud = dataStyleClone.chooseBackgroud"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="文字颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.chooseColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.chooseColor = dataStyleClone.chooseColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="文字大小">
        <n-input-number size="small" v-model:value="optionData.dataStyle.chooseFontSize" :min="0" />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="标签样式">
      <SettingItem name="标签颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.navsNumBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.navsNumBackgroud = dataStyleClone.navsNumBackgroud"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标签文字颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.navsNumColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.dataStyle.navsNumColor = dataStyleClone.navsNumColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="标签文字大小">
        <n-input-number
          size="small"
          v-model:value="optionData.dataStyle.navsNumFontSize"
          :min="0"
        />
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

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

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

  const dataStyleClone = {
    borderColor: '#4fe985',
    titleBackgroud: '#021d16',
    titleColor: '#099860',
    chooseBackgroud: '#18FFBE',
    chooseColor: '#0D2822',
    navsNumBackgroud: '#f91b1b',
    navsNumColor: '#ffffff',
  };

  const options = [
    { label: '态势标绘按钮', value: 'HuoQingDetailTiltButton' },
    { label: '火情详情弹窗信息展示', value: 'HuoQingDetailInfo' },
    { label: '火情详情弹窗饼图', value: 'HuoQingDetailPie' },
    { label: '火情详情弹窗按钮', value: 'HuoQingDetailButton' },
    { label: '火情详情弹窗流程按钮', value: 'HuoQingDetailProcessButton' },
    { label: '火情详情弹窗时间线', value: 'HuoQingDetailTimeLine' },
    { label: '火情详情弹窗（全展示）', value: 'HuoQingDetailModal' },
  ];
</script>
