<template>
  <CollapseItem name="筛选显示设置" :expanded="true">
    <SettingItemBox :alone="false" name="整体设置">
      <SettingItem :alone="false" name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.filterMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem :alone="false" name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.filterMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
      <SettingItem :alone="false" name="标题占比">
        <n-space vertical>
          <n-slider v-model:value="optionData.dataStyle.colLeft" :step="1" :min="0" :max="12" />
          <n-input-number v-model:value="optionData.dataStyle.colLeft" size="small">
            <template #suffix> / 24 </template>
          </n-input-number>
        </n-space>
      </SettingItem>
      <SettingItem :alone="false" name="单个筛选项高度">
        <n-input-number
          v-model:value="optionData.dataStyle.filterItemHeight"
          :min="0"
          size="small"
          placeholder="单个筛选项高度"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="筛选标题设置">
      <SettingItem name="标题对齐方式">
        <n-select
          v-model:value="optionData.dataStyle.filterTitleAlign"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
          size="small"
        />
      </SettingItem>
      <SettingItem name="筛选标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.filterTitleFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="筛选标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.filterTitleFontSize"
          :min="0"
          size="small"
          placeholder="筛选标题字体大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="筛选内容设置">
      <SettingItem name="筛选内容对齐方式">
        <n-select
          v-model:value="optionData.dataStyle.filterContentAlign"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
          size="small"
        />
      </SettingItem>
      <SettingItem name="筛选内容字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.filterChooseFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="筛选内容字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.filterChooseFontSize"
          :min="0"
          size="small"
          placeholder="筛选内容字体大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="true" name="默认值设置">
      <SettingItem :alone="false" name="地图显示">
        <n-select
          v-model:value="optionData.dataStyle.mapListValue"
          :options="[
            { label: '水源', value: 'water' },
            { label: '物资', value: 'goods' },
            { label: '营房', value: 'barrack' },
            { label: '防火通道', value: 'fanghuotongdao' },
            { label: '三轮通道', value: 'sanluntongdao' },
            { label: '步行道', value: 'buxingdao' },
          ]"
          placeholder="请选择选项（可多选）"
          clearable
          multiple
        />
      </SettingItem>
      <SettingItem :alone="false" name="资源列表">
        <n-radio-group v-model:value="optionData.dataStyle.buttonValue" name="radiogroup">
          <n-radio value="0"> 水源 </n-radio>
          <n-radio value="1"> 物资 </n-radio>
          <n-radio value="2"> 营房 </n-radio>
        </n-radio-group>
      </SettingItem>
      <SettingItem :alone="false" name="距离">
        <n-radio-group v-model:value="optionData.dataStyle.distanceradio" name="radiogroup">
          <n-radio value="1"> 1km以内 </n-radio>
          <n-radio value="2"> 5km以内 </n-radio>
          <n-radio value="3"> 10km以内 </n-radio>
          <n-radio value="4"> 20km以内 </n-radio>
          <n-radio value="5"> 全部 </n-radio>
        </n-radio-group>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>

  <CollapseItem name="水源-表格数据显示设置" :expanded="true">
    <div style="overflow-x: auto">
      <span style="font-size: 12px; margin-left: 8px">
        表格数据（请先确定数据部分，再确定表格数据）
      </span>
      <n-table
        class="go-request-header-table-box"
        style="margin-top: 12px"
        :single-line="false"
        size="small"
      >
        <thead>
          <tr>
            <th></th>
            <th>表头名称</th>
            <th>表格字段</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in props.optionData.header" :key="index">
            <td>
              {{ index + 1 }}
            </td>
            <td>
              <n-input v-model:value="item.title" type="text" size="small" />
            </td>
            <td>
              <n-select v-model:value="item.key" :options="columnsOptions" size="small" />
            </td>
            <td>
              <div style="width: 70px">
                <n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">
                  +
                </n-button>
                <n-button
                  class="go-ml-2"
                  type="warning"
                  size="small"
                  ghost
                  :disabled="props.optionData.header.length === 1"
                  @click="remove(index)"
                >
                  -
                </n-button>
              </div>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <SettingItemBox :alone="true" name="表格宽度">
      <SettingItem :alone="true" name="不包含序列和操作列">
        <n-input v-model:value="columnsWidths" type="text" size="small" />
      </SettingItem>
      <SettingItem :alone="false" name="序列宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.tableOrderDivWidth"
          :min="0"
          size="small"
          placeholder="序列宽度"
        />
      </SettingItem>
      <SettingItem :alone="false" name="操作列宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.tableButtonDivWidth"
          :min="0"
          size="small"
          placeholder="操作列宽度"
        />
      </SettingItem>
    </SettingItemBox>

    <span style="font-size: 12px; margin-left: 8px"> 表格数据（前缀和后缀） </span>
    <div style="overflow-x: auto">
      <n-table
        class="go-request-header-table-box"
        style="margin-top: 12px"
        :single-line="false"
        size="small"
      >
        <thead>
          <tr>
            <th>表头名称</th>
            <th>前缀</th>
            <th>后缀</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in props.optionData.header" :key="index">
            <td>
              {{ item.title }}
            </td>
            <td>
              <n-input v-model:value="item.prefix" size="small" placeholder="前缀" />
            </td>
            <td>
              <n-input v-model:value="item.suffix" size="small" placeholder="后缀" />
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <br />
    <span style="font-size: 12px; margin-left: 8px"> 表格数据（数据格式转换） </span>
    <div style="overflow-x: auto">
      <n-table
        class="go-request-header-table-box"
        style="margin-top: 12px"
        :single-line="false"
        size="small"
      >
        <thead>
          <tr>
            <th>表头名称</th>
            <th>数据格式转换</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in props.optionData.header" :key="index">
            <td style="width: 70px">
              {{ item.title }}
            </td>
            <td>
              <n-select
                v-model:value="item.convert"
                :options="[
                  { label: '小数点保留后两位', value: '0' },
                  { label: '转换时间格式（例：0小时0分钟0秒）', value: '1' },
                  { label: '转换日期格式（例：2025-01-01）', value: '2' },
                  { label: '转换日期格式（例：2025/01/01）', value: '3' },
                  { label: '转换日期格式（例：2025-01-01 00:00:00）', value: '4' },
                ]"
                clearable
                size="small"
                placeholder="数据格式转换"
              />
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <SettingItemBox :alone="false" name="显示设置">
      <SettingItem name="是否显示边框">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.tableBordered" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否不设定行的分割线">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.tableSigleColumn" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否不设定列的分割线">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.tableSingleLine" size="small"></n-switch>
        </n-space>
      </SettingItem>

      <SettingItem name="是否显示表头">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.tableHeaderShow" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否显示序号列">
        <n-space>
          <n-switch
            v-model:value="optionData.dataStyle.tableOrderBumberShow"
            size="small"
          ></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否显示操作列">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.tableButtonDivShow" size="small"></n-switch>
        </n-space>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>

  <CollapseItem name="水源-表格样式设置" :expanded="true">
    <SettingItemBox name="整体设置">
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.tableMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.tableMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>

      <SettingItem name="对齐方式">
        <n-select
          v-model:value="optionData.dataStyle.tableAlign"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
          size="small"
        />
      </SettingItem>
      <SettingItem name="表格尺寸大小">
        <n-select
          v-model:value="optionData.dataStyle.tableSize"
          :options="[
            { label: '小', value: 'small' },
            { label: '中', value: 'medium' },
            { label: '大', value: 'large' },
          ]"
          size="small"
        />
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :alone="false" name="表头设置">
      <SettingItem name="表头背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.tableHeaderBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="表头字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.tableHeaderFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="表头字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.tableHeaderFontSize"
          :min="0"
          size="small"
          placeholder="表头字体大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :alone="false" name="表格设置">
      <SettingItem name="表格字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.tableDataFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="表格字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.tableDataFontSize"
          :min="0"
          size="small"
          placeholder="表格字体大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>

  <CollapseItem name="物资-数据显示设置" :expanded="true">
    <SettingItemBox name="整体设置">
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="单个内里样式设置">
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsDivMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsDivMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="标题设置">
      <SettingItem name="名称字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsTitleFontColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="名称字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsTitleFontSize1"
          :min="0"
          size="small"
          placeholder="名称字体大小"
        />
      </SettingItem>
      <SettingItem name="距离字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsTitleFontColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="距离字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsTitleFontSize2"
          :min="0"
          size="small"
          placeholder="距离字体大小"
        />
      </SettingItem>
      <SettingItem name="预计时间字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsTitleFontColor3"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="预计时间字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsTitleFontSize3"
          :min="0"
          size="small"
          placeholder="预计时间字体大小"
        />
      </SettingItem>
      <SettingItem name="按钮背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsButtonBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="按钮字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsButtonFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="按钮字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsButtonFontSize"
          :min="0"
          size="small"
          placeholder="按钮字体大小"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="间隔线设置">
      <SettingItem name="线起始颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsLineStartColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.goodsLineStartColor = '#4DFFB5'">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="线终结颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsLineEndColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.goodsLineEndColor = '#0B4D2C'">
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="文本设置">
      <SettingItem name="文本字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.goodsTextFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="文本字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.goodsTextFontSize"
          :min="0"
          size="small"
          placeholder="文本字体大小"
        />
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>

  <CollapseItem name="营房-数据显示设置" :expanded="true">
    <SettingItemBox name="整体设置">
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="单个内里样式设置">
      <SettingItem name="上方距离">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackDivMarginTop"
          :min="0"
          size="small"
          placeholder="上方距离"
        />
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackDivMarginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="标题设置">
      <SettingItem name="名称字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackTitleFontColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="名称字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackTitleFontSize1"
          :min="0"
          size="small"
          placeholder="名称字体大小"
        />
      </SettingItem>
      <SettingItem name="距离字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackTitleFontColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="距离字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackTitleFontSize2"
          :min="0"
          size="small"
          placeholder="距离字体大小"
        />
      </SettingItem>
      <SettingItem name="预计时间字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackTitleFontColor3"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="预计时间字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackTitleFontSize3"
          :min="0"
          size="small"
          placeholder="预计时间字体大小"
        />
      </SettingItem>
      <SettingItem name="按钮背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackButtonBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="按钮字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackButtonFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="按钮字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackButtonFontSize"
          :min="0"
          size="small"
          placeholder="按钮字体大小"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="间隔线设置">
      <SettingItem name="线起始颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackLineStartColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.barrackLineStartColor = '#4DFFB5'">
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="线终结颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackLineEndColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.dataStyle.barrackLineEndColor = '#0B4D2C'">
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="文本设置">
      <SettingItem name="文本字体颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.barrackTextFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="文本字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.barrackTextFontSize"
          :min="0"
          size="small"
          placeholder="文本字体大小"
        />
      </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 columnsOptions: any = ref([]);
  watch(
    () => props.optionData.dataset,
    () => {
      // 表格字段
      const field = Object.keys(props.optionData.dataset[0]);
      columnsOptions.value = [];
      field.forEach((item) => {
        columnsOptions.value.push({
          label: item,
          value: item,
        });
      });
    },
    {
      deep: false,
      immediate: true,
    },
  );

  // 新增
  const add = (index: number) => {
    props.optionData.header.splice(index + 1, 0, {
      key: '',
      title: '',
      align: props.optionData.dataStyle.tableAlign,
      width: '200',
      prefix: null,
      suffix: null,
      convert: null,
    });
  };

  // 减少
  const remove = (index: number) => {
    if (props.optionData.header.length !== 1) {
      props.optionData.header.splice(index, 1);
    }
  };

  // 对齐方式
  watch(
    () => props.optionData.dataStyle.tableAlign,
    () => {
      props.optionData.header.forEach((item) => {
        item.align = props.optionData.dataStyle.tableAlign;
      });
    },
  );
  // 表格宽度
  const columnsWidths: any = ref('');
  watch(
    () => props.optionData.header,
    () => {
      columnsWidths.value = props.optionData.header.map((item) => item.width).join(',');
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    () => columnsWidths.value,
    () => {
      const widths = columnsWidths.value.split(',');
      props.optionData.header.forEach((item, index) => {
        item.width = widths[index];
      });
    },
    {
      deep: true,
      immediate: true,
    },
  );
</script>
