<template>
  <div class="config-editor">
    <div class="page-header">
      <h1>Config.xml 编辑器</h1>
      <div class="auto-load-status" v-if="isLoading">
        <span class="loading-spinner"></span>
        <span>正在加载默认XML文件...</span>
      </div>
      <div class="file-info" v-if="currentFileName">
        <span>当前文件: {{ currentFileName }}</span>
      </div>
    </div>

    <div class="editor-container">
      <!-- 初始提示 -->
      <div class="welcome-message" v-if="!uploadedTags.length">
        <h2>欢迎使用 Config.xml 编辑器</h2>
        <p>请上传XML文件或使用预设模板开始编辑</p>
        <div class="welcome-buttons">
          <button @click="triggerFileInput" class="welcome-btn">上传 XML 文件</button>
          <button @click="loadDefaultXmlFiles" class="welcome-btn">加载默认 XML 文件</button>
        </div>
      </div>
      
      <!-- 侧边栏 -->
      <div class="sidebar" v-if="tagList.length > 0 && uploadedTags.length > 0">
        <h3>标签列表</h3>
          <!-- 搜索框 -->
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchQuery" 
              placeholder="输入ID搜索..."
              @input="searchTags"
            />
            <button @click="clearSearch" class="clear-btn">×</button>
          </div>
        <div class="tag-list">
          <div 
            v-for="tag in filteredTags" 
            :key="tag.id"
            class="tag-item"
            draggable="true"
            @dragstart="dragStart(tag)"
            @click="insertTag(tag)"
          >
            <span class="tag-type">{{ tag.type }}</span>
            <span class="tag-id">{{ tag.id }}</span>
            <!-- 缓存值预览 -->
            <span class="tag-preview" v-if="tag.content.length > 50">
              {{ tag.content.substring(0, 50) }}...
            </span>
            <span class="tag-preview" v-else>
              {{ tag.content }}
            </span>
          </div>
        </div>
      </div>

      <div class="input-section">
        <div class="button-group">
          <button @click="addEntry" class="gradient-btn">添加</button>
          <button @click="validateXml" class="gradient-btn">验证 XML</button>
          <button @click="download" class="gradient-btn">下载 XML</button>
          <button @click="clearAll" class="gradient-btn">清空所有</button>
          <input type="file" id="fileInput" accept=".xml" @change="handleFileUpload" style="display: none">
          <button @click="triggerFileInput" class="gradient-btn">上传 XML</button>
        </div>
        
        <!-- 预设按钮区域 -->
        <div class="preset-buttons">
          <h3>预设模板</h3>
          <div class="preset-button-group">
            <button @click="insertTemplate('LogicCommand')" class="preset-btn">LogicCommand</button>
            <button @click="insertTemplate('LogicCommandSet')" class="preset-btn">LogicCommandSet</button>
            <button @click="insertTemplate('SpecialPower')" class="preset-btn">SpecialPower</button>
            <button @click="insertTemplate('Locomotor')" class="preset-btn">LocomotorTemplate</button>
            <button @click="insertTemplate('LocomotorSet')" class="preset-btn">LocomotorSet</button>
            <button @click="insertTemplate('UnitAbilityButtonTemplate')" class="preset-btn">UnitAbilityButtonTemplate</button>
            <button @click="insertTemplate('ButtonStateData')" class="preset-btn">ButtonStateData</button>
          </div>
        </div>

        <div class="message-section">
          <p v-if="errorMsg" class="error-message">{{ errorMsg }}</p>
          <p v-if="warningMsg" class="warning-message">{{ warningMsg }}</p>
        </div>

        <div class="input-group">
          <label for="newEntry">输入 LogicCommand、LogicCommandSet、SpecialPower、LocomotorTemplate、LocomotorSet、UnitAbilityButtonTemplate 或 ButtonSingleStateData 标签：</label>
          <textarea 
            id="newEntry"
            v-model="newEntry" 
            placeholder="输入 LogicCommand、LogicCommandSet、SpecialPower、LocomotorTemplate 或 LocomotorSet 标签"
            class="entry-textarea"
            @dragover.prevent
            @drop="dropTag"
          ></textarea>
        </div>
      </div>

      <div class="editor-section">
        <h3>编辑区 <span class="entry-count">({{ entries.length }} 个条目)</span></h3>
        <div class="xml-stats" v-if="xmlContent">
          <span>LogicCommand: {{ getLogicCommandCount() }}</span>
          <span>LogicCommandSet: {{ getLogicCommandSetCount() }}</span>
          <span>SpecialPower: {{ getSpecialPowerCount() }}</span>
          <span>LocomotorTemplate: {{ getLocomotorCount() }}</span>
          <span>LocomotorSet: {{ getLocomotorSetCount() }}</span>
          <span>文件大小: {{ getFileSize() }}</span>
          <span v-if="lastModified">最后修改: {{ lastModified }}</span>
        </div>
        <textarea 
          v-model="xmlContent" 
          class="xml-textarea"
          placeholder="XML内容将在这里显示..."
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import '../../assets/styles/common.css'

// 响应式数据
const header = ref(`<?xml version="1.0" encoding="utf-8"?>\n<AssetDeclaration xmlns="uri:ea.com:eala:asset">`)
const footer = ref(`</AssetDeclaration>`)
const isLoading = ref(false)
const entries = ref([])
const newEntry = ref('')
const xmlContent = ref('')
const errorMsg = ref('')
const warningMsg = ref('')
const lastModified = ref('')
const draggedTag = ref(null)
const searchQuery = ref('')
const filteredTags = ref([])
// 存储所有上传的标签
const uploadedTags = ref([])
// 存储当前单位使用的命令集和特殊能力ID
const unitRelatedIds = ref([])

// 修改计算属性：只从uploadedTags中提取标签列表，不再从编辑区提取，并根据unitRelatedIds过滤
const tagList = computed(() => {
  const tags = []
  
  // 不再从编辑区条目中提取标签
  
  // 只从上传的标签中提取，并根据unitRelatedIds过滤
  uploadedTags.value.forEach(tag => {
    // 如果unitRelatedIds为空或者包含当前标签的id，则添加到列表中
    if (unitRelatedIds.value.length === 0 || unitRelatedIds.value.includes(tag.id)) {
      tags.push({
        id: tag.id,
        type: tag.type,
        content: tag.content,
        source: 'upload',
        inheritFrom: tag.inheritFrom,
        locomotorId: tag.locomotorId,
        cmdIds: tag.cmdIds
      })
    }
    
    // 如果是继承的LocomotorTemplate，也添加父模板
    if (tag.inheritFrom && unitRelatedIds.value.includes(tag.id)) {
      // 查找父模板
      const parentTag = uploadedTags.value.find(t => t.id === tag.inheritFrom)
      if (parentTag && !tags.some(t => t.id === parentTag.id)) {
        tags.push({
          id: parentTag.id,
          type: parentTag.type,
          content: parentTag.content,
          source: 'upload',
          inheritFrom: parentTag.inheritFrom,
          isParentTemplate: true
        })
      }
    }
    
    // 如果是LocomotorSet，也添加引用的Locomotor
    if (tag.locomotorId && unitRelatedIds.value.includes(tag.id)) {
      // 查找引用的Locomotor
      const locomotorTag = uploadedTags.value.find(t => t.id === tag.locomotorId)
      if (locomotorTag && !tags.some(t => t.id === locomotorTag.id)) {
        tags.push({
          id: locomotorTag.id,
          type: locomotorTag.type,
          content: locomotorTag.content,
          source: 'upload',
          inheritFrom: locomotorTag.inheritFrom,
          isReferencedLocomotor: true
        })
        
        // 如果引用的Locomotor有继承关系，也添加其父模板
        if (locomotorTag.inheritFrom) {
          const parentLocomotorTag = uploadedTags.value.find(t => t.id === locomotorTag.inheritFrom)
          if (parentLocomotorTag && !tags.some(t => t.id === parentLocomotorTag.id)) {
            tags.push({
              id: parentLocomotorTag.id,
              type: parentLocomotorTag.type,
              content: parentLocomotorTag.content,
              source: 'upload',
              inheritFrom: parentLocomotorTag.inheritFrom,
              isParentTemplate: true
            })
          }
        }
      }
    }
    
    // 如果是LogicCommandSet，也添加引用的LogicCommand
    if (tag.cmdIds && tag.cmdIds.length > 0 && (unitRelatedIds.value.length === 0 || unitRelatedIds.value.includes(tag.id))) {
      // 遍历所有的Cmd标签
      tag.cmdIds.forEach(cmdId => {
        // 查找对应的LogicCommand
        const cmdTag = uploadedTags.value.find(t => t.id === cmdId)
        if (cmdTag && !tags.some(t => t.id === cmdTag.id)) {
          tags.push({
            id: cmdTag.id,
            type: cmdTag.type,
            content: cmdTag.content,
            source: 'upload',
            isReferencedCommand: true,
            referencedBy: tag.id
          })
          
          // 查找引用这个LogicCommand的UnitAbilityButtonTemplate
          const buttonTemplates = uploadedTags.value.filter(t => 
            t.type === 'UnitAbilityButtonTemplate' && 
            t.logicCommandId === cmdId
          )
          
          // 添加找到的UnitAbilityButtonTemplate
          buttonTemplates.forEach(buttonTemplate => {
            if (!tags.some(t => t.id === buttonTemplate.id)) {
              tags.push({
                id: buttonTemplate.id,
                type: buttonTemplate.type,
                content: buttonTemplate.content,
                source: 'upload',
                isReferencedButtonTemplate: true,
                referencedByCommand: cmdId
              })
              
              // 查找并添加ButtonStateData
              if (buttonTemplate.stateDataIds && buttonTemplate.stateDataIds.length > 0) {
                buttonTemplate.stateDataIds.forEach(stateDataId => {
                  // 查找对应的ButtonStateData
                  const stateDataTag = uploadedTags.value.find(t => 
                    (t.type === 'ButtonSingleStateData' || t.type === 'ButtonDoubleStateData') && 
                    t.id === stateDataId
                  )
                  
                  if (stateDataTag && !tags.some(t => t.id === stateDataTag.id)) {
                    tags.push({
                      id: stateDataTag.id,
                      type: stateDataTag.type,
                      content: stateDataTag.content,
                      source: 'upload',
                      isReferencedStateData: true,
                      referencedByButtonTemplate: buttonTemplate.id
                    })
                  }
                })
              }
            }
          })
        }
      })
    }
  })
  
  // 初始化过滤后的标签
  filteredTags.value = [...tags]
  return tags
})

// 拖拽开始
const dragStart = (tag) => {
  draggedTag.value = tag
}

//搜索标签
const searchTags = () => {
  if (!searchQuery.value.trim()) {
    filteredTags.value = [...tagList.value]
    return
  }
  
  const query = searchQuery.value.toLowerCase()
  filteredTags.value = tagList.value.filter(tag => 
    tag.id.toLowerCase().includes(query) || 
    tag.content.toLowerCase().includes(query)
  )
}

//清除搜索
const clearSearch = () => {
  searchQuery.value = ''
  filteredTags.value = [...tagList.value]
}

// 放置标签
const dropTag = (e) => {
  e.preventDefault()
  if (draggedTag.value) {
    insertTag(draggedTag.value)
    draggedTag.value = null
  }
}

// 插入标签
const insertTag = (tag) => {
  // 直接使用标签的内容，无论是来自编辑区还是上传
  newEntry.value = tag.content
}

// 触发文件输入
const triggerFileInput = () => {
  document.getElementById('fileInput').click()
}

// 处理文件上传
const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const content = e.target.result
      
      // 检查是否是单位XML文件
      if (content.includes('<GameObject') && content.includes('CommandSet=')) {
        // 解析单位XML文件，提取命令集和特殊能力ID
        extractUnitRelatedIds(content)
        
        // 如果是单位文件，自动加载默认XML文件
        loadDefaultXmlFiles()
          .then(() => {
            warningMsg.value = `已加载单位相关的命令集和特殊能力`
            
            // 检查是否有CommandSet但没有找到对应的LogicCommand
            const commandSets = unitRelatedIds.value.filter(id => id.includes('CommandSet'))
            if (commandSets.length > 0) {
              // 查找所有CommandSet引用的LogicCommand
              let foundLogicCommands = false
              commandSets.forEach(commandSetId => {
                const commandSetTag = uploadedTags.value.find(tag => tag.id === commandSetId)
                if (commandSetTag && commandSetTag.cmdIds && commandSetTag.cmdIds.length > 0) {
                  // 检查是否找到了所有引用的LogicCommand
                  const missingCommands = commandSetTag.cmdIds.filter(cmdId => 
                    !uploadedTags.value.some(tag => tag.id === cmdId && tag.type === 'LogicCommand')
                  )
                  
                  if (missingCommands.length > 0) {
                    console.log(`CommandSet ${commandSetId} 引用的以下LogicCommand未找到: ${missingCommands.join(', ')}`)
                  } else {
                    foundLogicCommands = true
                    console.log(`已找到CommandSet ${commandSetId} 引用的所有LogicCommand`)
                  }
                }
              })
              
              if (!foundLogicCommands) {
                warningMsg.value += `。未找到CommandSet引用的LogicCommand，请确保已上传LogicCommand.xml文件`
              }
            }
          })
          .catch(error => {
            errorMsg.value = '加载默认XML文件时出错: ' + error.message
          })
      } else {
        // 如果不是单位文件，正常解析XML
        parseAndImportXml(content)
      }
    } catch (error) {
      errorMsg.value = '文件解析失败: ' + error.message
    }
  }
  reader.readAsText(file)
}

// 查找与LogicCommand相关的UnitAbilityButtonTemplate和ButtonStateData
const findRelatedButtonTemplates = (logicCommandId) => {
  // 查找引用这个LogicCommand的UnitAbilityButtonTemplate
  const buttonTemplates = uploadedTags.value.filter(tag => 
    tag.type === 'UnitAbilityButtonTemplate' && 
    tag.logicCommandId === logicCommandId
  )
  
  if (buttonTemplates.length > 0) {
    console.log(`找到 ${buttonTemplates.length} 个引用LogicCommand ${logicCommandId} 的UnitAbilityButtonTemplate`)
    
    // 将找到的UnitAbilityButtonTemplate添加到unitRelatedIds中
    buttonTemplates.forEach(buttonTemplate => {
      if (!unitRelatedIds.value.includes(buttonTemplate.id)) {
        unitRelatedIds.value.push(buttonTemplate.id)
        console.log(`添加UnitAbilityButtonTemplate: ${buttonTemplate.id}`)
        
        // 查找并添加ButtonStateData
        if (buttonTemplate.stateDataIds && buttonTemplate.stateDataIds.length > 0) {
          buttonTemplate.stateDataIds.forEach(stateDataId => {
            if (!unitRelatedIds.value.includes(stateDataId)) {
              unitRelatedIds.value.push(stateDataId)
              console.log(`添加ButtonStateData: ${stateDataId}`)
            }
          })
        }
      }
    })
  } else {
    console.log(`未找到引用LogicCommand ${logicCommandId} 的UnitAbilityButtonTemplate`)
  }
}

// 提取单位相关的命令集、特殊能力ID和运动器ID
const extractUnitRelatedIds = (xmlContent) => {
  try {
    // 清空之前的相关ID
    unitRelatedIds.value = []
    
    const parser = new DOMParser()
    const xmlDoc = parser.parseFromString(xmlContent, 'application/xml')
    
    // 查找GameObject节点
    const gameObjects = xmlDoc.getElementsByTagName('GameObject')
    if (gameObjects.length === 0) {
      warningMsg.value = '未找到GameObject节点'
      return
    }
    
    // 遍历所有GameObject节点
    for (let i = 0; i < gameObjects.length; i++) {
      const gameObject = gameObjects[i]
      
      // 提取CommandSet属性
      const commandSet = gameObject.getAttribute('CommandSet')
      if (commandSet) {
        unitRelatedIds.value.push(commandSet)
        
        // 记录单位ID和名称，用于显示
        const unitId = gameObject.getAttribute('id')
        const unitName = gameObject.getAttribute('EditorName') || unitId
        warningMsg.value = `已加载单位 ${unitName} (${unitId}) 的相关配置，命令集: ${commandSet}`
        
        // 查找对应的CommandSet标签，提取其中的LogicCommand ID
        const commandSetTag = uploadedTags.value.find(tag => tag.id === commandSet && tag.type === 'LogicCommandSet')
        if (commandSetTag && commandSetTag.cmdIds && commandSetTag.cmdIds.length > 0) {
          // 将CommandSet中引用的所有LogicCommand ID添加到unitRelatedIds中
          commandSetTag.cmdIds.forEach(cmdId => {
            if (!unitRelatedIds.value.includes(cmdId)) {
              unitRelatedIds.value.push(cmdId)
              console.log(`添加CommandSet ${commandSet} 引用的LogicCommand: ${cmdId}`)
              
              // 查找与LogicCommand相关的UnitAbilityButtonTemplate
              findRelatedButtonTemplates(cmdId)
            }
          })
        } else {
          console.log(`未找到CommandSet ${commandSet} 或其中没有引用LogicCommand`)
        }
      }
      
      // 查找Behaviors节点
      const behaviors = gameObject.getElementsByTagName('Behaviors')
      if (behaviors.length > 0) {
        // 查找所有SpecialPower节点
        const specialPowers = behaviors[0].getElementsByTagName('SpecialPower')
        for (let j = 0; j < specialPowers.length; j++) {
          const specialPower = specialPowers[j]
          const template = specialPower.getAttribute('SpecialPowerTemplate')
          if (template) {
            unitRelatedIds.value.push(template)
            console.log(`找到特殊能力模板: ${template}`)
          }
        }
        
        // 查找所有ToggleStatusSpecialAbilityUpdate节点
        const toggleUpdates = behaviors[0].getElementsByTagName('ToggleStatusSpecialAbilityUpdate')
        for (let j = 0; j < toggleUpdates.length; j++) {
          const toggleUpdate = toggleUpdates[j]
          const template = toggleUpdate.getAttribute('SpecialPowerTemplate')
          if (template) {
            unitRelatedIds.value.push(template)
            console.log(`找到切换特殊能力模板: ${template}`)
          }
        }
        
        // 查找所有LocomotorSet节点
        const locomotorSets = behaviors[0].getElementsByTagName('LocomotorSet')
        for (let j = 0; j < locomotorSets.length; j++) {
          const locomotorSet = locomotorSets[j]
          const locomotorId = locomotorSet.getAttribute('Locomotor')
          if (locomotorId) {
            unitRelatedIds.value.push(locomotorId)
            console.log(`找到运动器模板: ${locomotorId}`)
          }
        }
      }
    }
    
    // 递归查找所有节点中的SpecialPowerTemplate属性
    const findAllSpecialPowerTemplates = (node) => {
      if (node.nodeType === 1) { // 元素节点
        const template = node.getAttribute('SpecialPowerTemplate')
        if (template && !unitRelatedIds.value.includes(template)) {
          unitRelatedIds.value.push(template)
          console.log(`找到额外的特殊能力模板: ${template}`)
        }
        
        // 递归查找子节点
        for (let i = 0; i < node.childNodes.length; i++) {
          findAllSpecialPowerTemplates(node.childNodes[i])
        }
      }
    }
    
    // 从根节点开始递归查找
    findAllSpecialPowerTemplates(xmlDoc.documentElement)
    
    // 查找SpecialPowerTemplate标签中的id，这些可能是其他特殊能力模板引用的
    const specialPowerTemplates = xmlDoc.getElementsByTagName('SpecialPowerTemplate')
    for (let i = 0; i < specialPowerTemplates.length; i++) {
      const template = specialPowerTemplates[i]
      const id = template.getAttribute('id')
      if (id && !unitRelatedIds.value.includes(id)) {
        unitRelatedIds.value.push(id)
        console.log(`找到SpecialPowerTemplate标签: ${id}`)
      }
    }
    
    // 查找LocomotorSet节点
    const locomotorSets = xmlDoc.getElementsByTagName('LocomotorSet')
    for (let i = 0; i < locomotorSets.length; i++) {
      const locomotorSet = locomotorSets[i]
      const locomotorId = locomotorSet.getAttribute('Locomotor')
      if (locomotorId && !unitRelatedIds.value.includes(locomotorId)) {
        unitRelatedIds.value.push(locomotorId)
        console.log(`找到LocomotorSet中的Locomotor: ${locomotorId}`)
      }
    }
    
    console.log('提取的相关ID:', unitRelatedIds.value)
    
    // 确保标签列表被更新
    filteredTags.value = tagList.value.filter(tag => 
      unitRelatedIds.value.length === 0 || unitRelatedIds.value.includes(tag.id)
    )
    
    // 如果没有找到任何标签，显示警告
    if (unitRelatedIds.value.length > 0 && filteredTags.value.length === 0) {
      warningMsg.value += `。未找到相关标签，请确保已上传包含这些ID的XML文件。`
    } else if (unitRelatedIds.value.length > 0) {
      // 显示找到的特殊能力模板和运动器模板
      const specialPowerIds = unitRelatedIds.value.filter(id => id.includes('SpecialPower_'))
      const locomotorIds = unitRelatedIds.value.filter(id => id.includes('Locomotor'))
      
      let additionalInfo = ''
      if (specialPowerIds.length > 0) {
        additionalInfo += `，找到特殊能力模板: ${specialPowerIds.join(', ')}`
      }
      if (locomotorIds.length > 0) {
        additionalInfo += `，找到运动器模板: ${locomotorIds.join(', ')}`
      }
      
      if (additionalInfo) {
        warningMsg.value += additionalInfo
      }
    }
  } catch (error) {
    console.error('提取单位相关ID时出错:', error)
    errorMsg.value = '提取单位相关ID时出错: ' + error.message
  }
}

// 加载默认XML文件
const loadDefaultXmlFiles = async () => {
  try {
    errorMsg.value = ''
    isLoading.value = true
    
    // 不清空之前上传的标签，而是追加新标签
    // uploadedTags.value = []
    
    let totalTagsLoaded = 0
    let totalTagsAdded = 0
    
    // 定义要加载的XML文件列表，优先级较低的文件
    const xmlFiles = [
      { name: 'SpecialPowerTemplates.xml', required: true },
      { name: 'Locomotor.xml', required: true },
      { name: 'LogicCommand.xml', required: true },
      { name: 'UnitAbilityButtonTemplates.xml', required: true },
      { name: 'ButtonStateDataCommon.xml', required: true }
    ];
    
    // 添加加载状态指示
    let loadingStatus = document.createElement('div');
    loadingStatus.className = 'loading-status';
    loadingStatus.textContent = '正在加载XML文件...';
    loadingStatus.style.position = 'fixed';
    loadingStatus.style.top = '50%';
    loadingStatus.style.left = '50%';
    loadingStatus.style.transform = 'translate(-50%, -50%)';
    loadingStatus.style.padding = '15px 30px';
    loadingStatus.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    loadingStatus.style.color = 'white';
    loadingStatus.style.borderRadius = '8px';
    loadingStatus.style.zIndex = '9999';
    loadingStatus.style.fontSize = '16px';
    document.body.appendChild(loadingStatus);
    
    // 依次加载每个XML文件
    for (const file of xmlFiles) {
      try {
        const response = await fetch(`/${file.name}`)
        if (response.ok) {
          const xmlContent = await response.text()
          const beforeCount = uploadedTags.value.length
          const parsedCount = parseAndImportXml(xmlContent, false) // 不显示消息
          const afterCount = uploadedTags.value.length
          totalTagsLoaded += parsedCount
          totalTagsAdded += (afterCount - beforeCount)
          console.log(`成功加载 ${file.name}，解析了 ${parsedCount} 个标签，新增 ${afterCount - beforeCount} 个标签`)
          
          // 如果是LogicCommand.xml，特别记录一下
          if (file.name === 'LogicCommand.xml') {
            console.log(`成功加载LogicCommand.xml，找到 ${parsedCount} 个LogicCommand标签`)
          }
        } else {
          if (file.required) {
            console.error(`必需的文件 ${file.name} 加载失败: ${response.status}`)
            warningMsg.value = `必需的文件 ${file.name} 加载失败，请检查public目录`
          } else {
            console.warn(`可选文件 ${file.name} 加载失败: ${response.status}`)
          }
        }
      } catch (e) {
        if (file.required) {
          console.error(`必需的文件 ${file.name} 加载出错:`, e)
          errorMsg.value = `必需的文件 ${file.name} 加载出错: ${e.message}`
        } else {
          console.log(`可选文件 ${file.name} 不存在或无法加载`, e)
        }
      }
    }
    
    // 移除加载状态指示
    if (loadingStatus && loadingStatus.parentNode) {
      loadingStatus.parentNode.removeChild(loadingStatus);
    }
    isLoading.value = false
    
    // 如果有单位相关ID，计算匹配的标签数量
    let matchedCount = 0
    if (unitRelatedIds.value.length > 0) {
      matchedCount = uploadedTags.value.filter(tag => unitRelatedIds.value.includes(tag.id)).length
      warningMsg.value = `已成功加载默认XML文件，解析了 ${totalTagsLoaded} 个标签，找到 ${matchedCount} 个与单位相关的标签`
    } else if (totalTagsLoaded > 0) {
      if (totalTagsAdded > 0) {
        warningMsg.value = `已成功加载默认XML文件，解析了 ${totalTagsLoaded} 个标签，新增 ${totalTagsAdded} 个标签`
      } else {
        warningMsg.value = `已成功加载默认XML文件，解析了 ${totalTagsLoaded} 个标签，所有标签已存在`
      }
    } else {
      warningMsg.value = '未能加载任何默认XML文件，请检查public目录中是否存在这些文件'
    }
    
    return { totalTagsLoaded, totalTagsAdded, matchedCount }
  } catch (error) {
    errorMsg.value = '加载默认XML文件失败: ' + error.message
    warningMsg.value = ''
    throw error // 重新抛出错误，以便调用者可以捕获
  }
}

// 组件挂载时自动加载默认XML文件
onMounted(() => {
  // 自动加载默认XML文件
  console.log('组件已挂载，开始加载默认XML文件...')
  // 清空单位相关ID，确保加载所有标签
  unitRelatedIds.value = []
  
  // 确保优先加载LogicCommand.xml、LogicCommandSet.xml、Locomotor.xml、UnitAbilityButtonTemplates.xml和ButtonStateDataCommon.xml
  const priorityFiles = ['LogicCommand.xml', 'LogicCommandSet.xml', 'Locomotor.xml', 'UnitAbilityButtonTemplates.xml', 'ButtonStateDataCommon.xml'];
  
  // 当前文件名
  const currentFileName = ref('');
  
  // 创建一个加载状态提示
  isLoading.value = true;
  warningMsg.value = '正在加载默认XML文件...';
  
  // 先尝试加载这三个必需的文件
  Promise.all(priorityFiles.map(file => 
    fetch(`/${file}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`${file} 加载失败: ${response.status}`);
        }
        return response.text();
      })
      .then(content => {
        console.log(`成功获取 ${file} 内容`);
        return { file, content };
      })
      .catch(error => {
        console.error(`加载 ${file} 时出错:`, error);
        return { file, error };
      })
  ))
  .then(results => {
    // 处理加载结果
    let successCount = 0;
    let totalTags = 0;
    
    results.forEach(result => {
      if (result.content) {
        // 成功加载文件，解析内容
        const parsedCount = parseAndImportXml(result.content, false);
        totalTags += parsedCount;
        successCount++;
        console.log(`成功解析 ${result.file}，找到 ${parsedCount} 个标签`);
        currentFileName.value = result.file;
      }
    });
    
    // 更新加载状态
    isLoading.value = false;
    
    if (successCount === priorityFiles.length) {
      warningMsg.value = `已成功加载默认XML文件，共解析 ${totalTags} 个标签`;
    } else {
      // 如果有文件加载失败，显示警告
      warningMsg.value = `部分默认XML文件加载失败，成功加载了 ${successCount}/${priorityFiles.length} 个文件，共解析 ${totalTags} 个标签`;
    }
    
    // 然后加载其他可选文件
    loadDefaultXmlFiles()
      .then(({ totalTagsLoaded }) => {
        console.log('所有默认XML文件加载完成，共加载', totalTagsLoaded, '个标签');
      })
      .catch(error => {
        console.error('加载其他默认XML文件时出错:', error);
      });
  })
  .catch(error => {
    isLoading.value = false;
    console.error('加载默认XML文件时出错:', error);
    errorMsg.value = '加载默认XML文件时出错: ' + error.message;
  });
})

// 修改后的解析并导入XML内容
const parseAndImportXml = (xmlString, showMessage = true) => {
  try {
    const parser = new DOMParser()
    const xmlDoc = parser.parseFromString(xmlString, 'application/xml')
    
    // 检查解析错误
    const parserError = xmlDoc.querySelector('parsererror')
    if (parserError) {
      throw new Error('XML格式错误: ' + parserError.textContent)
    }
    
    // 提取LogicCommand、LogicCommandSet、SpecialPower、SpecialPowerTemplate和LocomotorTemplate节点
    const commands = xmlDoc.getElementsByTagName('LogicCommand')
    const commandSets = xmlDoc.getElementsByTagName('LogicCommandSet')
    const specialPowers = xmlDoc.getElementsByTagName('SpecialPower')
    const specialPowerTemplates = xmlDoc.getElementsByTagName('SpecialPowerTemplate')
    const locomotors = xmlDoc.getElementsByTagName('LocomotorTemplate')
    
    // 记录解析前的标签数量
    const beforeCount = uploadedTags.value.length
    
    // 添加提取的节点到上传标签列表
    for (let i = 0; i < commands.length; i++) {
      const command = commands[i]
      const id = command.getAttribute('id')
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'LogicCommand')
        
        // 获取原始标签内容（不经过XMLSerializer处理）
        const rawContent = command.outerHTML
          .replace(/ xmlns="[^"]*"/g, '') // 移除xmlns属性
          .replace(/\s+/g, ' ') // 压缩多余空格
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'LogicCommand',
            content: rawContent
          })
        }
      }
    }
    
    for (let i = 0; i < commandSets.length; i++) {
      const commandSet = commandSets[i]
      const id = commandSet.getAttribute('id')
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'LogicCommandSet')
        
        // 获取原始标签内容（不经过XMLSerializer处理）
        const rawContent = commandSet.outerHTML
          .replace(/ xmlns="[^"]*"/g, '') // 移除xmlns属性
          .replace(/\s+/g, ' ') // 压缩多余空格
          .trim()
        
        // 提取Cmd标签内容
        const cmdElements = commandSet.getElementsByTagName('Cmd')
        const cmdIds = []
        
        for (let j = 0; j < cmdElements.length; j++) {
          const cmdElement = cmdElements[j]
          const cmdId = cmdElement.textContent.trim()
          if (cmdId) {
            cmdIds.push(cmdId)
            console.log(`在CommandSet ${id} 中找到LogicCommand引用: ${cmdId}`)
            
            // 如果当前单位使用了这个CommandSet，也将其引用的LogicCommand添加到unitRelatedIds中
            if (unitRelatedIds.value.includes(id) && !unitRelatedIds.value.includes(cmdId)) {
              unitRelatedIds.value.push(cmdId)
              console.log(`将LogicCommand ${cmdId} 添加到单位相关ID中`)
            }
          }
        }
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
          uploadedTags.value[existingIndex].cmdIds = cmdIds
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'LogicCommandSet',
            content: rawContent,
            cmdIds: cmdIds
          })
        }
      }
    }
    
    // 添加SpecialPower节点
    for (let i = 0; i < specialPowers.length; i++) {
      const specialPower = specialPowers[i]
      const id = specialPower.getAttribute('id')
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'SpecialPower')
        
        // 获取原始标签内容
        const rawContent = specialPower.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'SpecialPower',
            content: rawContent
          })
        }
      }
    }
    
    // 添加SpecialPowerTemplate节点
    for (let i = 0; i < specialPowerTemplates.length; i++) {
      const template = specialPowerTemplates[i]
      const id = template.getAttribute('id')
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'SpecialPowerTemplate')
        
        // 获取原始标签内容
        const rawContent = template.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'SpecialPowerTemplate',
            content: rawContent
          })
        }
      }
    }
    
    // 添加LocomotorTemplate节点
    for (let i = 0; i < locomotors.length; i++) {
      const locomotor = locomotors[i]
      const id = locomotor.getAttribute('id')
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'LocomotorTemplate')
        
        // 获取原始标签内容
        const rawContent = locomotor.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        // 检查是否有继承关系
        const inheritFrom = locomotor.getAttribute('inheritFrom')
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
          if (inheritFrom) {
            uploadedTags.value[existingIndex].inheritFrom = inheritFrom
          }
        } else {
          // 添加新标签
          const newTag = {
            id: id,
            type: 'LocomotorTemplate',
            content: rawContent
          }
          
          if (inheritFrom) {
            newTag.inheritFrom = inheritFrom
          }
          
          uploadedTags.value.push(newTag)
          
          // 如果有继承关系，确保父模板也被添加到相关ID中
          if (inheritFrom && !unitRelatedIds.value.includes(inheritFrom)) {
            unitRelatedIds.value.push(inheritFrom)
            console.log(`添加继承的运动器模板: ${inheritFrom}`)
          }
        }
      }
    }
    
    // 处理LocomotorSet节点
    const locomotorSets = xmlDoc.getElementsByTagName('LocomotorSet')
    for (let i = 0; i < locomotorSets.length; i++) {
      const locomotorSet = locomotorSets[i]
      const id = locomotorSet.getAttribute('id')
      const locomotorId = locomotorSet.getAttribute('Locomotor')
      
      if (id && locomotorId) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'LocomotorSet')
        
        // 获取原始标签内容
        const rawContent = locomotorSet.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
          uploadedTags.value[existingIndex].locomotorId = locomotorId
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'LocomotorSet',
            content: rawContent,
            locomotorId: locomotorId
          })
        }
        
        // 确保引用的Locomotor也被添加到相关ID中
        if (!unitRelatedIds.value.includes(locomotorId)) {
          unitRelatedIds.value.push(locomotorId)
          console.log(`添加LocomotorSet引用的运动器: ${locomotorId}`)
        }
      }
    }
    
    // 处理UnitAbilityButtonTemplate节点
    const buttonTemplates = xmlDoc.getElementsByTagName('UnitAbilityButtonTemplate')
    for (let i = 0; i < buttonTemplates.length; i++) {
      const buttonTemplate = buttonTemplates[i]
      const id = buttonTemplate.getAttribute('id')
      const logicCommandId = buttonTemplate.getAttribute('LogicCommand')
      
      if (id && logicCommandId) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'UnitAbilityButtonTemplate')
        
        // 获取原始标签内容
        const rawContent = buttonTemplate.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        // 提取StateData标签内容
        const stateDataElements = buttonTemplate.getElementsByTagName('StateData')
        const stateDataIds = []
        
        for (let j = 0; j < stateDataElements.length; j++) {
          const stateDataElement = stateDataElements[j]
          const stateDataId = stateDataElement.textContent.trim()
          if (stateDataId) {
            stateDataIds.push(stateDataId)
            console.log(`在UnitAbilityButtonTemplate ${id} 中找到StateData引用: ${stateDataId}`)
          }
        }
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
          uploadedTags.value[existingIndex].logicCommandId = logicCommandId
          uploadedTags.value[existingIndex].stateDataIds = stateDataIds
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'UnitAbilityButtonTemplate',
            content: rawContent,
            logicCommandId: logicCommandId,
            stateDataIds: stateDataIds
          })
        }
      }
    }
    
    // 处理ButtonStateData节点（包括ButtonSingleStateData和ButtonDoubleStateData）
    const singleStateData = xmlDoc.getElementsByTagName('ButtonSingleStateData')
    const doubleStateData = xmlDoc.getElementsByTagName('ButtonDoubleStateData')
    
    // 处理ButtonSingleStateData
    for (let i = 0; i < singleStateData.length; i++) {
      const stateData = singleStateData[i]
      const id = stateData.getAttribute('id')
      
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'ButtonSingleStateData')
        
        // 获取原始标签内容
        const rawContent = stateData.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'ButtonSingleStateData',
            content: rawContent
          })
        }
      }
    }
    
    // 处理ButtonDoubleStateData
    for (let i = 0; i < doubleStateData.length; i++) {
      const stateData = doubleStateData[i]
      const id = stateData.getAttribute('id')
      
      if (id) {
        // 检查是否已存在相同ID的标签
        const existingIndex = uploadedTags.value.findIndex(tag => tag.id === id && tag.type === 'ButtonDoubleStateData')
        
        // 获取原始标签内容
        const rawContent = stateData.outerHTML
          .replace(/ xmlns="[^"]*"/g, '')
          .replace(/\s+/g, ' ')
          .trim()
        
        if (existingIndex >= 0) {
          // 更新现有标签
          uploadedTags.value[existingIndex].content = rawContent
        } else {
          // 添加新标签
          uploadedTags.value.push({
            id: id,
            type: 'ButtonDoubleStateData',
            content: rawContent
          })
        }
      }
    }
    
    // 计算新增的标签数量
    const addedCount = uploadedTags.value.length - beforeCount
    const totalTags = commands.length + commandSets.length + specialPowers.length + specialPowerTemplates.length + locomotors.length + locomotorSets.length + buttonTemplates.length + singleStateData.length + doubleStateData.length
    
    // 调试输出
    console.log(`解析XML文件，找到 LogicCommand: ${commands.length}, LogicCommandSet: ${commandSets.length}, SpecialPower: ${specialPowers.length}, SpecialPowerTemplate: ${specialPowerTemplates.length}, LocomotorTemplate: ${locomotors.length}, LocomotorSet: ${locomotorSets.length}, UnitAbilityButtonTemplate: ${buttonTemplates.length}, ButtonStateData: ${singleStateData.length + doubleStateData.length}`)
    
    if (showMessage) {
      if (addedCount > 0) {
        warningMsg.value = `成功解析 ${totalTags} 个标签，新增 ${addedCount} 个标签到侧边栏`
      } else {
        warningMsg.value = `成功解析 ${totalTags} 个标签，所有标签已存在`
      }
      errorMsg.value = ''
    }
    
    // 更新最后修改时间
    lastModified.value = new Date().toLocaleString()
    
    return totalTags
  } catch (error) {
    if (showMessage) {
      errorMsg.value = 'XML解析错误: ' + error.message
      warningMsg.value = ''
    }
    return 0
  }
}

// 方法
const addEntry = () => {
  const trimmed = newEntry.value.trim()
  if (!trimmed.startsWith('<LogicCommand') && 
      !trimmed.startsWith('<LogicCommandSet') && 
      !trimmed.startsWith('<SpecialPower') && 
      !trimmed.startsWith('<LocomotorTemplate') && 
      !trimmed.startsWith('<LocomotorSet') &&
      !trimmed.startsWith('<UnitAbilityButtonTemplate') &&
      !trimmed.startsWith('<ButtonSingleStateData') &&
      !trimmed.startsWith('<ButtonDoubleStateData')) {
    errorMsg.value = '只能添加 LogicCommand、LogicCommandSet、SpecialPower、LocomotorTemplate、LocomotorSet、UnitAbilityButtonTemplate 或 ButtonStateData 标签'
    return
  }
  
  try {
    const parser = new DOMParser()
    const doc = parser.parseFromString(trimmed, 'application/xml')
    const errorNode = doc.querySelector('parsererror')
    if (errorNode) throw new Error()
    
    // 检查新条目中的ID
    const idMatch = trimmed.match(/id=["']([^"']+)["']/)
    if (!idMatch || !idMatch[1]) {
      errorMsg.value = '标签必须包含 id 属性'
      return
    }
    
    // 检查现有条目中的重复ID
    const newId = idMatch[1]
    const allEntries = xmlContent.value.split('\n').join(' ') + ' ' + trimmed
    const idRegex = /id=["']([^"']+)["']/g
    const ids = []
    let match
    while ((match = idRegex.exec(allEntries)) !== null) {
      ids.push(match[1])
    }
    
    const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index)
    if (duplicateIds.includes(newId)) {
      errorMsg.value = `ID "${newId}" 已经存在，请使用唯一的ID`
      return
    }
    
    entries.value.push(trimmed)
    updateContent()
    newEntry.value = ''
    errorMsg.value = ''
    warningMsg.value = '条目添加成功！'
    formatXml()
  } catch (e) {
    errorMsg.value = 'XML 标签不合法，请检查格式'
  }
}

const updateContent = () => {
  const joined = entries.value.join('\n')
  xmlContent.value = `${header.value}\n${joined}\n${footer.value}`
  lastModified.value = new Date().toLocaleString()
}

const formatXml = () => {
  if (!xmlContent.value.trim()) {
    errorMsg.value = 'XML内容不能为空'
    warningMsg.value = ''
    return
  }
  try {
    let content = xmlContent.value.trim()
    
    // 检查是否已经包含完整的XML结构
    const hasXmlDeclaration = content.includes('<?xml version="1.0" encoding="utf-8"?>')
    const hasAssetDeclaration = content.includes('<AssetDeclaration xmlns="uri:ea.com:eala:asset">')
    
    if (hasXmlDeclaration && hasAssetDeclaration) {
      // 用户输入的是完整XML，直接格式化整个内容
      const parser = new DOMParser()
      const xml = parser.parseFromString(content, 'application/xml')
      const pretty = prettify(xml.documentElement, 0)
      xmlContent.value = `<?xml version="1.0" encoding="utf-8"?>\n${pretty}`
    } else {
      // 用户输入的是片段，添加header和footer
      const xmlToFormat = `${header.value}\n${content}\n${footer.value}`
      const parser = new DOMParser()
      const xml = parser.parseFromString(xmlToFormat, 'application/xml')
      const pretty = prettify(xml.documentElement, 0)
      xmlContent.value = `${header.value}\n${pretty}\n${footer.value}`
    }
    
    errorMsg.value = ''
    warningMsg.value = 'XML格式化成功！'
  } catch (e) {
    errorMsg.value = '无法格式化，请检查 XML 内容'
    warningMsg.value = ''
  }
}

const prettify = (node, level) => {
  let indent = '  '.repeat(level)
  let output = `${indent}<${node.nodeName}`

  for (let attr of node.attributes) {
    output += ` ${attr.name}="${attr.value}"`
  }
  if (node.childNodes.length === 0) {
    return output + `/>`
  } else {
    output += `>`
    let children = Array.from(node.childNodes).filter(n => n.nodeType === 1)
    if (children.length > 0) {
      output += `\n` + children.map(c => prettify(c, level + 1)).join('\n') + `\n${indent}`
    } else {
      let text = node.textContent.trim()
      output += text
    }
    return output + `</${node.nodeName}>`
  }
}

const validateXml = () => {
  errorMsg.value = ''
  warningMsg.value = ''
  
  // 检查内容是否为空
  if (!xmlContent.value.trim()) {
    errorMsg.value = 'XML内容不能为空'
    return false
  }
  
  // 检查头部和尾部
  const hasHeader = xmlContent.value.includes(header.value)
  const hasFooter = xmlContent.value.includes(footer.value)
  
  if (!hasHeader && !hasFooter) {
    errorMsg.value = '缺少XML文件头和文件尾'
    return false
  }
  
  if (!hasHeader) {
    errorMsg.value = '缺少XML文件头'
    return false
  }
  
  if (!hasFooter) {
    errorMsg.value = '缺少XML文件尾'
    return false
  }
  
  // 检查重复的头部/尾部
  const headerCount = (xmlContent.value.match(new RegExp(header.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length
  const footerCount = (xmlContent.value.match(new RegExp(footer.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length
  
  if (headerCount > 1) {
    errorMsg.value = 'XML文件头重复'
    return false
  }
  
  if (footerCount > 1) {
    errorMsg.value = 'XML文件尾重复'
    return false
  }
  
  // 检查重复的ID
  try {
    const parser = new DOMParser()
    const xmlDoc = parser.parseFromString(xmlContent.value, 'application/xml')
    
    const commands = xmlDoc.getElementsByTagName('LogicCommand')
    const commandSets = xmlDoc.getElementsByTagName('LogicCommandSet')
    const specialPowers = xmlDoc.getElementsByTagName('SpecialPower')
    const locomotorTemplates = xmlDoc.getElementsByTagName('LocomotorTemplate')
    const locomotorSets = xmlDoc.getElementsByTagName('LocomotorSet')
    
    const allElements = [...commands, ...commandSets, ...specialPowers, ...locomotorTemplates, ...locomotorSets]
    const ids = []
    
    for (let element of allElements) {
      const id = element.getAttribute('id')
      if (!id) {
        errorMsg.value = `发现缺少id属性的标签: ${element.tagName}`
        return false
      }
      if (ids.includes(id)) {
        errorMsg.value = `发现重复的id: ${id}`
        return false
      }
      ids.push(id)
    }
    
    warningMsg.value = `XML验证通过！共找到 ${allElements.length} 个有效标签。`
    return true
  } catch (e) {
    errorMsg.value = 'XML解析错误: ' + e.message
    return false
  }
}

const download = () => {
  if (!validateXml()) {
    return
  }
  
  const blob = new Blob([xmlContent.value], { type: 'application/xml' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = 'config.xml'
  link.click()
}

const insertTemplate = (type) => {
  let template = ''
  
  switch (type) {
    case 'LogicCommand':
      template = `<LogicCommand id="NewCommand_${Date.now()}" CommandClass="DoAttackMove">
  <Parameter Type="Target" />
</LogicCommand>`
      break
    case 'LogicCommandSet':
      template = `<LogicCommandSet id="NewCommandSet_${Date.now()}">
  <CommandCount>1</CommandCount>
  <Command>Attack</Command>
</LogicCommandSet>`
      break
    case 'SpecialPower':
      template = `<SpecialPower id="NewSpecialPower_${Date.now()}" CreateFX="SpecialPowerCreate">
  <RadiusCursorRadius>50.0</RadiusCursorRadius>
  <MaxCastRange>100.0</MaxCastRange>
  <ViewObjectRange>100.0</ViewObjectRange>
  <EnergyCost>50.0</EnergyCost>
  <ReloadTime>10.0</ReloadTime>
</SpecialPower>`
      break
    case 'Locomotor':
      template = `<LocomotorTemplate
  id="NewLocomotor_${Date.now()}"
  Surfaces="GROUND"
  TurnTimeSeconds="0.2s"
  TurnTimeDamagedSeconds="0.2s"
  FastTurnRadius="1.0"
  SlowTurnRadius="1.0"
  AccelerationSeconds="0.21s"
  FormationPriority="NO_FORMATION"
  BrakingSeconds="0.0s"
  MinTurnSpeed="0%"
  BehaviorZ="NO_MOTIVE_FORCE"
  Appearance="TWO_LEGS"
  StickToGround="true"
  AirborneTargetingHeight="30"
/>`
      break
    case 'LocomotorSet':
      template = `<LocomotorSet
  id="NewLocomotorSet_${Date.now()}"
  Locomotor="DefaultLocomotor"
  Condition="NORMAL"
  Speed="100.0" />`
      break
    case 'UnitAbilityButtonTemplate':
      template = `<UnitAbilityButtonTemplate id="NewButton_${Date.now()}" LogicCommand="Attack">
  <ButtonImage>CommandButton_Attack</ButtonImage>
  <ButtonBorderType>COMMAND</ButtonBorderType>
  <StateName>NORMAL</StateName>
  <StateData>ButtonStateData_Normal</StateData>
  <StateName>DISABLED</StateName>
  <StateData>ButtonStateData_Disabled</StateData>
</UnitAbilityButtonTemplate>`
      break
    case 'ButtonStateData':
      template = `<ButtonSingleStateData id="NewButtonStateData_${Date.now()}">
  <Frame>CommandButtonFrame</Frame>
  <ButtonBorder>CommandButtonBorder</ButtonBorder>
  <ButtonText>新按钮</ButtonText>
  <ButtonTextColor>255 255 255 255</ButtonTextColor>
</ButtonSingleStateData>`
      break
  }
  
  newEntry.value = template
  errorMsg.value = ''
  warningMsg.value = `已插入 ${type} 模板`
}

const clearAll = () => {
  if (confirm('确定要清空所有条目吗？')) {
    entries.value = []
    updateContent()
    errorMsg.value = ''
    warningMsg.value = '已清空所有条目'
  }
}

// 获取LogicCommand数量
const getLogicCommandCount = () => {
  return (xmlContent.value.match(/<LogicCommand/g) || []).length
}

// 获取LogicCommandSet数量
const getLogicCommandSetCount = () => {
  return (xmlContent.value.match(/<LogicCommandSet/g) || []).length
}

// 获取SpecialPower数量
const getSpecialPowerCount = () => {
  return (xmlContent.value.match(/<SpecialPower/g) || []).length
}

// 获取LocomotorTemplate数量
const getLocomotorCount = () => {
  return (xmlContent.value.match(/<LocomotorTemplate/g) || []).length
}

// 获取LocomotorSet数量
const getLocomotorSetCount = () => {
  return (xmlContent.value.match(/<LocomotorSet/g) || []).length
}

// 获取文件大小
const getFileSize = () => {
  const bytes = new Blob([xmlContent.value]).size
  if (bytes < 1024) return bytes + ' B'
  else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'
  else return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
}
</script>

<style scoped>
.config-editor {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  color: #333;
}

.auto-load-status {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #09f;
  border-radius: 50%;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.editor-container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 250px;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.search-box {
  position: relative;
  margin-bottom: 10px;
}

.search-box input {
  width: 100%;
  padding: 8px 30px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
}

.tag-list {
  max-height: 500px;
  overflow-y: auto;
}

.tag-item {
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag-item:hover {
  background-color: #f0f0f0;
  border-color: #ccc;
}

.tag-type {
  display: block;
  font-weight: bold;
  color: #0066cc;
  margin-bottom: 4px;
}

.tag-id {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.tag-preview {
  display: block;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.gradient-btn {
  padding: 8px 15px;
  background: linear-gradient(to bottom, #4CAF50, #45a049);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.gradient-btn:hover {
  background: linear-gradient(to bottom, #45a049, #409343);
}

/* 预设按钮区域样式 */
.preset-buttons {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.preset-buttons h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.preset-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preset-btn {
  padding: 8px 15px;
  background: linear-gradient(to bottom, #2196F3, #1976D2);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.preset-btn:hover {
  background: linear-gradient(to bottom, #1976D2, #1565C0);
}

/* 欢迎信息区域样式 */
.welcome-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.welcome-message h2 {
  margin-bottom: 15px;
  color: #333;
}

.welcome-message p {
  margin-bottom: 25px;
  color: #666;
  font-size: 16px;
}

.welcome-buttons {
  display: flex;
  gap: 15px;
}

.welcome-btn {
  padding: 10px 20px;
  background: linear-gradient(to bottom, #4CAF50, #45a049);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.welcome-btn:hover {
  background: linear-gradient(to bottom, #45a049, #409343);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.message-section {
  margin-bottom: 15px;
  min-height: 24px;
}

.error-message {
  color: #d32f2f;
  margin: 0;
}

.warning-message {
  color: #ff9800;
  margin: 0;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.entry-textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  resize: vertical;
}

.editor-section {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.editor-section h3 {
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entry-count {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.xml-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.xml-textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  resize: vertical;
  min-height: 400px;
}

@media (max-width: 1200px) {
  .editor-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
