<template>
  <CollapseItem name="样式设置" :expanded="true">
    <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.dataset" :key="index">
          <td>
            {{ index + 1 }}
          </td>
          <td>
            <n-input v-model:value="item.value" type="text" size="small" />
          </td>
          <td>
            <n-select
              style="width: 100px"
              v-model:value="item.value"
              :options="dataList"
              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.dataset.length === 1"
                @click="remove(index)"
              >
                -
              </n-button>
            </div>
          </td>
        </tr>
      </tbody>
    </n-table>

    <SettingItemBox name="样式">
      <SettingItem name="背景颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.backgroud"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="间隔距离">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonGap"
          :min="0"
          size="small"
          placeholder="间隔距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="上边距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginTop"
          :min="0"
          size="small"
          placeholder="上边距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="左右距离">
        <n-input-number
          v-model:value="optionData.dataStyle.marginLeft"
          :min="0"
          size="small"
          placeholder="左右距离"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="文字颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.dataStyle.fontcolor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="文字大小">
        <n-input-number size="small" v-model:value="optionData.dataStyle.fontsize" :min="0" />
      </SettingItem>
      <SettingItem name="按钮宽度">
        <n-input-number
          v-model:value="optionData.dataStyle.buttonWidth"
          :min="0"
          size="small"
          placeholder="按钮宽度"
        ></n-input-number>
      </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 dataList = [
    { label: '蔓延分析', value: '蔓延分析' },
    { label: '态势标绘', value: '态势标绘' },
    { label: '灾害评估', value: '灾害评估' },
  ];

  // 新增
  const add = (index: number) => {
    props.optionData.dataset.splice(index + 1, 0, {
      value: '',
    });
  };

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