<template>
  <CollapseItem name="数据设置" :expanded="true">
    <SettingItemBox name="查询样式">
      <SettingItem name="上边距离">
        <n-input-number
          v-model:value="optionData.dataStyle.searchPaddingTop"
          :min="0"
          size="small"
          placeholder="上边距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.searchPaddingLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="查询输入框宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.searchInputWidth"
          :min="0"
          size="small"
          placeholder="查询输入框宽度"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="查询按钮宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.searchButtonWidth"
          :min="0"
          size="small"
          placeholder="查询按钮宽度"
        ></n-input-number>
      </SettingItem>
      <!-- <SettingItem name="查询框高度">
        <n-input-number
          v-model:value="optionData.dataStyle.searchDivHeight"
          :min="0"
          size="small"
          placeholder="查询框高度"
        ></n-input-number>
      </SettingItem> -->
    </SettingItemBox>

    <SettingItemBox name="按钮框样式">
      <SettingItem name="上边距离">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonPaddingTop"
          :min="0"
          size="small"
          placeholder="上边距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonPaddingLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <!-- <SettingItem name="按钮框高度">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonDivHeight"
          :min="0"
          size="small"
          placeholder="按钮框高度"
        ></n-input-number>
      </SettingItem> -->

      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.buttonLeftFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonLeftFontSize"
          :min="0"
          size="small"
          placeholder="标题字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="计数字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.buttonRightFontColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="计数字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonRightFontSize"
          :min="0"
          size="small"
          placeholder="计数字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="右侧按钮颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.buttonRightIconColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="右侧按钮大小">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonRightIconSize"
          :min="0"
          size="small"
          placeholder="右侧按钮大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="列表样式">
      <SettingItem name="上边距离">
        <n-input-number
          v-model:value="optionData.dataStyle.listMarginTop"
          :min="0"
          size="small"
          placeholder="上边距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.listPaddingLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="间隔距离">
        <n-input-number
          v-model:value="optionData.dataStyle.listbottom"
          :min="0"
          size="small"
          placeholder="间隔距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem>
        <n-radio-group v-model:value="optionData.dataStyle.sortOrder" name="radiogroup">
          <n-space>
            <n-radio value="0"> 时间正序排列 </n-radio>
            <n-radio value="1"> 时间倒序排列 </n-radio>
            <n-text>排序方式</n-text>
          </n-space>
        </n-radio-group>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="列表内容样式">
      <SettingItem name="标题字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.titleColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="标题字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.titleFontSize"
          :min="0"
          size="small"
          placeholder="标题字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="类型字体默认颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.typeColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="类型字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.typeFontSize"
          :min="0"
          size="small"
          placeholder="类型字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="位置字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.positionColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="位置字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.positionFontSize"
          :min="0"
          size="small"
          placeholder="位置字体大小"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="时间字体颜色">
        <n-color-picker
          size="small"
          :modes="['rgb']"
          v-model:value="optionData.dataStyle.timeColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="时间字体大小">
        <n-input-number
          v-model:value="optionData.dataStyle.timeFontSize"
          :min="0"
          size="small"
          placeholder="时间字体大小"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    类型字体颜色特殊处理
    <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.dataStyle.filedColorList" :key="index">
          <td>
            {{ index + 1 }}
          </td>
          <td>
            <n-select
              style="width: 73px"
              v-model:value="item.label"
              :options="dataList"
              size="small"
            />
          </td>
          <td>
            <n-input style="width: 75px" v-model:value="item.value" type="text" size="small" />
          </td>
          <td>
            <n-color-picker
              size="small"
              style="width: 60px"
              :modes="['rgb']"
              v-model:value="item.color"
            ></n-color-picker>
          </td>
          <td>
            <div style="width: 70px">
              <n-button
                class="go-ml-2"
                type="primary"
                size="small"
                ghost
                @click="filedColorAdd(index)"
              >
                +
              </n-button>
              <n-button
                class="go-ml-2"
                type="warning"
                size="small"
                ghost
                :disabled="props.optionData.dataStyle.filedColorList.length === 1"
                @click="filedColorRemove(index)"
              >
                -
              </n-button>
            </div>
          </td>
        </tr>
      </tbody>
    </n-table>

    类型背景颜色特殊处理
    <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.dataStyle.backColorList" :key="index">
          <td>
            {{ index + 1 }}
          </td>
          <td>
            <n-select
              style="width: 73px"
              v-model:value="item.label"
              :options="dataList"
              size="small"
            />
          </td>
          <td>
            <n-input style="width: 75px" v-model:value="item.value" type="text" size="small" />
          </td>
          <td>
            <n-color-picker
              size="small"
              style="width: 60px"
              :modes="['rgb']"
              v-model:value="item.color"
            ></n-color-picker>
          </td>
          <td>
            <div style="width: 70px">
              <n-button
                class="go-ml-2"
                type="primary"
                size="small"
                ghost
                @click="backColorAdd(index)"
              >
                +
              </n-button>
              <n-button
                class="go-ml-2"
                type="warning"
                size="small"
                ghost
                :disabled="props.optionData.dataStyle.backColorList.length === 1"
                @click="backColorRemove(index)"
              >
                -
              </n-button>
            </div>
          </td>
        </tr>
      </tbody>
    </n-table>
  </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 filedColorAdd = (index: number) => {
    props.optionData.dataStyle.filedColorList.splice(index + 1, 0, {
      label: '',
      value: '',
      color: '',
    });
  };

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

  // 新增
  const backColorAdd = (index: number) => {
    props.optionData.dataStyle.backColorList.splice(index + 1, 0, {
      label: '',
      value: '',
      color: '',
    });
  };

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

  const dataList = [
    { label: '类型', value: 'type' },
    { label: '标题', value: 'title' },
    { label: '位置', value: 'position' },
    { label: '时间', value: 'time' },
  ];
</script>
