<template>
  <!-- 筛选项数据显示设置 -->
  <CollapseItem name="筛选项数据显示设置" :expanded="true">
    <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.filterset" :key="index">
            <td>
              <n-input v-model:value="item.title" type="text" size="small" />
            </td>
            <td>
              <div style="width: 70px">
                <n-button
                  class="go-ml-2"
                  type="primary"
                  size="small"
                  ghost
                  @click="
                    props.optionData.filterset.splice(index + 1, 0, {
                      title: null,
                      field: null,
                      compareType: null,
                      showType: null,
                      value: [],
                      options: [{ label: null, value: null }],
                    })
                  "
                >
                  +
                </n-button>
                <n-button
                  class="go-ml-2"
                  type="warning"
                  size="small"
                  ghost
                  :disabled="props.optionData.filterset.length === 1"
                  @click="
                    if (props.optionData.filterset.length !== 1) {
                      props.optionData.filterset.splice(index, 1);
                    }
                  "
                >
                  -
                </n-button>
              </div>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </CollapseItem>
  <CollapseItem
    :expanded="false"
    v-for="(filtersetItem, filtersetIndex) in optionData.filterset"
    :key="filtersetIndex"
    :alone="false"
    :name="'筛选项【' + filtersetItem.title + '】设置'"
  >
    <SettingItem name="筛选类型">
      <n-select
        v-model:value="filtersetItem.showType"
        :options="[
          { label: '多选框', value: 'checkbox' },
          { label: '单选框', value: 'radio' },
          { label: '下拉框', value: 'select' },
          { label: '下拉框（多选）', value: 'selectGroup' },
          { label: '按钮组', value: 'buttonGroup' },
          { label: '按钮组（多选）', value: 'buttonGroupList' },
          { label: '列搜索框', value: 'inputSearch' },
          { label: '全数据搜索框', value: 'inputSearchAll' },
          { label: '时间选择器', value: 'timePicker' },
          { label: '时间范围', value: 'timeRange' },
          { label: '日期范围', value: 'dateRange' },
        ]"
        clearable
        size="small"
        placeholder="筛选类型"
        @change="
          filtersetItem.compareType = null;
          filtersetItem.value = null;
        "
      />
    </SettingItem>
    <SettingItem v-if="!['inputSearchAll'].includes(filtersetItem.showType)" name="对应字段">
      <n-select
        v-model:value="filtersetItem.field"
        :options="columnsOptions"
        size="small"
        clearable
        placeholder="对应字段"
      />
    </SettingItem>
    <SettingItem name="筛选方式">
      <n-select
        v-model:value="filtersetItem.compareType"
        :options="getOptionsByShowType(filtersetItem)"
        clearable
        size="small"
        placeholder="筛选方式"
      />
    </SettingItem>

    <!-- 默认值，搜索框无默认值 -->
    <SettingItem
      v-if="!['inputSearch', 'inputSearchAll'].includes(filtersetItem.showType)"
      name="默认值"
    >
      <!-- 多选框、下拉框（多选）、按钮组 （多选）-->
      <n-select
        v-if="['checkbox', 'selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)"
        v-model:value="filtersetItem.value"
        :options="filtersetItem.options"
        multiple
        clearable
        size="small"
        placeholder="默认值"
      />
      <!-- 时间选择器 -->
      <n-time-picker
        v-else-if="['timePicker'].includes(filtersetItem.showType)"
        v-model:formatted-value="filtersetItem.value"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        size="small"
        clearable
        placeholder="默认时间"
      />
      <!-- 时间范围 -->
      <div v-else-if="['timeRange'].includes(filtersetItem.showType)">
        <n-time-picker
          v-model:formatted-value="filtersetItem.value"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          size="small"
          clearable
          placeholder="开始时间"
        />
        <n-time-picker
          v-model:formatted-value="filtersetItem.value2"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          size="small"
          clearable
          placeholder="结束时间"
        />
      </div>
      <!-- 日期范围 -->
      <n-date-picker
        v-else-if="['dateRange'].includes(filtersetItem.showType)"
        v-model:formatted-value="filtersetItem.value"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        size="small"
        clearable
      />
      <!-- 其他 -->
      <n-select
        v-else
        v-model:value="filtersetItem.value"
        :options="filtersetItem.options"
        clearable
        size="small"
        placeholder="默认值"
      />
    </SettingItem>

    <!-- 搜索框、时间日期框无选项 -->
    <div style="overflow-x: auto">
      <n-table
        v-if="
          !['inputSearch', 'inputSearchAll', 'timePicker', 'timeRange', 'dateRange'].includes(
            filtersetItem.showType,
          )
        "
        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="(optionsItem, optionsIndex) in filtersetItem.options" :key="optionsIndex">
            <td>
              <n-input
                v-model:value="optionsItem.label"
                type="text"
                size="small"
                placeholder="名称"
              />
            </td>
            <td>
              <n-input
                v-model:value="optionsItem.value"
                type="text"
                size="small"
                placeholder="值"
              />
            </td>
            <td>
              <div style="width: 70px">
                <n-button
                  class="go-ml-2"
                  type="primary"
                  size="small"
                  ghost
                  @click="
                    filtersetItem.options.splice(optionsIndex + 1, 0, {
                      label: null,
                      value: null,
                    })
                  "
                >
                  +
                </n-button>
                <n-button
                  class="go-ml-2"
                  type="warning"
                  size="small"
                  ghost
                  :disabled="optionsItem.length === 1"
                  @click="
                    if (filtersetItem.options.length !== 1) {
                      filtersetItem.options.splice(optionsIndex, 1);
                    }
                  "
                >
                  -
                </n-button>
              </div>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </CollapseItem>

  <br />
  <!-- 筛选项样式设置 -->
  <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-input-number
          v-model:value="optionData.dataStyle.filterItemHeight"
          :min="0"
          size="small"
          placeholder="单个筛选项高度"
        />
      </SettingItem>
      <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-select
          v-model:value="optionData.dataStyle.filterContentAlign"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
          size="small"
        />
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :alone="false" name="标题样式">
      <SettingItem :alone="false" name="标题占比">
        <n-space vertical>
          <n-slider v-model:value="optionData.dataStyle.colLeft" :step="1" :min="0" :max="24" />
          <n-input-number v-model:value="optionData.dataStyle.colLeft" size="small">
            <template #suffix> / 24 </template>
          </n-input-number>
        </n-space>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :alone="false" name="字体设置">
      <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>
      <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>
  </CollapseItem>

  <CollapseItem name="表格数据显示设置" :expanded="true">
    <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>
            <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.orderDivWidth"
          :min="0"
          size="small"
          placeholder="序列宽度"
        />
      </SettingItem>
      <SettingItem :alone="false" name="操作列宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonDivWidth"
          :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.tableStriped" 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.orderBumberShow" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否显示操作列">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.buttonDivShow" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否显示第一按钮">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.buttonDivShow1" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem name="是否显示第二按钮">
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.buttonDivShow2" 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.tableDataBackgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="是否使用表格背景颜色">
        <n-space>
          <n-switch
            v-model:value="optionData.dataStyle.tableDataBackgroudShow"
            size="small"
          ></n-switch>
        </n-space>
      </SettingItem>
      <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>
</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,
    },
  );

  // 筛选方式
  function getOptionsByShowType(filtersetItem) {
    let result: any = [];
    if (filtersetItem.showType) {
      switch (filtersetItem.showType) {
        case 'checkbox':
          // 多选框
          result = [
            { label: '等于', value: 'equal' },
            { label: '含有', value: 'contain' },
          ];
          break;
        case 'radio':
          // 单选框
          result = [
            { label: '大于', value: 'greater' },
            { label: '小于', value: 'less' },
            { label: '大于等于', value: 'greaterAndEqual' },
            { label: '小于等于', value: 'lessAndEqual' },
            { label: '等于', value: 'equal' },
            { label: '不等于', value: 'notequal' },
            { label: '含有', value: 'contain' },
            { label: '不含有', value: 'notcontain' },
          ];
          break;
        case 'select':
          // 下拉框
          result = [
            { label: '等于', value: 'equal' },
            { label: '含有', value: 'contain' },
          ];
          break;
        case 'selectGroup':
          // 下拉框（多选）
          result = [
            { label: '等于', value: 'equal' },
            { label: '含有', value: 'contain' },
          ];
          break;
        case 'buttonGroup':
          // 按钮组
          result = [
            { label: '等于', value: 'equal' },
            { label: '不等于', value: 'notequal' },
            { label: '含有', value: 'contain' },
            { label: '不含有', value: 'notcontain' },
          ];
          break;
        case 'buttonGroupList':
          // 按钮组（多选）
          result = [
            { label: '等于', value: 'equal' },
            { label: '不等于', value: 'notequal' },
            { label: '含有', value: 'contain' },
            { label: '不含有', value: 'notcontain' },
          ];
          break;
        case 'inputSearch':
          // 列搜索框
          result = [{ label: '含有', value: 'contain' }];
          break;
        case 'inputSearchAll':
          // 全数据搜索框
          result = [{ label: '含有', value: 'contain' }];
          break;
        case 'timePicker':
          // 时间选择器
          result = [
            { label: '大于', value: 'greater' },
            { label: '小于', value: 'less' },
            { label: '大于等于', value: 'greaterAndEqual' },
            { label: '小于等于', value: 'lessAndEqual' },
            { label: '等于', value: 'equal' },
            { label: '不等于', value: 'notequal' },
          ];
          break;
        case 'timeRange':
          // 时间范围
          result = [{ label: '在两者之间', value: 'between' }];
          break;
        case 'dateRange':
          // 日期范围
          result = [{ label: '在两者之间', value: 'between' }];
          break;
      }
    }

    return result;
  }
</script>
