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

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

const { filteredColumns, visibleColumns, columnSearchText } = tableState;

const {
  handleColumnVisibleChange,
  clearColumnSearch,
  handleEditColumn,
  handleDragStart,
  handleDragOver,
  handleDrop,
  handleSetSettings
} = tableMethods;

// 添加拖拽完成后的保存处理
const handleDragEnd = () => {
  // 触发配置保存
  if (handleSetSettings) {
    handleSetSettings();
  }
};

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

<template>
  <div>
    <div class="columns-header">
      <span>显示字段</span>
      <span>显示 {{ visibleColumns.length }} 列</span>
    </div>
    <div class="columns-search">
      <NInput v-model:value="columnSearchText" placeholder="搜索列" clearable @clear="clearColumnSearch">
        <template #prefix>
          <NIcon>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path
                d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5A4.5 4.5 0 0 1 9.5 14z"
                fill="currentColor"
              />
            </svg>
          </NIcon>
        </template>
      </NInput>
    </div>
    <div class="columns-list">
      <NScrollbar style="max-height: calc(100vh - 200px)">
        <div class="columns-container">
          <div
            v-for="(column, index) in filteredColumns"
            :key="column.key"
            class="column-item"
            draggable="true"
            @dragstart="handleDragStart($event, index)"
            @dragover="handleDragOver"
            @drop="handleDrop($event, index)"
            @dragend="handleDragEnd"
          >
            <div class="column-item-left">
              <NIcon class="column-drag-handle">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <path d="M8 18h8v-2H8v2zm0-4h8v-2H8v2zm0-4h8V8H8v2zm0-4h8V4H8v2z" fill="currentColor" />
                </svg>
              </NIcon>
              <NSwitch
                :value="visibleColumns.includes(column.key)"
                size="small"
                @update:value="checked => handleColumnVisibleChange(checked, column)"
              ></NSwitch>
            </div>
            <div class="column-item-content">
              <span class="column-title">{{ column.title }}</span>
              <span class="column-key">({{ column.key }})</span>
            </div>
            <div class="column-item-right">
              <NButton text @click="handleEditColumn(column)">
                <template #icon>
                  <NIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 24 24"
                    >
                      <g fill="none">
                        <path
                          d="M3 17.75A3.25 3.25 0 0 0 6.25 21h4.915l.356-1.423l.02-.077H6.25a1.75 1.75 0 0 1-1.75-1.75V11h3.25l.184-.005A3.25 3.25 0 0 0 11 7.75V4.5h6.75c.966 0 1.75.784 1.75 1.75v4.982c.479-.19.994-.263 1.5-.22V6.25A3.25 3.25 0 0 0 17.75 3h-6.879a2.25 2.25 0 0 0-1.59.659L3.658 9.28A2.25 2.25 0 0 0 3 10.871v6.879zM7.75 9.5H5.561L9.5 5.561V7.75l-.006.144A1.75 1.75 0 0 1 7.75 9.5zm11.35 3.17l-5.903 5.902a2.686 2.686 0 0 0-.706 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.685 2.685 0 0 0 1.248-.707l5.902-5.902A2.286 2.286 0 0 0 19.1 12.67z"
                          fill="currentColor"
                        ></path>
                      </g>
                    </svg>
                  </NIcon>
                </template>
              </NButton>
            </div>
          </div>
        </div>
      </NScrollbar>
    </div>
  </div>
</template>

<style scoped>
.columns-header {
  padding: 0 16px 12px;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}

.columns-search {
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.columns-list {
  flex: 1;
  overflow: hidden;
}

.columns-container {
  display: flex;
  flex-direction: column;
}

.column-item {
  padding: 8px 16px;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid var(--n-border-color);
  align-items: center;
}

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

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

.column-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin-left: 12px;
}

.column-title {
  font-size: 12px;
  color: var(--n-text-color);
}

.column-key {
  font-size: 12px;
  color: var(--n-text-color-3);
}

.column-item-right {
  opacity: 0;
  transition: opacity 0.3s;
  margin-left: auto;
}

.column-item:hover .column-item-right {
  opacity: 1;
}

.columns-search :deep(.n-input) {
  --n-height: 32px;
}

.columns-search :deep(.n-input-wrapper) {
  background-color: var(--n-card-color);
}

.columns-search :deep(.n-input__prefix) {
  margin-right: 8px;
}

.columns-search :deep(.n-icon) {
  font-size: 16px;
  color: var(--n-text-color-3);
}
</style>
