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

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

// 获取表格数据和列
const { tagMappings, transformRules, selectedField, availableFields } = tableState;

// 颜色选项
const colorOptions = [
  { label: '默认', value: 'default' },
  { label: '主要', value: 'primary' },
  { label: '信息', value: 'info' },
  { label: '成功', value: 'success' },
  { label: '警告', value: 'warning' },
  { label: '错误', value: 'error' }
];

// 添加/删除映射规则
const addTagMapping = () => {
  tableMethods.addTagMapping();
};

const removeTagMapping = (index: number) => {
  tableMethods.removeTagMapping(index);
};

// 添加转换规则
const addTransformRule = () => {
  if (!selectedField.value) return;

  // 过滤掉空值映射
  const validMappings = tagMappings.value.filter((mapping: any) => mapping.value !== '' && mapping.label !== '');

  if (validMappings.length === 0) {
    window.$message?.error('请添加至少一个有效的标记映射');
    return;
  }

  tableMethods.addTransformRule({
    field: selectedField.value,
    fieldLabel: availableFields.value.find((f: any) => f.value === selectedField.value)?.label || selectedField.value,
    type: 'tag',
    typeLabel: '转换标记',
    params: { mappings: validMappings }
  });

  // 重置输入
  selectedField.value = '';
  tagMappings.value = [{ value: '', label: '', color: '' }];
};

// 移除转换规则
const removeTransformRule = (index: number) => {
  tableMethods.removeTransformRule(index);
};

// 应用转换规则
const applyTransforms = () => {
  tableMethods.applyTransformations();
};

// 重置数据转换
const resetData = () => {
  // 清除所有转换规则
  transformRules.value = [];

  // 重新获取数据
  tableMethods.fetchData();
  window.$message?.success('数据已重置');
};

// 暴露方法给父组件
defineExpose({
  transformRules,
  applyTransforms,
  resetData
});

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

<template>
  <div class="data-transform-container">
    <h3>数据转换设置</h3>

    <div class="transform-form">
      <div class="form-row">
        <div class="form-item">
          <label>字段名</label>
          <NSelect v-model:value="selectedField" :options="availableFields" placeholder="请选择字段" />
        </div>
      </div>

      <!-- 标记转换参数 -->
      <div class="param-section">
        <h4>转换内容</h4>

        <div v-for="(mapping, index) in tagMappings" :key="index" class="mapping-item">
          <div class="mapping-row">
            <div class="mapping-field">
              <label>Name</label>
              <NInput v-model:value="mapping.value" placeholder="表格值" />
            </div>
            <div class="mapping-field">
              <label>Value</label>
              <NInput v-model:value="mapping.label" placeholder="显示文本" />
            </div>
            <div class="mapping-field">
              <label>颜色</label>
              <NSelect v-model:value="mapping.color" :options="colorOptions" placeholder="选择颜色" />
            </div>
            <NButton
              circle
              type="error"
              size="small"
              class="remove-btn"
              :disabled="tagMappings.length === 1"
              @click="removeTagMapping(index)"
            >
              <span>-</span>
            </NButton>
          </div>
        </div>

        <div class="add-mapping">
          <NButton circle type="primary" size="small" class="add-btn" @click="addTagMapping">
            <span>+</span>
          </NButton>
        </div>
      </div>

      <div class="button-row">
        <NButton type="primary" :disabled="!selectedField" @click="addTransformRule">添加规则</NButton>
      </div>

      <div v-if="transformRules.length > 0" class="rules-list">
        <h4>转换规则列表</h4>
        <div v-for="(rule, index) in transformRules" :key="index" class="rule-item">
          <div class="rule-content">
            <span class="field-name">{{ rule.fieldLabel }}</span>
            <span class="transform-arrow">→</span>
            <span class="transform-type">{{ rule.typeLabel }}</span>
          </div>
          <NButton size="small" type="error" @click="removeTransformRule(index)">删除</NButton>
        </div>

        <div class="action-buttons">
          <NButton type="primary" :disabled="transformRules.length === 0" @click="applyTransforms">应用转换</NButton>
          <NButton @click="resetData">重置数据</NButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.data-transform-container {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
}

.transform-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.param-section {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px;
}

.param-section h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #666;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.rules-list {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.rule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 8px;
}

.rule-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-name {
  font-weight: 500;
}

.transform-arrow {
  color: #666;
}

.transform-type {
  color: #2080f0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.mapping-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eee;
}

.mapping-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.mapping-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.remove-btn {
  margin-bottom: 4px;
}

.add-mapping {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
</style>
