<template>
  <a-modal
    :open="visible"
    title="事项计划 — 使用说明"
    width="1100px"
    :footer="null"
    :body-style="{ padding: 0 }"
    wrap-class-name="help-doc-modal"
    @cancel="handleClose"
  >
    <div class="help-doc">
      <div class="help-doc-nav">
        <div
          v-for="chapter in chapters"
          :key="chapter.id"
          class="nav-item"
          :class="{ active: activeChapter === chapter.id }"
          @click="scrollToChapter(chapter.id)"
        >
          <Icon :icon="chapter.icon" class="nav-icon" />
          <span>{{ chapter.title }}</span>
        </div>
      </div>

      <div ref="contentRef" class="help-doc-content">
        <div v-for="chapter in chapters" :key="chapter.id" :id="chapter.id" class="chapter">
          <h3 class="chapter-title">
            <Icon :icon="chapter.icon" class="chapter-icon" />
            {{ chapter.title }}
          </h3>

          <div v-for="(section, si) in chapter.sections" :key="si" class="section">
            <h4 v-if="section.heading" class="section-heading">{{ section.heading }}</h4>
            <div v-if="section.text" class="section-text" v-html="section.text"></div>

            <div v-if="section.image" class="doc-image">
              <img :src="section.image" :alt="section.heading" class="doc-image-img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import Icon from '/@/components/Icon';
  import createPlanImg from '/@/assets/images/create-plan.png';
  import createTaskQuickImg from '/@/assets/images/create-task-quick.png';
  import createTaskDetailImg from '/@/assets/images/create-task-detail.png';
  import manageCollaboratorImg from '/@/assets/images/manage-collaborator.png';
  import subtaskViewImg from '/@/assets/images/subtask-view.png';

  const props = defineProps<{ open: boolean }>();
  const emit = defineEmits<{ 'update:open': [value: boolean] }>();

  const visible = ref(props.open);

  watch(
    () => props.open,
    (val) => {
      visible.value = val;
    }
  );

  watch(visible, (val) => {
    emit('update:open', val);
  });

  function handleClose() {
    visible.value = false;
  }

  const contentRef = ref<HTMLElement | null>(null);
  const activeChapter = ref('quickstart');

  function scrollToChapter(id: string) {
    activeChapter.value = id;
    nextTick(() => {
      const el = document.getElementById(id);
      if (el && contentRef.value) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  }

  const chapters = [
    // ==================== 1. 快速入门 ====================
    {
      id: 'quickstart',
      title: '快速入门',
      icon: 'ant-design:rocket-outlined',
      sections: [
        {
          heading: '创建计划',
          text: `
            <ol>
              <li>左侧边栏 → <strong>"计划总览"</strong> → 点击<strong>所有计划 / 我创建的 / 我参与的</strong></li>
              <li>右侧出现"计划列表"，点击标题栏 <strong>+</strong> 按钮</li>
              <li>填写<strong>计划名称</strong>，选择<strong>密级</strong></li>
              <li>点击确定完成创建</li>
            </ol>
            <p>也可以在左侧边栏的"常用计划"旁点击 <strong>+</strong> 快速创建。</p>
          `,
          image: createPlanImg,
        },
        {
          heading: '创建事项',
          text: `
            <p><strong>快速创建：</strong>进入计划 → 事项分组标题栏点击 <strong>+</strong> → 输入名称 → 回车</p>
          `,
          image: createTaskQuickImg,
        },
        {
          text: `
            <p><strong>详细创建：</strong>点击 + 后不输入名称直接确认打开弹窗，可设置名称、描述、负责人、参与人、关注人、优先级、起止时间。</p>
            <p>需要权限：<strong>所有者 或可编辑</strong>。</p>
          `,
          image: createTaskDetailImg,
        },
        {
          heading: '收藏与取消收藏',
          text: `
            <p><strong>收藏：</strong>进入"所有计划"视图 → 点击计划上的<strong>星标图标 ☆</strong> → 收藏后计划出现在左侧边栏。</p>
            <p><strong>取消收藏：</strong>在左侧边栏找到该计划，点击星标（⭐ → ☆），或点击计划旁的 <strong>⋯</strong> → "移除"。</p>
          `,
        },
      ],
    },

    // ==================== 2. 权限说明 ====================
    {
      id: 'permissions',
      title: '权限说明',
      icon: 'ant-design:safety-certificate-outlined',
      sections: [
        {
          heading: '三级权限对比',
          text: `
            <table class="faq-table">
              <tr><th></th><th>所有者</th><th>可编辑</th><th>可阅读</th></tr>
              <tr><td>创建事项</td><td class="td-yes">✓</td><td class="td-yes">✓</td><td class="td-no">✗</td></tr>
              <tr><td>编辑事项</td><td class="td-yes">✓</td><td class="td-yes">✓</td><td class="td-no">✗</td></tr>
              <tr><td>完成事项</td><td class="td-yes">✓</td><td class="td-yes">✓</td><td class="td-no">✗</td></tr>
              <tr><td>删除事项</td><td class="td-yes">✓</td><td class="td-yes">✓</td><td class="td-no">✗</td></tr>
              <tr><td>拖拽排序</td><td class="td-yes">✓</td><td class="td-yes">✓</td><td class="td-no">✗</td></tr>
              <tr><td>管理协作者</td><td class="td-yes">✓</td><td class="td-no">✗</td><td class="td-no">✗</td></tr>
              <tr><td>删除计划</td><td class="td-yes">✓</td><td class="td-no">✗</td><td class="td-no">✗</td></tr>
            </table>
            <ul>
              <li><strong>所有者</strong>：计划创建者，拥有全部权限</li>
              <li><strong>可编辑</strong>：可操作事项，但不能管理协作者和删除计划</li>
              <li><strong>可阅读</strong>：只能查看，无法编辑</li>
            </ul>
          `,
        },
        {
          heading: '密级说明',
          text: `
            <p>每个计划创建时需指定<strong>密级</strong>。用户只能看到密级 ≤ 自己密级的计划。</p>
            <p><strong>密级创建后不可修改</strong>，如需调整请重新创建计划。</p>
          `,
        },
        {
          heading: '管理协作者',
          text: `
            <ol>
              <li>进入计划 → 右上角点击<strong>"协作人"</strong>按钮</li>
              <li>点击"添加协作人" → 搜索并选择用户 → 设置权限为"可编辑"或"可阅读"</li>
              <li>确认添加</li>
            </ol>
            <p>只有计划的 <strong>所有者</strong> 才能管理协作者。如果看不到此按钮，说明你没有管理权限。</p>
          `,
          image: manageCollaboratorImg,
        },
        {
          heading: '计划收藏权限说明',
          text: `
            <p>满足以下任一条件，即可在"所有计划"中看到并收藏该计划：</p>
            <ul>
              <li>你是该计划的<strong>所有者</strong></li>
              <li>被设为该计划的<strong>协作者</strong></li>
              <li>被设为计划中某个事项的<strong>负责人</strong>或<strong>参与者</strong></li>
            </ul>
          `,
        },
      ],
    },

    // ==================== 3. 事项管理 ====================
    {
      id: 'task-mgmt',
      title: '事项管理',
      icon: 'ant-design:check-square-outlined',
      sections: [
        {
          heading: '子事项',
          text: `
            <ul>
              <li>点击事项名 → 详情抽屉 → 底部<strong>"添加子事项"</strong></li>
              <li>最多支持 <strong>5 层</strong>嵌套</li>
              <li>每个子事项可独立设置负责人、截止时间、优先级</li>
              <li>列表中"子事项进度"列显示完成情况（如 2/5）</li>
            </ul>
          `,
          image: subtaskViewImg,
        },
        {
          heading: '我的事项与关注事项',
          text: `
            <p>左侧边栏顶部有两个全局视图：</p>
            <ul>
              <li><strong>"我的事项"：</strong>跨所有计划汇总你被设为"负责人"的事项，扁平列表，可直接编辑、完成、展开子事项</li>
              <li><strong>"关注事项"：</strong>汇总你关注的所有事项，适合跟踪他人负责但你需要了解进展的事项</li>
            </ul>
          `,
        },
        {
          heading: '关注事项',
          text: `
            <p>点击事项名 → 详情抽屉 → 顶部点击<strong>眼睛图标</strong>即可关注。不需要是负责人或协作者，任何你可见的事项都能关注。关注后事项出现在"关注事项"视图中。</p>
          `,
        },
        {
          heading: '删除事项与计划',
          text: `
            <ul>
              <li><strong>删除事项：</strong>详情抽屉 → 顶部删除图标（需 所有者 或可编辑）</li>
              <li><strong>删除计划：</strong>标题栏 → ⋯ → 删除（需 所有者）</li>
            </ul>
            <p style="color:#f5222d">⚠ 删除后无法恢复，请谨慎操作。</p>
          `,
        },
      ],
    },

    // ==================== 4. 常见问题 ====================
    {
      id: 'faq',
      title: '常见问题',
      icon: 'ant-design:question-circle-outlined',
      sections: [
        {
          heading: '计划的密级创建后能改吗？',
          text: `
            <p><strong>不能直接修改。</strong>密级创建后不可更改。如需调整，只能删除原计划后重新创建并选择新的密级。</p>
          `,
        },
        {
          heading: '事项的截止时间有什么用？',
          text: `
            <p>设置截止时间后，到期未完成的事项日期会<strong>自动标红</strong>提醒。在"我的事项"视图中可快速识别过期事项。</p>
          `,
        },
      ],
    },
  ];
</script>

<style lang="less" scoped>
  .help-doc {
    display: flex;
    height: 80vh;
    max-height: 750px;
  }

  .help-doc-nav {
    width: 180px;
    min-width: 180px;
    padding: 12px 0;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #595959;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;

    &:hover {
      color: #1a1a1a;
      background: #f0f0f0;
    }

    &.active {
      color: #1677ff;
      background: #e6f4ff;
      border-left-color: #1677ff;
      font-weight: 500;
    }
  }

  .nav-icon {
    font-size: 14px;
    flex-shrink: 0;
  }

  .help-doc-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    min-width: 0;
  }

  .chapter {
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .chapter-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }

  .chapter-icon {
    font-size: 18px;
    color: #1677ff;
  }

  .section {
    margin-bottom: 20px;
  }

  .section-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2329;
  }

  .section-text {
    font-size: 13px;
    line-height: 1.8;
    color: #555;

    :deep(p) {
      margin: 0 0 6px;
    }

    :deep(ul),
    :deep(ol) {
      margin: 0 0 6px;
      padding-left: 18px;
    }

    :deep(li) {
      margin-bottom: 3px;
    }

    :deep(strong) {
      color: #1a1a1a;
    }

    :deep(.faq-table) {
      width: 100%;
      border-collapse: collapse;
      margin: 8px 0 12px;
      font-size: 13px;

      th,
      td {
        border: 1px solid #d9d9d9;
        padding: 8px 12px;
        text-align: center;
      }

      th {
        background: #f5f5f5;
        font-weight: 600;
      }

      td:first-child {
        text-align: left;
        font-weight: 500;
      }

      .td-yes {
        color: #52c41a;
        font-weight: 600;
      }

      .td-no {
        color: #d9d9d9;
      }
    }
  }

  .doc-image {
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
  }

  .doc-image-img {
    width: 100%;
    display: block;
  }
</style>
