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

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

const { searchFields } = tableState;

defineOptions({
  name: 'SearchFieldSettings'
});

const {
  addSearchField,
  editSearchField,
  removeSearchField,
  updateFieldVisibility,
  handleSearchFieldDragStart,
  handleSearchFieldDragOver,
  handleSearchFieldDrop
} = tableMethods;
</script>

<template>
  <div>
    <div class="search-config-header">
      <span>搜索字段配置</span>
      <NButton size="small" type="primary" @click="addSearchField">添加字段</NButton>
    </div>

    <div class="search-fields-list">
      <NScrollbar style="max-height: calc(100vh - 200px)">
        <div class="search-fields-container">
          <div
            v-for="field in searchFields"
            :key="field.key"
            class="search-field-item"
            draggable="true"
            @dragstart="handleSearchFieldDragStart($event, field)"
            @dragover="handleSearchFieldDragOver"
            @drop="handleSearchFieldDrop($event, field)"
          >
            <div class="field-item-left">
              <NIcon class="field-drag-handle">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M8 18h8v-2H8v2zm0-4h8v-2H8v2zm0-4h8V8H8v2zm0-4h8V4H8v2z" fill="currentColor" />
                </svg>
              </NIcon>
              <NSwitch
                :value="field.visible"
                size="small"
                @update:value="val => updateFieldVisibility(field, val)"
              ></NSwitch>
            </div>

            <div class="field-item-content">
              <span class="field-label">{{ field.label }}</span>
              <span class="field-key">({{ field.key }})</span>
            </div>

            <div class="field-item-right">
              <NButton text @click="editSearchField(field)">
                <template #icon>
                  <NIcon>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                        fill="currentColor"
                      />
                    </svg>
                  </NIcon>
                </template>
              </NButton>
              <NButton text @click="removeSearchField(field)">
                <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>
          </div>
        </div>
      </NScrollbar>
    </div>
  </div>
</template>

<style scoped>
.search-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--n-border-color);
}

.search-fields-container {
  padding: 8px 0;
}

.search-field-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--n-border-color);
  cursor: move;
}

.field-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-drag-handle {
  cursor: move;
  color: var(--n-text-color-3);
}

.field-item-content {
  flex: 1;
  margin: 0 12px;
}

.field-label {
  font-size: 14px;
  color: var(--n-text-color);
}

.field-key {
  font-size: 12px;
  color: var(--n-text-color-3);
  margin-left: 8px;
}

.field-item-right {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.search-field-item:hover .field-item-right {
  opacity: 1;
}
</style>
