<template>
  <div class="template-guide">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">模板标记语法指南</span>
          <el-tooltip content="将此文档另存为PDF" placement="top">
            <el-button type="primary" size="small" @click="downloadGuide">
              <el-icon><Download /></el-icon> 保存文档
            </el-button>
          </el-tooltip>
        </div>
      </template>

      <el-tabs tab-position="left">
        <el-tab-pane label="基础语法">
          <h3>基础参数</h3>
          <div class="code-block">
            <pre>{{basicParam}}</pre>
          </div>
          <p>基础参数将被直接替换为对应的值。</p>

          <h3>基础列表</h3>
          <div class="code-block">
            <pre>{{basicList}}</pre>
          </div>
          <p>列表参数会根据数据自动重复生成内容。</p>
        </el-tab-pane>

        <el-tab-pane label="嵌套语法">
          <h3>嵌套列表示例</h3>
          <div class="code-block">
            <pre>{{nestedList}}</pre>
          </div>
          <p>多层嵌套使用点号分隔不同层级。</p>

          <h3>嵌套数据示例</h3>
          <div class="code-block">
            <pre>{{nestedData}}</pre>
          </div>
          <p>这是对应的JSON数据结构示例。</p>
        </el-tab-pane>

        <el-tab-pane label="完整实例">
          <h3>复杂模板示例</h3>
          <div class="code-block">
            <pre>{{complexTemplate}}</pre>
          </div>
          <p>一个完整的业务模板示例。</p>
        </el-tab-pane>

        <el-tab-pane label="最佳实践">
          <h3>模板设计最佳实践</h3>
          <ul class="best-practice">
            <li>使用有意义的名称命名参数和列表</li>
            <li>保持嵌套层级不超过3层</li>
            <li>确保每个开始标记有对应的结束标记</li>
            <li>在列表外放置汇总数据，避免在列表内重复</li>
            <li>使用注释说明复杂模板的结构（Word文档中可以添加注释）</li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Download } from '@element-plus/icons-vue';

// 各种模板示例
const basicParam = ref(`文档标题: {{标题}}
日期: {{日期}}
编号: {{编号}}`);

const basicList = ref(`{{?产品列表}}
  - 产品名称: {{名称}}
  - 单价: {{单价}}
  - 数量: {{数量}}
{{/产品列表}}`);

const nestedList = ref(`{{?部门列表}}
  部门名称: {{名称}}
  负责人: {{负责人}}

  员工列表:
  {{?部门列表.员工列表}}
    - {{姓名}}, {{职位}}

    参与项目:
    {{?部门列表.员工列表.项目列表}}
      * {{项目名称}} ({{状态}})
    {{/部门列表.员工列表.项目列表}}

  {{/部门列表.员工列表}}

{{/部门列表}}`);

const nestedData = ref(`{
  "部门列表": [
    {
      "名称": "研发部",
      "负责人": "王经理",
      "员工列表": [
        {
          "姓名": "张三",
          "职位": "开发工程师",
          "项目列表": [
            {
              "项目名称": "项目A",
              "状态": "进行中"
            },
            {
              "项目名称": "项目B",
              "状态": "已完成"
            }
          ]
        }
      ]
    }
  ],
  "部门总数": 1,
  "员工总数": 1
}`);

const complexTemplate = ref(`{{单位名称}}团体保险佣金报表
报表日期: {{报表日期}}

{{?分公司列表}}
  分公司: {{分公司名称}}
  分公司代码: {{分公司代码}}

  {{?分公司列表.团队列表}}
    团队: {{团队名称}}
    团队长: {{团队长}}

    代理人列表:
    {{?分公司列表.团队列表.代理人列表}}
      代理人: {{姓名}} ({{工号}})
      职级佣金: {{职级佣金}}
      业务绩效: {{业务绩效}}

      保单列表:
      {{?分公司列表.团队列表.代理人列表.保单列表}}
        保单号: {{保单号}}
        保费: {{保费}}
        佣金率: {{佣金率}}
      {{/分公司列表.团队列表.代理人列表.保单列表}}

      实发佣金: {{实发佣金}}
    {{/分公司列表.团队列表.代理人列表}}

    团队佣金小计: {{团队佣金小计}}
  {{/分公司列表.团队列表}}

  分公司佣金合计: {{分公司佣金合计}}
{{/分公司列表}}

公司佣金总计: {{佣金总计}}
制表人: {{制表人}}
日期: {{制表日期}}`);

// 下载指南文档
const downloadGuide = () => {
  // 实际项目中可以连接到导出PDF的API
  // 这里只是一个示例
  ElMessage.success('模板指南文档导出功能将在后续版本实现');
};
</script>

<style scoped>
.template-guide {
  margin: 15px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: bold;
  font-size: 16px;
}

.code-block {
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  overflow-x: auto;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.best-practice li {
  margin-bottom: 10px;
  line-height: 1.5;
}
</style>
