import { createTemplateEditor } from './template-editor.js';

// 示例Vue模板
const vueTemplate = `
<template>
  <div class="container">
    <header v-if="showHeader" class="header">
      <h1>{{ title }}</h1>
      <nav>
        <a href="#" v-for="link in links" :key="link.id">{{ link.text }}</a>
      </nav>
    </header>
    
    <main class="content">
      <section id="intro">
        <p>这是介绍部分</p>
      </section>
      
      <section id="features">
        <div v-for="feature in features" :key="feature.id" class="feature-item">
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </section>
    </main>
    
    <footer class="footer">
      <p>版权信息</p>
    </footer>
  </div>
</template>
`;

console.log('=== Vue模板编辑器演示 ===\n');

// 1. 创建编辑器实例
console.log('1. 创建模板编辑器实例...');
const editor = createTemplateEditor(vueTemplate);

// 2. 查找节点
console.log('2. 查找特定节点...');
const headerNodes = editor.findNodes('header');
const featureItems = editor.findNodes('.feature-item');
const introSection = editor.findNodes('#intro');

console.log(`找到 ${headerNodes.length} 个header节点`);
console.log(`找到 ${featureItems.length} 个feature-item节点`);
console.log(`找到 ${introSection.length} 个intro节点\n`);

// 3. 移动节点示例
console.log('3. 移动节点示例...');
if (introSection.length > 0 && featureItems.length > 0) {
  const intro = introSection[0];
  
  // 获取intro的父节点
  const mainContent = intro.parent;
  
  if (mainContent && mainContent.children) {
    // 查找features节点的位置
    const featuresIndex = mainContent.children.findIndex(child => 
      child.tag === 'section' && child.props?.some(p => 
        p.name === 'id' && p.value?.content === 'features'
      )
    );
    
    if (featuresIndex !== -1) {
      editor.moveNode(intro, mainContent, featuresIndex + 1);
      console.log('✅ 已将intro节点移动到features节点之后\n');
    }
  }
}

// 4. 交换节点示例
console.log('4. 交换节点示例...');
if (featureItems.length >= 2) {
  const firstFeature = featureItems[0];
  const secondFeature = featureItems[1];
  
  editor.swapNodes(firstFeature, secondFeature);
  console.log('✅ 已交换第一个和第二个feature-item节点的位置\n');
}

// 5. 修改属性示例
console.log('5. 修改节点属性示例...');
if (headerNodes.length > 0) {
  const header = headerNodes[0];
  
  // 修改header的class
  editor.modifyNodeAttributes(header, {
    class: 'header modified-header',
    'data-modified': 'true'
  });
  console.log('✅ 已修改header节点的class和属性\n');
}

// 6. 生成新的模板
console.log('6. 生成修改后的模板...');
const newTemplate = editor.generateTemplate();

console.log('=== 修改前的模板 ===');
console.log(vueTemplate);

console.log('\n=== 修改后的模板 ===');
console.log(newTemplate);

console.log('\n=== 修改总结 ===');
console.log('1. 移动了intro节点到features节点之后');
console.log('2. 交换了前两个feature-item节点的位置');
console.log('3. 修改了header节点的class和属性');
console.log('4. 所有Vue指令（v-if、v-for等）都得到了正确处理');