<template>
  <collapse-item name="表格设置" :expanded="true">
    <setting-item-box :alone="true" name="对齐方式">
      <setting-item :alone="true">
        <n-select
          v-model:value="optionData.align"
          size="small"
          :options="[
            { label: '靠左', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '靠右', value: 'right' },
          ]"
        />
      </setting-item>
    </setting-item-box>
    <setting-item-box :alone="true" name="表格宽度">
      <setting-item :alone="true">
        <n-input v-model:value="columnsWidths" type="text" size="small" />
      </setting-item>
    </setting-item-box>
    <setting-item-box :alone="false" name="分页设置">
      <setting-item name="默认页码" :alone="true">
        <n-input-number
          v-model:value="optionData.pagination.page"
          size="small"
          placeholder="字体大小"
        ></n-input-number>
      </setting-item>
      <setting-item name="分页" :alone="true">
        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
      </setting-item>
    </setting-item-box>

    <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>
    <setting-item-box :alone="false" name="表格样式">
      <SettingItem name="显示边框" :alone="true">
        <n-select
          v-model:value="(optionData as any).style.border"
          size="small"
          :options="borderFlag"
        />
      </SettingItem>
      <SettingItem name="底部边框" :alone="true">
        <n-select
          v-model:value="(optionData as any).style.bottomBordered"
          size="small"
          :options="bottom_borderedFlag"
        />
      </SettingItem>
      <SettingItem name="列分割线" :alone="true">
        <n-select
          v-model:value="(optionData as any).style.singleLine"
          size="small"
          :options="columnFlag"
        />
      </SettingItem>
      <SettingItem name="行分割线" :alone="true">
        <n-select
          v-model:value="(optionData as any).style.singleColumn"
          size="small"
          :options="lineFlag"
        />
      </SettingItem>
      <SettingItem name="斑马条纹" :alone="true">
        <n-select
          v-model:value="(optionData as any).style.striped"
          size="small"
          :options="stripedFlag"
        />
      </SettingItem>
      <setting-item name="字体大小" :alone="true">
        <n-input-number
          v-model:value="optionData.style.fontSize"
          :min="12"
          size="small"
          placeholder="字体大小"
        ></n-input-number>
      </setting-item>
      <setting-item name="边框宽度" :alone="true">
        <n-input-number
          v-model:value="optionData.style.borderWidth"
          :min="0"
          size="small"
          placeholder="字体大小"
        ></n-input-number>
      </setting-item>
      <setting-item name="边框颜色" :alone="true">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.style.borderColor"
        ></n-color-picker>
      </setting-item>
      <setting-item name="边框样式" :alone="true">
        <n-select
          v-model:value="optionData.style.borderStyle"
          size="small"
          :options="borderStyleFlag"
        />
      </setting-item>
      <SettingItem name="表格搜索（前端静态搜索）" :alone="true">
        <n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
      </SettingItem>
    </setting-item-box>
  </collapse-item>
</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 page = [
    { label: '2', value: 2 },
    { label: '5', value: 5 },
    { label: '10', value: 10 },
    { label: '15', value: 15 },
    { label: '30', value: 30 },
  ];
  const borderFlag = [
    { label: '显示', value: 'on' },
    { label: '不显示', value: 'off' },
  ];
  const columnFlag = [
    { label: '显示', value: 'off' },
    { label: '不显示', value: 'on' },
  ];
  const lineFlag = [
    { label: '显示', value: 'off' },
    { label: '不显示', value: 'on' },
  ];
  const bottom_borderedFlag = [
    { label: '显示', value: 'on' },
    { label: '不显示', value: 'off' },
  ];
  const stripedFlag = [
    { label: '显示', value: 'on' },
    { label: '不显示', value: 'off' },
  ];
  const borderStyleFlag = [
    { label: '实线边框', value: 'solid' },
    { label: '虚线边框', value: 'dashed' },
    { label: '点状边框', value: 'dotted' },
    { label: '双线边框', value: 'double' },
  ];
  const inputSelect = [
    { label: '停用', value: 'none' },
    { label: '启用', value: 'flex' },
  ];
  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.align,
      width: '100',
    });
  };

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

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