<script setup lang="ts">
import { inject } from 'vue';

// 从主组件注入状态和方法
const tableState: any = inject('tableState');
const tableMethods: any = inject('tableMethods');

const { showSearchFieldDrawer, currentSearchField, newOptionKey, newOptionValue } = tableState;

const { saveSearchField, addOption, removeOption } = tableMethods;

defineOptions({
  name: 'SearchFieldEditDrawer'
});
</script>

<template>
  <NDrawer v-model:show="showSearchFieldDrawer" :width="400" placement="right">
    <NDrawerContent title="编辑搜索字段">
      <NForm ref="searchFieldForm" :model="currentSearchField" label-placement="left" label-width="100">
        <NFormItem label="显示名称" path="label">
          <NInput v-model:value="currentSearchField.label" placeholder="请输入显示名称"></NInput>
        </NFormItem>

        <NFormItem label="字段名" path="key">
          <NInput v-model:value="currentSearchField.key" disabled></NInput>
        </NFormItem>

        <NFormItem label="控件类型" path="type">
          <NSelect
            v-model:value="currentSearchField.type"
            :options="[
              { label: '输入框', value: 'input' },
              { label: '下拉选择', value: 'select' },
              { label: '日期选择', value: 'date' },
              { label: '数字范围', value: 'number-range' }
            ]"
          ></NSelect>
        </NFormItem>

        <NFormItem label="占位提示" path="placeholder">
          <NInput v-model:value="currentSearchField.placeholder" placeholder="请输入占位提示"></NInput>
        </NFormItem>

        <NFormItem label="默认值" path="defaultValue">
          <NInput v-model:value="currentSearchField.defaultValue" placeholder="请输入默认值"></NInput>
        </NFormItem>

        <!-- 当类型为 select 时显示选项配置 -->
        <template v-if="currentSearchField.type === 'select'">
          <NDivider>选项配置</NDivider>

          <!-- 添加新选项的输入框 -->
          <NSpace vertical>
            <NInputGroup>
              <NInput v-model:value="newOptionKey" placeholder="选项名称"></NInput>
              <NInput v-model:value="newOptionValue" placeholder="选项值"></NInput>
              <NButton type="primary" :disabled="!newOptionKey || !newOptionValue" @click="addOption">添加</NButton>
            </NInputGroup>
          </NSpace>

          <!-- 已添加选项列表 -->
          <NSpace vertical style="margin-top: 12px">
            <div
              v-for="(option, index) in currentSearchField.options"
              :key="index"
              style="display: flex; justify-content: space-between; align-items: center"
            >
              <span>{{ option.label }} - {{ option.value }}</span>
              <NButton text type="error" @click="removeOption(index)">
                <template #icon>
                  <NIcon>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                      <path
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        fill="currentColor"
                      />
                    </svg>
                  </NIcon>
                </template>
              </NButton>
            </div>
          </NSpace>
        </template>
      </NForm>

      <template #footer>
        <NSpace justify="end">
          <NButton @click="showSearchFieldDrawer = false">取消</NButton>
          <NButton type="primary" @click="saveSearchField">保存</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped>
.n-input-group {
  display: flex;
  gap: 8px;
}

.n-input-group .n-input {
  flex: 1;
}

.n-divider {
  margin: 16px 0;
}
</style>
