<!-- Agent页面 - 浏览器插件安装步骤指引组件（双Tab切换） -->
<template>
  <div class="agent-browser-guide">
    <!-- 顶部Tab切换 -->
    <div class="agent-browser-guide__tabs">
      <div
        class="agent-browser-guide__tab"
        :class="{ 'agent-browser-guide__tab--active': activeTab === 'edge' }"
        @click="activeTab = 'edge'"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip_tab_edge)">
            <path d="M14.4375 11.9059C14.225 12.0184 14.0062 12.1184 13.7812 12.1996C13.0625 12.4684 12.3062 12.6059 11.5375 12.6059C8.5812 12.6059 6.0062 10.5746 6.0062 7.96211C6.01245 7.24961 6.4062 6.59336 7.0312 6.25586C4.3562 6.36836 3.6687 9.15586 3.6687 10.7871C3.6687 15.4059 7.92495 15.8746 8.8437 15.8746C9.33745 15.8746 10.0812 15.7309 10.5312 15.5871L10.6125 15.5621C12.3375 14.9684 13.8 13.8059 14.775 12.2621C14.85 12.1434 14.8125 11.9934 14.7 11.9184C14.6187 11.8684 14.5187 11.8621 14.4375 11.9059Z" fill="#0C59A4"/>
            <path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="#35C1F1"/>
          </g>
          <defs><clipPath id="clip_tab_edge"><rect width="16" height="16" fill="white"/></clipPath></defs>
        </svg>
        <span>Edge商店下载</span>
      </div>
      <div
        class="agent-browser-guide__tab"
        :class="{ 'agent-browser-guide__tab--active': activeTab === 'manual' }"
        @click="activeTab = 'manual'"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip_tab_chrome)">
            <path d="M8 12.45C10.46 12.45 12.45 10.46 12.45 8C12.45 5.54 10.46 3.55 8 3.55C5.54 3.55 3.55 5.54 3.55 8C3.55 10.46 5.54 12.45 8 12.45" fill="white"/>
            <path d="M2.24 5.81C1.91 5.24 1.52 4.63 1.07 4C0.37 5.22 0 6.6 0 8C0 9.41 0.37 10.78 1.07 12C1.77 13.22 2.78 14.23 4 14.93C5.22 15.63 6.6 16 8 16C8.74 14.97 9.24 14.22 9.5 13.77C10.01 12.89 10.66 11.63 11.46 10V10C11.11 10.61 10.61 11.11 10 11.46C9.39 11.82 8.7 12 8 12C7.3 12 6.61 11.82 6 11.46C5.39 11.11 4.89 10.61 4.54 10C3.44 7.97 2.68 6.57 2.24 5.81Z" fill="#229342"/>
            <path d="M8 16C9.05 16 10.09 15.79 11.06 15.39C12.03 14.99 12.91 14.4 13.66 13.66C14.4 12.91 14.99 12.03 15.39 11.06C15.79 10.09 16 9.05 16 8C16 6.6 15.63 5.22 14.93 4C13.41 3.85 12.29 3.78 11.57 3.78C10.75 3.78 9.56 3.85 8 4L8 4C8.7 4 9.39 4.19 10 4.54C10.61 4.89 11.11 5.39 11.46 6C11.82 6.61 12 7.3 12 8C12 8.7 11.82 9.39 11.46 10L8 16Z" fill="#FBC116"/>
            <path d="M8 11.17C9.75 11.17 11.17 9.75 11.17 8C11.17 6.25 9.75 4.83 8 4.83C6.25 4.83 4.83 6.25 4.83 8C4.83 9.75 6.25 11.17 8 11.17Z" fill="#1A73E8"/>
            <path d="M8 4H14.93C14.23 2.78 13.22 1.77 12 1.07C10.78 0.37 9.4 0 8 0C6.6 0 5.22 0.37 4 1.07C2.78 1.77 1.77 2.78 1.07 4L4.54 10L4.54 10C4.19 9.39 4 8.7 4 8C4 7.3 4.18 6.61 4.54 6C4.89 5.39 5.39 4.89 6 4.54C6.61 4.18 7.3 4 8 4Z" fill="#E33B2E"/>
          </g>
          <defs><clipPath id="clip_tab_chrome"><rect width="16" height="16" fill="white"/></clipPath></defs>
        </svg>
        <span>Chrome/Edge手动安装</span>
      </div>
    </div>

    <!-- Tab1: Edge商店下载（3步） -->
    <div v-if="activeTab === 'edge'" class="agent-browser-guide-drawer__body">
      <!-- 步骤1：点击链接跳转商店 -->
      <div class="agent-browser-guide-drawer__card">
        <div class="mr100">
          <div class="agent-browser-guide-drawer__step-row mr0">
            <span class="agent-browser-guide-drawer__step-num">1</span>
            <div class="agent-browser-guide-drawer__step-info">
              <h4 class="agent-browser-guide-drawer__step-title">点击下方链接跳转商店，获取插件</h4>
              <p class="agent-browser-guide-drawer__step-desc">打开 Edge 扩展商店中的「<a class="agent-browser-guide__link" :href="edgeStoreUrl" target="_blank">Offer派智能投递助手</a>」页面，点击右上角「获取」。</p>
            </div>
          </div>
          <!-- 商店链接 + 跳转按钮 -->
          <div class="agent-browser-guide-drawer__download-box agent-browser-guide-drawer__download-box--wide">
            <span class="agent-browser-guide-drawer__download-name agent-browser-guide__url-text">{{ edgeStoreUrlDisplay }}</span>
            <button class="agent-browser-guide-drawer__download-btn" @click="openEdgeStore">
              <svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M6 3h7v7M13 3L3 13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <span>跳转下载</span>
            </button>
          </div>
        </div>
        <!-- 步骤1示意图 -->
        <img src="@/assets/images/agent-setting/edge-step1.png" alt="Edge商店获取插件" class="agent-browser-guide-drawer__step-img" />
      </div>

      <!-- 步骤2：添加扩展 -->
      <div class="agent-browser-guide-drawer__card">
        <div>
          <div class="agent-browser-guide-drawer__step-row">
            <span class="agent-browser-guide-drawer__step-num">2</span>
            <div class="agent-browser-guide-drawer__step-info">
              <h4 class="agent-browser-guide-drawer__step-title">添加扩展</h4>
              <p class="agent-browser-guide-drawer__step-desc">在浏览器弹出的确认窗口中，点击「添加扩展」，等待插件自动安装完成。</p>
            </div>
          </div>
        </div>
        <!-- 步骤2示意图 -->
        <img src="@/assets/images/agent-setting/edge-step2.png" alt="添加扩展" class="agent-browser-guide-drawer__step-img" />
      </div>

      <!-- 步骤3：固定插件 -->
      <div class="agent-browser-guide-drawer__card">
        <div>
          <div class="agent-browser-guide-drawer__step-row">
            <span class="agent-browser-guide-drawer__step-num">3</span>
            <div class="agent-browser-guide-drawer__step-info">
              <h4 class="agent-browser-guide-drawer__step-title">固定插件</h4>
              <p class="agent-browser-guide-drawer__step-desc">点击浏览器右上角的「扩展」图标，找到「Offer派智能投递助手」，点击右侧的固钉图标，将插件固定到工具栏，方便后续使用。</p>
            </div>
          </div>
        </div>
        <!-- 步骤3示意图 -->
        <img src="@/assets/images/agent-setting/edge-step3.png" alt="固定插件" class="agent-browser-guide-drawer__step-img" />
      </div>
    </div>

    <!-- Tab2: Chrome/Edge手动安装（4步，保留原内容） -->
    <div v-if="activeTab === 'manual'" class="agent-browser-guide-drawer__body">
      <!-- 步骤1：下载插件包 -->
      <div class="agent-browser-guide-drawer__card">
        <div class="mr100">
          <div class="agent-browser-guide-drawer__step-row mr0">
            <span class="agent-browser-guide-drawer__step-num">1</span>
            <div class="agent-browser-guide-drawer__step-info">
              <h4 class="agent-browser-guide-drawer__step-title">下载并解压插件压缩包</h4>
              <p class="agent-browser-guide-drawer__step-desc">下载 Offer派智能投递助手安装包，并将下载好的插件压缩包解压</p>
            </div>
          </div>
          <div class="agent-browser-guide-drawer__download-box w263">
            <span class="agent-browser-guide-drawer__download-name">Offer派智能投递助手.zip</span>
            <button class="agent-browser-guide-drawer__download-btn" @click="downloadExtension">
              <svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 2v8M8 10L5 7M8 10l3-3M3 13h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <span>下载</span>
            </button>
          </div>
        </div>
        <!-- 步骤1示意图 -->
        <img src="@/assets/images/agent-setting/1-1.png" alt="打开开发者模式" class="agent-browser-guide-drawer__step-img" />
      </div>

      <!-- 步骤2：打开扩展管理页面 -->
      <div class="agent-browser-guide-drawer__card">
        <div>
          <div class="agent-browser-guide-drawer__step-row">
            <span class="agent-browser-guide-drawer__step-num">2</span>
            <div class="agent-browser-guide-drawer__step-info">
              <h4 class="agent-browser-guide-drawer__step-title">打开扩展管理页面</h4>
              <p class="agent-browser-guide-drawer__step-desc">在浏览器地址栏输入对应地址并回车，打开扩展管理页面</p>
            </div>
          </div>
          <!-- 浏览器地址链接 -->
          <div class="agent-browser-guide-drawer__browser-links">
            <div class="agent-browser-guide-drawer__browser-link" @click="copyToClipboard('chrome://extensions')">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_guide_chrome2)">
                  <path d="M8 12.45C10.46 12.45 12.45 10.46 12.45 8C12.45 5.54 10.46 3.55 8 3.55C5.54 3.55 3.55 5.54 3.55 8C3.55 10.46 5.54 12.45 8 12.45" fill="white"/>
                  <path d="M2.24 5.81C1.91 5.24 1.52 4.63 1.07 4C0.37 5.22 0 6.6 0 8C0 9.41 0.37 10.78 1.07 12C1.77 13.22 2.78 14.23 4 14.93C5.22 15.63 6.6 16 8 16C8.74 14.97 9.24 14.22 9.5 13.77C10.01 12.89 10.66 11.63 11.46 10V10C11.11 10.61 10.61 11.11 10 11.46C9.39 11.82 8.7 12 8 12C7.3 12 6.61 11.82 6 11.46C5.39 11.11 4.89 10.61 4.54 10C3.44 7.97 2.68 6.57 2.24 5.81Z" fill="#229342"/>
                  <path d="M8 16C9.05 16 10.09 15.79 11.06 15.39C12.03 14.99 12.91 14.4 13.66 13.66C14.4 12.91 14.99 12.03 15.39 11.06C15.79 10.09 16 9.05 16 8C16 6.6 15.63 5.22 14.93 4C13.41 3.85 12.29 3.78 11.57 3.78C10.75 3.78 9.56 3.85 8 4L8 4C8.7 4 9.39 4.19 10 4.54C10.61 4.89 11.11 5.39 11.46 6C11.82 6.61 12 7.3 12 8C12 8.7 11.82 9.39 11.46 10L8 16Z" fill="#FBC116"/>
                  <path d="M8 11.17C9.75 11.17 11.17 9.75 11.17 8C11.17 6.25 9.75 4.83 8 4.83C6.25 4.83 4.83 6.25 4.83 8C4.83 9.75 6.25 11.17 8 11.17Z" fill="#1A73E8"/>
                  <path d="M8 4H14.93C14.23 2.78 13.22 1.77 12 1.07C10.78 0.37 9.4 0 8 0C6.6 0 5.22 0.37 4 1.07C2.78 1.77 1.77 2.78 1.07 4L4.54 10L4.54 10C4.19 9.39 4 8.7 4 8C4 7.3 4.18 6.61 4.54 6C4.89 5.39 5.39 4.89 6 4.54C6.61 4.18 7.3 4 8 4Z" fill="#E33B2E"/>
                </g>
                <defs><clipPath id="clip0_guide_chrome2"><rect width="16" height="16" fill="white"/></clipPath></defs>
              </svg>
              <span>Chrome浏览器：chrome://extensions</span>
              <span class="agent-browser-guide-drawer__copy-btn">
                <svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
                复制
              </span>
            </div>
            <div class="agent-browser-guide-drawer__browser-link" @click="copyToClipboard('edge://extensions')">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_guide_edge2)">
                  <path d="M14.4375 11.9059C14.225 12.0184 14.0062 12.1184 13.7812 12.1996C13.0625 12.4684 12.3062 12.6059 11.5375 12.6059C8.5812 12.6059 6.0062 10.5746 6.0062 7.96211C6.01245 7.24961 6.4062 6.59336 7.0312 6.25586C4.3562 6.36836 3.6687 9.15586 3.6687 10.7871C3.6687 15.4059 7.92495 15.8746 8.8437 15.8746C9.33745 15.8746 10.0812 15.7309 10.5312 15.5871L10.6125 15.5621C12.3375 14.9684 13.8 13.8059 14.775 12.2621C14.85 12.1434 14.8125 11.9934 14.7 11.9184C14.6187 11.8684 14.5187 11.8621 14.4375 11.9059Z" fill="#0C59A4"/>
                  <path d="M9.51875 9.30625C9.46875 9.36875 9.3125 9.4625 9.3125 9.6625C9.3125 9.825 9.41875 9.98125 9.60625 10.1125C10.5062 10.7375 12.2 10.6562 12.2063 10.6562C12.875 10.6562 13.525 10.475 14.1 10.1375C15.275 9.45 16 8.19375 16 6.83125C16.0187 5.43125 15.5 4.5 15.2937 4.0875C13.9688 1.49375 11.1062 0 8 0C3.625 0 0.0625 3.5125 0 7.8875C0.03125 5.60625 2.3 3.7625 5 3.7625C5.21875 3.7625 6.46875 3.78125 7.625 4.39375C8.64375 4.93125 9.18125 5.575 9.55 6.21875C9.9375 6.8875 10.0063 7.725 10.0063 8.0625C10.0063 8.39375 9.8375 8.89375 9.51875 9.30625Z" fill="#35C1F1"/>
                </g>
                <defs><clipPath id="clip0_guide_edge2"><rect width="16" height="16" fill="white"/></clipPath></defs>
              </svg>
              <span>Edge浏览器：edge://extensions</span>
              <span class="agent-browser-guide-drawer__copy-btn">
                <svg viewBox="0 0 14 14" fill="none" width="12" height="12"><rect x="4" y="4" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1"/><path d="M10 4V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h1" stroke="currentColor" stroke-width="1"/></svg>
                复制
              </span>
            </div>
          </div>
        </div>
        <!-- 步骤2示意图 -->
        <img src="@/assets/images/agent-setting/2-1.png" alt="输入扩展地址" class="agent-browser-guide-drawer__step-img" />
      </div>

      <!-- 步骤3：打开开发者模式 -->
      <div class="agent-browser-guide-drawer__card">
        <div class="agent-browser-guide-drawer__step-row">
          <span class="agent-browser-guide-drawer__step-num">3</span>
          <div class="agent-browser-guide-drawer__step-info">
            <h4 class="agent-browser-guide-drawer__step-title">打开开发者模式</h4>
            <p class="agent-browser-guide-drawer__step-desc"><span class="color-D31414">Chrome浏览器</span>在扩展管理页面的右上角，找到「开发者模式」开关并打开</p>
            <p class="agent-browser-guide-drawer__step-desc mt3"><span class="color-2F7DEA">Edge浏览器</span>在扩展管理页面左下角，找到「开发者模式」开关并打开</p>
          </div>
        </div>
        <!-- 步骤3示意图 -->
        <img src="@/assets/images/agent-setting/3-1.png" alt="打开开发者模式" class="agent-browser-guide-drawer__step-img max-w602" />
      </div>

      <!-- 步骤4：加载未打包的扩展程序 -->
      <div class="agent-browser-guide-drawer__card">
        <div class="agent-browser-guide-drawer__step-row">
          <span class="agent-browser-guide-drawer__step-num">4</span>
          <div class="agent-browser-guide-drawer__step-info dflex flex-warp">
            <div>
              <h4 class="agent-browser-guide-drawer__step-title">点击加载未打包的扩展程序</h4>
              <p class="agent-browser-guide-drawer__step-desc">点击「加载未打包的扩展程序」，选择直接包含 static 文件夹的「Offer派智能投递助手」文件夹</p>
            </div>
            <img src="@/assets/images/agent-setting/4-1.png" alt="加载扩展" class="agent-browser-guide-drawer__step-img" />
          </div>
        </div>
        <!-- 步骤4示意图 -->

        <img src="@/assets/images/agent-setting/4-2.png" alt="加载扩展" class="agent-browser-guide-drawer__step-img" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

/** 当前激活的Tab */
const activeTab = ref<'edge' | 'manual'>('edge')

/** Edge扩展商店地址 */
const edgeStoreUrl = 'https://microsoftedge.microsoft.com/addons/detail/offer派智能投递助手/jianshixingqiu'
/** Edge商店地址展示文本（截断显示） */
const edgeStoreUrlDisplay = 'https://microsoftedge.microsoft.com/addons/detai...'

/** 插件zip下载地址 */
const extensionDownloadUrl = 'https://offerpie.oss-cn-guangzhou.aliyuncs.com/extension/Offer派智能投递助手.zip'

/** 跳转Edge商店 */
function openEdgeStore() {
  window.open(edgeStoreUrl, '_blank')
}

/** 下载插件zip包 */
function downloadExtension() {
  window.open(extensionDownloadUrl, '_blank')
}

/** 复制文本到剪贴板 */
function copyToClipboard(text: string) {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制')
  })
}

/** 暴露方法给父组件调用 */
defineExpose({ downloadExtension })
</script>
