zhaoshang_client_ui/src/components/Chat/PolicyMatch.vue

<template>
  <div v-if="showSummary" class="policy-match-summary" :class="{ 'record-mode': recordMode }">
    <div class="policy-header" v-if="panelData.length > 0">匹配完成！推荐您了解以下政策事项</div>
    <div class="policy-content-wrapper">
      <div class="policy-line"></div>
      <div class="policy-box">
        <div class="policy-item" v-for="(item, index) in panelData" :key="`${item.title}-${index}`">
          <div class="policy-item-header">
            <div class="policy-badge">
              <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5.33333 13.33333c-1.54444-0.38889-2.81944-1.275-3.825-2.65833-1.00556-1.38333-1.50833-2.91944-1.50833-4.60833l0-4.06667 5.33333-2 5.33334 2 0 4.06667c0 0.94444-0.16111 1.85278-0.48334 2.725-0.32222 0.87222-0.78333 1.64167-1.38333 2.30833l-2.13333-2.13333c-0.2 0.12222-0.41389 0.21389-0.64167 0.275-0.22778 0.06111-0.45833 0.09167-0.69167 0.09166-0.73333 0-1.36111-0.26111-1.88333-0.78333-0.52222-0.52222-0.78333-1.15-0.78333-1.88333 0-0.73333 0.26111-1.36111 0.78333-1.88334 0.52222-0.52222 1.15-0.78333 1.88333-0.78333 0.73333 0 1.36111 0.26111 1.88334 0.78333 0.52222 0.52222 0.78333 1.15 0.78333 1.88334 0 0.24444-0.03056 0.48056-0.09167 0.70833-0.06111 0.22778-0.15278 0.44722-0.275 0.65833l1 1c0.22222-0.45556 0.39444-0.93333 0.51667-1.43333 0.12222-0.5 0.18333-1.01111 0.18333-1.53333l0-3.15-4-1.5-4 1.5 0 3.15c0 1.34444 0.37778 2.56667 1.13334 3.66666 0.75556 1.1 1.71111 1.83333 2.86666 2.2 0.28889-0.08889 0.56389-0.20278 0.825-0.34166 0.26111-0.13889 0.51944-0.30278 0.775-0.49167l0.93334 0.93333c-0.36667 0.3-0.76389 0.56111-1.19167 0.78334-0.42778 0.22222-0.875 0.39444-1.34167 0.51666l0 0m0-5.33333c0.36667 0 0.68056-0.13056 0.94167-0.39167 0.26111-0.26111 0.39167-0.575 0.39167-0.94166 0-0.36667-0.13056-0.68056-0.39167-0.94167-0.26111-0.26111-0.575-0.39167-0.94167-0.39167-0.36667 0-0.68056 0.13056-0.94166 0.39167-0.26111 0.26111-0.39167 0.575-0.39167 0.94167 0 0.36667 0.13056 0.68056 0.39167 0.94166 0.26111 0.26111 0.575 0.39167 0.94166 0.39167l0 0"
                  fill="currentColor" />
              </svg>
              <span>{{ item.enterprise_benefit || '企业收益' }}</span>
            </div>
            <!-- 来源标识：来自惠企政策库的卡片在右上角打标 -->
            <div class="policy-source-badge" v-if="item.is_policy_library">惠企</div>
            <!-- <div class="policy-match-degree" v-if="item.match_degree">
              <span class="label">匹配度</span>
              <span class="value">{{ item.match_degree }}</span>
            </div> -->
          </div>
          <div class="policy-title">{{ item.title }}</div>
          <div class="policy-desc" v-if="item.desc">{{ item.desc }}</div>
          <div class="policy-item-action" @click.stop="openDetailByItem(item)">查看详情</div>
        </div>
      </div>
      <div class="view-all-btn" @click.stop="openCardList">更多 >></div>
    </div>
  </div>

  <Teleport to="body">
    <div v-if="panelVisible" class="policy-viewer-modal"
      :class="[{ 'is-wide': isWide }, recordMode ? 'record-theme' : '']">
      <transition name="policy-panel">
          <div v-if="panelVisible" class="policy-viewer-content" :class="[
            isWide ? 'right-fixed' : '',
            panelMode === 'detail' ? 'detail-mode-bg' : 'list-mode-bg'
          ]">
          <div class="policy-viewer-header" :class="{ 'policy-viewer-header-record': recordMode }">
            <div class="header-title" v-if="!recordMode && !(isMobileViewer && panelMode === 'detail')">
              {{ panelMode === 'cardList' ? '政策列表' : '智能政策匹配' }}
            </div>
            <div class="header-actions">
              <button v-if="panelMode === 'detail' && !recordMode" class="header-back" @click.stop="openPolicyList">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 18L9 12L15 6" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
              </button>
              <button class="header-close" @click.stop="closePanel" :class="{ 'record-close-btn': recordMode }">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 6L6 18M6 6L18 18" :stroke="recordMode ? 'currentColor' : 'white'" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </button>
            </div>
          </div>

          <!-- list / cardList 共用这个 body（靠下面的 v-if 分叉内容），样式类完全复用 -->
          <div v-if="panelMode !== 'detail'" class="panel-scroll list-body" ref="listBodyRef"
            :class="{ 'list-body-record': recordMode }">
            <div class="list-content">
              <div class="record-list-header" v-if="recordMode">
                <div class="record-list-title">{{ panelMode === 'cardList' ? '政策列表' : '政策事项列表' }}</div>
                <div class="record-list-subtitle">
                  {{ panelMode === 'cardList' ? '汇总本会话内出现的全部政策事项' : '浏览、搜索及筛选最新的惠企政策' }}
                </div>
              </div>

              <div class="search-filter-bar" v-if="isZhaoshangLLM && (recordMode || panelMode === 'cardList')">
                <div class="search-filter-top">
                  <div class="search-input-wrapper">
                    <svg class="search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z"
                        fill="#777587" />
                    </svg>
                    <input type="text" placeholder="输入政策关键词" class="search-input" v-model="searchKeyword" />
                  </div>
                  <!-- 部门 / 分类筛选：只在旧列表面板出现 -->
                  <div class="filter-selects" v-if="panelMode === 'list'" @click.stop>
                    <div class="filter-select-wrapper">
                      <div class="filter-option" @click="toggleFilterMenu" :class="{ 'is-open': showFilterMenu }">
                        {{ currentFilterOption }}
                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M6.3 8.4L10.5 12.6L14.7 8.4" stroke="#6b7280" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                      </div>
                      <transition name="popover-fade">
                        <div class="filter-popover" v-if="showFilterMenu">
                          <div class="filter-popover-item" v-for="opt in filterOptions" :key="opt"
                            :class="{ active: currentFilterOption === opt }" @click="selectFilter(opt)">
                            {{ opt }}
                          </div>
                        </div>
                      </transition>
                    </div>

                    <div class="filter-select-wrapper">
                      <button class="filter-btn" @click="toggleDeptMenu" :class="{ 'is-open': showDeptMenu }">
                        <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M5.83333 10V8.33333H9.16667V10H5.83333ZM2.5 5.83333V4.16667H12.5V5.83333H2.5ZM0 1.66667V0H15V1.66667H0Z"
                            fill="white" />
                        </svg>
                        {{ currentDeptFilter === '全部部门' ? '部门筛选' : currentDeptFilter }}
                      </button>
                      <transition name="popover-fade">
                        <div class="filter-popover dept-popover" v-if="showDeptMenu">
                          <div class="filter-popover-item" v-for="dept in deptOptions" :key="dept"
                            :class="{ active: currentDeptFilter === dept }" @click="selectDeptFilter(dept)">
                            {{ dept }}
                          </div>
                        </div>
                      </transition>
                    </div>
                  </div>
                </div>
                <div class="quick-chips">
                  <span class="chip-label">热门搜索:</span>
                  <div class="chip" v-for="keyword in quickSearchKeywords" :key="keyword"
                    @click="handleQuickSearch(keyword)">
                    {{ keyword }}
                  </div>
                </div>
              </div>

              <div class="list-items-container">
                <div class="list-item-wrapper" v-for="(item, index) in paginatedPolicies"
                  :key="`${item.title}-${index}`" @click.stop="openDetailByItem(item)">
                  <div class="list-item" :class="{ 'record-list-item': recordMode }">
                    <div class="list-item-content">
                      <div class="list-item-tag" v-if="item.tag && !recordMode">
                        <svg class="tag-icon" width="14" height="14" viewBox="0 0 14 14" fill="none"
                          xmlns="http://www.w3.org/2000/svg">
                          <path d="M11 5L5.5 10.5L3 8" stroke="white" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                          <circle cx="7" cy="7" r="6" stroke="white" stroke-width="1.5" />
                        </svg>
                        {{ item.tag }}
                      </div>

                      <template v-if="recordMode">
                        <div class="record-item-top">
                          <div class="record-item-tag" v-if="item.tag">{{ item.tag }}</div>
                          <!-- <div class="record-item-date">申报结束时间: {{ item.end_date || item.date }}</div> -->
                        </div>
                        <div class="list-item-title">{{ item.declaration_item || item.title }}</div>
                        <div class="record-item-source">{{ item.title }}</div>
                      </template>
                      <template v-else>
                        <div class="list-item-title">{{ item.declaration_item }}</div>
                        <div class="list-item-source">{{ item.title }}</div>
                        <div class="list-item-date">
                          <svg class="date-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                              d="M16.6667 4.16667H3.33333C2.41286 4.16667 1.66667 4.91286 1.66667 5.83333V17.5C1.66667 18.4205 2.41286 19.1667 3.33333 19.1667H16.6667C17.5871 19.1667 18.3333 18.4205 18.3333 17.5V5.83333C18.3333 4.91286 17.5871 4.16667 16.6667 4.16667Z"
                              stroke="#505050" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M13.3333 1.66667V6.66667" stroke="#505050" stroke-width="1.5"
                              stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M6.66667 1.66667V6.66667" stroke="#505050" stroke-width="1.5"
                              stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M1.66667 9.16667H18.3333" stroke="#505050" stroke-width="1.5"
                              stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                          {{ item.date }}
                        </div>
                      </template>
                    </div>

                    <div class="record-item-actions" v-if="recordMode">
                      <!-- <div class="record-match-box">
                        <svg class="record-match-icon" viewBox="0 0 57 57" fill="none"
                          xmlns="http://www.w3.org/2000/svg" style="transform: rotate(-90deg)">
                          <circle cx="28.5" cy="28.5" r="25.5" stroke="#DCE2F7" stroke-width="5.33"
                            stroke-linecap="round" stroke-linejoin="round" />
                          <circle cx="28.5" cy="28.5" r="25.5" stroke="#3525CD" stroke-width="5.33"
                            stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="160.22"
                            :stroke-dashoffset="160.22 - 160.22 * getMatchProgress(item.match_degree)" />
                        </svg>
                        <div class="record-match-text">{{ formatMatchDegree(item.match_degree) }}</div>
                      </div> -->
                      <!-- <div class="record-match-meta">匹配度</div> -->
                      <button class="record-detail-btn" @click.stop="openDetailByItem(item)">查看详情</button>
                    </div>

                    <div v-if="item.isRecommended && !recordMode" class="list-item-recommend">推荐</div>
                  </div>
                </div>
              </div>

              <div class="pagination-container" v-if="totalPages > 1">
                <button class="page-btn prev-btn" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
                  <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.4 1.4L6 0L0 6L6 12L7.4 10.6L2.8 6Z" fill="currentColor" />
                  </svg>
                </button>
                <template v-for="page in visiblePages" :key="page">
                  <div v-if="page === '...'" class="page-ellipsis">...</div>
                  <button v-else class="page-btn" :class="{ active: page === currentPage }"
                    @click="changePage(page as number)">
                    {{ page }}
                  </button>
                </template>
                <button class="page-btn next-btn" :disabled="currentPage === totalPages"
                  @click="changePage(currentPage + 1)">
                  <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 1.4L1.4 0L7.4 6L1.4 12L0 10.6L4.6 6Z" fill="currentColor" />
                  </svg>
                </button>
              </div>

            </div>
          </div>

          <div v-else class="panel-scroll detail-body" :class="{ 'detail-body-record': recordMode }">
            <div class="record-header-section" v-if="recordMode">
              <!-- 只有惠企政策才显示「返回政策事项列表」——它通向惠企政策库 -->
              <div class="record-back-btn" v-if="selectedIsPolicyLibrary" @click.stop="openPolicyList">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 12.5L6 8L10.5 3.5L9.5 2.5L4 8L9.5 13.5L10.5 12.5Z" fill="#3525CD" />
                </svg>
                <span>返回政策事项列表</span>
              </div>
              <div class="record-main-title">{{ selectedPolicyItem?.declaration_item ||
                '建立重点产品碳足迹背景数据库，构建碳足迹因子核算和发布工作机制' }}</div>
              <div class="record-meta-info">
                <div class="record-meta-item meta-name">
                  <div class="meta-label">政策名称</div>
                  <div class="meta-value">
                    <a v-if="selectedPolicyItem?.apply_link" :href="selectedPolicyItem.apply_link" target="_blank" class="policy-link" rel="noopener noreferrer">{{ selectedPolicyItem?.title || '上海市青浦区加强知识产权保护、促进质量提升和标准体系建设的政策措施' }}</a>
                    <template v-else>{{ selectedPolicyItem?.title || '上海市青浦区加强知识产权保护、促进质量提升和标准体系建设的政策措施' }}</template>
                  </div>
                </div>
                <div class="record-meta-divider"></div>
                <div class="record-meta-item meta-no">
                  <div class="meta-label">{{ recordMode ? '政策所属部门' : '政策文号' }}</div>
                  <div class="meta-value">{{ selectedPolicyItem?.source || '青府发〔2024〕1号' }}</div>
                </div>
              </div>
              <div class="mobile-record-meta-info">
                <div class="mobile-record-meta-item meta-name">
                  <div class="meta-value">
                    <a v-if="selectedPolicyItem?.apply_link" :href="selectedPolicyItem.apply_link" target="_blank" class="policy-link" rel="noopener noreferrer">{{ selectedPolicyItem?.title || '上海市青浦区加强知识产权保护、促进质量提升和标准体系建设的政策措施' }}</a>
                    <template v-else>{{ selectedPolicyItem?.title || '上海市青浦区加强知识产权保护、促进质量提升和标准体系建设的政策措施' }}</template>
                  </div>
                </div>
              </div>
            </div>

            <div class="detail-header" v-if="!recordMode">
              <div class="detail-title">
                <a v-if="selectedPolicyItem?.apply_link" :href="selectedPolicyItem.apply_link" target="_blank" class="policy-link" rel="noopener noreferrer">{{ selectedPolicyItem?.title }}</a>
                <template v-else>{{ selectedPolicyItem?.title }}</template>
              </div>
              <div class="detail-subtitle">{{ selectedPolicyItem?.declaration_item }}</div>
            </div>
            <div class="divider" v-if="!recordMode"></div>
            <div class="detail-section-title" v-if="!recordMode">政策解析</div>

            <div :class="recordMode ? 'detail-body-grid' : ''">
              <div class="detail-row card-style">
                <div class="record-condition-title">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M0 18V16.425C0 15.7083 0.366667 15.125 1.1 14.675C1.83333 14.225 2.8 14 4 14C4.21667 14 4.425 14.0042 4.625 14.0125C4.825 14.0208 5.01667 14.0417 5.2 14.075C4.96667 14.425 4.79167 14.7917 4.675 15.175C4.55833 15.5583 4.5 15.9583 4.5 16.375V18H0ZM6 18V16.375C6 15.8417 6.14583 15.3542 6.4375 14.9125C6.72917 14.4708 7.14167 14.0833 7.675 13.75C8.20833 13.4167 8.84583 13.1667 9.5875 13C10.3292 12.8333 11.1333 12.75 12 12.75C12.8833 12.75 13.6958 12.8333 14.4375 13C15.1792 13.1667 15.8167 13.4167 16.35 13.75C16.8833 14.0833 17.2917 14.4708 17.575 14.9125C17.8583 15.3542 18 15.8417 18 16.375V18H6ZM19.5 18V16.375C19.5 15.9417 19.4458 15.5333 19.3375 15.15C19.2292 14.7667 19.0667 14.4083 18.85 14.075C19.0333 14.0417 19.2208 14.0208 19.4125 14.0125C19.6042 14.0042 19.8 14 20 14C21.2 14 22.1667 14.2208 22.9 14.6625C23.6333 15.1042 24 15.6917 24 16.425V18H19.5ZM8.125 16H15.9C15.7333 15.6667 15.2708 15.375 14.5125 15.125C13.7542 14.875 12.9167 14.75 12 14.75C11.0833 14.75 10.2458 14.875 9.4875 15.125C8.72917 15.375 8.275 15.6667 8.125 16ZM4 13C3.45 13 2.97917 12.8042 2.5875 12.4125C2.19583 12.0208 2 11.55 2 11C2 10.4333 2.19583 9.95833 2.5875 9.575C2.97917 9.19167 3.45 9 4 9C4.56667 9 5.04167 9.19167 5.425 9.575C5.80833 9.95833 6 10.4333 6 11C6 11.55 5.80833 12.0208 5.425 12.4125C5.04167 12.8042 4.56667 13 4 13ZM20 13C19.45 13 18.9792 12.8042 18.5875 12.4125C18.1958 12.0208 18 11.55 18 11C18 10.4333 18.1958 9.95833 18.5875 9.575C18.9792 9.19167 19.45 9 20 9C20.5667 9 21.0417 9.19167 21.425 9.575C21.8083 9.95833 22 10.4333 22 11C22 11.55 21.8083 12.0208 21.425 12.4125C21.0417 12.8042 20.5667 13 20 13ZM12 12C11.1667 12 10.4583 11.7083 9.875 11.125C9.29167 10.5417 9 9.83333 9 9C9 8.15 9.29167 7.4375 9.875 6.8625C10.4583 6.2875 11.1667 6 12 6C12.85 6 13.5625 6.2875 14.1375 6.8625C14.7125 7.4375 15 8.15 15 9C15 9.83333 14.7125 10.5417 14.1375 11.125C13.5625 11.7083 12.85 12 12 12ZM12 10C12.2833 10 12.5208 9.90417 12.7125 9.7125C12.9042 9.52083 13 9.28333 13 9C13 8.71667 12.9042 8.47917 12.7125 8.2875C12.5208 8.09583 12.2833 8 12 8C11.7167 8 11.4792 8.09583 11.2875 8.2875C11.0958 8.47917 11 8.71667 11 9C11 9.28333 11.0958 9.52083 11.2875 9.7125C11.4792 9.90417 11.7167 10 12 10Z"
                      fill="#3525CD" />
                  </svg>
                  <span>支持对象</span>
                </div>
                <div class="card-content"
                  style="font-size: 14px; line-height: 1.6; color: #464555; gap: 11px; display: flex; flex-direction: column;">
                  <div class="detail-item">
                    {{ selectedPolicyItem?.support_objects }}
                  </div>
                </div>
              </div>

              <div class="detail-row card-style">
                <div class="record-condition-title">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M14 13.1992C13.1667 13.1992 12.4583 12.9076 11.875 12.3242C11.2917 11.7409 11 11.0326 11 10.1992C11 9.36589 11.2917 8.65755 11.875 8.07422C12.4583 7.49089 13.1667 7.19922 14 7.19922C14.8333 7.19922 15.5417 7.49089 16.125 8.07422C16.7083 8.65755 17 9.36589 17 10.1992C17 11.0326 16.7083 11.7409 16.125 12.3242C15.5417 12.9076 14.8333 13.1992 14 13.1992ZM7 16.1992C6.45 16.1992 5.97917 16.0034 5.5875 15.6117C5.19583 15.2201 5 14.7492 5 14.1992V6.19922C5 5.64922 5.19583 5.17839 5.5875 4.78672C5.97917 4.39505 6.45 4.19922 7 4.19922H21C21.55 4.19922 22.0208 4.39505 22.4125 4.78672C22.8042 5.17839 23 5.64922 23 6.19922V14.1992C23 14.7492 22.8042 15.2201 22.4125 15.6117C22.0208 16.0034 21.55 16.1992 21 16.1992H7ZM9 14.1992H19C19 13.6492 19.1958 13.1784 19.5875 12.7867C19.9792 12.3951 20.45 12.1992 21 12.1992V8.19922C20.45 8.19922 19.9792 8.00339 19.5875 7.61172C19.1958 7.22005 19 6.74922 19 6.19922H9C9 6.74922 8.80417 7.22005 8.4125 7.61172C8.02083 8.00339 7.55 8.19922 7 8.19922V12.1992C7.55 12.1992 8.02083 12.3951 8.4125 12.7867C8.80417 13.1784 9 13.6492 9 14.1992ZM20 20.1992H3C2.45 20.1992 1.97917 20.0034 1.5875 19.6117C1.19583 19.2201 1 18.7492 1 18.1992V7.19922H3V18.1992H20V20.1992ZM7 14.1992V6.19922V14.1992Z"
                      fill="#3525CD" />
                  </svg>
                  <span>支持方式和标准</span>
                </div>
                <div class="card-content" style="font-size: 14px; line-height: 1.6; color: #464555;">
                  <template v-if="Array.isArray(selectedPolicyItem?.support_measures)">
                    <div v-for="(measure, index) in selectedPolicyItem?.support_measures" :key="index"
                      style="margin-bottom: 8px;">
                      {{ measure }}
                    </div>
                  </template>
                  <template
                    v-else-if="typeof selectedPolicyItem?.support_measures === 'string' && selectedPolicyItem?.support_measures.startsWith('[') && selectedPolicyItem?.support_measures.endsWith(']')">
                    <div v-for="(measure, index) in parseStringArray(selectedPolicyItem?.support_measures)" :key="index"
                      style="margin-bottom: 8px;">
                      {{ measure }}
                    </div>
                  </template>
                  <template v-else>
                    {{ selectedPolicyItem?.support_measures }}
                  </template>
                </div>
              </div>
            </div>

            <div class="detail-row" :style="recordMode ? 'margin-top: 23.69px;' : ''"
              :class="{ 'condition-section': recordMode }">
              <div class="row-label" v-if="!recordMode">
                <div class="dot-icon">
                  <div class="dot-inner"></div>
                </div>
                <span class="label-text">申报条件</span>
              </div>
              <div class="row-value" v-if="!recordMode">{{ selectedPolicyItem?.apply_conditions }}</div>

              <template v-if="recordMode">
                <div class="record-condition-title" style="justify-content: space-between;">
                  <div style="display: flex; align-items: center; gap: 8px;">
                    <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor"
                        d="M7.6 15.05l7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25 0 0m-5.6 4.95c-0.55 0-1.02083-0.19583-1.4125-0.5875-0.39167-0.39167-0.5875-0.8625-0.5875-1.4125l0-14c0-0.55 0.19583-1.02083 0.5875-1.4125 0.39167-0.39167 0.8625-0.5875 1.4125-0.5875l4.2 0c0.21667-0.6 0.57917-1.08333 1.0875-1.45 0.50833-0.36667 1.07917-0.55 1.7125-0.55 0.63333 0 1.20417 0.18333 1.7125 0.55 0.50833 0.36667 0.87083 0.85 1.0875 1.45l4.2 0c0.55 0 1.02083 0.19583 1.4125 0.5875 0.39167 0.39167 0.5875 0.8625 0.5875 1.4125l0 14c0 0.55-0.19583 1.02083-0.5875 1.4125-0.39167 0.39167-0.8625 0.5875-1.4125 0.5875l-14 0 0 0m0-2l14 0 0 0 0 0 0-14 0 0 0 0-14 0 0 0 0 0 0 14 0 0 0 0 0 0m7-14.75c0.21667 0 0.39583-0.07083 0.5375-0.2125 0.14167-0.14167 0.2125-0.32083 0.2125-0.5375 0-0.21667-0.07083-0.39583-0.2125-0.5375-0.14167-0.14167-0.32083-0.2125-0.5375-0.2125-0.21667 0-0.39583 0.07083-0.5375 0.2125-0.14167 0.14167-0.2125 0.32083-0.2125 0.5375 0 0.21667 0.07083 0.39583 0.2125 0.5375 0.14167 0.14167 0.32083 0.2125 0.5375 0.2125l0 0m-7 14.75l0 0 0 0 0-14 0 0 0 0 0 0 0 0 0 0 0 14 0 0 0 0 0 0 0 0" />
                    </svg>
                    <span>申报条件匹配分析</span>
                  </div>
                </div>

                <div class="condition-content-wrapper">
                  <div class="condition-text-box">
                    申报条件：<br />{{ selectedPolicyItem?.apply_conditions }}
                  </div>

                  <div v-if="selectedPolicyItem?.match_degree" class="condition-match-card"
                    :class="getMatchLevelClass(selectedPolicyItem?.match_degree)">
                    <div class="match-card-header">
                      <div class="match-card-title">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path fill="currentColor"
                            d="M8.6 14.6l7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25 0 0m1.4 5.4c-1.38333 0-2.68333-0.2625-3.9-0.7875-1.21667-0.525-2.275-1.2375-3.175-2.1375-0.9-0.9-1.6125-1.95833-2.1375-3.175-0.525-1.21667-0.7875-2.51667-0.7875-3.9 0-1.38333 0.2625-2.68333 0.7875-3.9 0.525-1.21667 1.2375-2.275 2.1375-3.175 0.9-0.9 1.95833-1.6125 3.175-2.1375 1.21667-0.525 2.51667-0.7875 3.9-0.7875 1.38333 0 2.68333 0.2625 3.9 0.7875 1.21667 0.525 2.275 1.2375 3.175 2.1375 0.9 0.9 1.6125 1.95833 2.1375 3.175 0.525 1.21667 0.7875 2.51667 0.7875 3.9 0 1.38333-0.2625 2.68333-0.7875 3.9-0.525 1.21667-1.2375 2.275-2.1375 3.175-0.9 0.9-1.95833 1.6125-3.175 2.1375-1.21667 0.525-2.51667 0.7875-3.9 0.7875l0 0m0-2c2.23333 0 4.125-0.775 5.675-2.325 1.55-1.55 2.325-3.44167 2.325-5.675 0-2.23333-0.775-4.125-2.325-5.675-1.55-1.55-3.44167-2.325-5.675-2.325-2.23333 0-4.125 0.775-5.675 2.325-1.55 1.55-2.325 3.44167-2.325 5.675 0 2.23333 0.775 4.125 2.325 5.675 1.55 1.55 3.44167 2.325 5.675 2.325l0 0m0-8l0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0" />
                        </svg>
                        <span>匹配原因</span>
                      </div>
                      <!-- <div class="match-badge">
                        {{ formatMatchDegree(selectedPolicyItem?.match_degree) }}
                      </div> -->
                    </div>
                    <div class="match-card-body">
                      {{ selectedPolicyItem?.match_reason }}
                    </div>
                  </div>
                </div>
              </template>
            </div>

            <!-- 条件核验（来自 /api/chat 的 item.conditions） -->
            <div v-if="recordMode && selectedConditions.length" class="detail-row card-style">
              <div class="record-condition-title">
                <span>条件核验</span>
              </div>
              <div class="condition-content-wrapper">
                <div v-for="(condition, index) in selectedConditions" :key="`condition-${index}`"
                  class="condition-match-card" :class="getConditionLevelClass(condition?.status)">
                  <div class="match-card-header">
                    <div class="match-card-title">
                      <span>{{ condition?.dimension || '其他条件' }} · {{ condition?.status || '待确认' }}</span>
                    </div>
                  </div>
                  <div class="match-card-body">
                    <div v-if="condition?.requirement">要求：{{ condition.requirement }}</div>
                    <div v-if="condition?.quote">原文：{{ condition.quote }}</div>
                    <div v-if="condition?.user_evidence">已知信息：{{ condition.user_evidence }}</div>
                    <div v-if="condition?.question">待确认：{{ condition.question }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 匹配依据（来自 /api/chat 的 item.match_basis） -->
            <div v-if="recordMode && selectedMatchBasis.length" class="detail-row card-style">
              <div class="record-condition-title">
                <span>匹配依据</span>
              </div>
              <div class="condition-content-wrapper">
                <div v-for="(basis, index) in selectedMatchBasis" :key="`basis-${index}`"
                  class="condition-match-card" :class="getBasisLevelClass(basis?.status)">
                  <div class="match-card-header">
                    <div class="match-card-title">
                      <span>{{ basis?.dimension || '其他' }} · {{ formatBasisStatus(basis?.status) }}</span>
                    </div>
                  </div>
                  <div class="match-card-body">
                    <div v-if="basis?.explanation">{{ basis.explanation }}</div>
                    <div v-if="basis?.fact_quote">主体：{{ basis.fact_quote }}</div>
                    <div v-if="basis?.policy_quote">政策：{{ basis.policy_quote }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="detail-row" v-if="!recordMode">
              <div class="row-label">
                <div class="dot-icon" v-if="!recordMode">
                  <div class="dot-inner"></div>
                </div>
                <span class="label-text">申报材料</span>
              </div>
              <div class="row-value">{{ selectedPolicyItem?.apply_materials }}</div>
            </div>
            <div class="detail-row" v-if="!recordMode">
              <div class="row-label">
                <div class="dot-icon" v-if="!recordMode">
                  <div class="dot-inner"></div>
                </div>
                <span class="label-text">附件</span>
              </div>
              <div class="row-value">
                <div class="attachment-item" v-for="(attachment, index) in selectedPolicyItem?.attachments"
                  :key="index">
                  <a :href="attachment.url" target="_blank">{{ attachment.name }}</a>
                </div>
              </div>
            </div>

            <div class="divider" v-if="!recordMode"></div>
            <div class="detail-footer" v-if="!recordMode">
              <div class="footer-title">匹配原因</div>
              <div class="footer-desc">{{ selectedPolicyItem?.match_reason }}</div>
            </div>
          </div>
          </div>
        </transition>
      </div>
    </Teleport>
</template>

<script setup lang="ts">
import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { parsePolicyTableContent } from "@/utils/stream-xml-filter";
import { isZhaoshangLLM as isZhaoshangLLMModel } from "@/utils";
import {
  buildLibraryNameSet,
  buildPolicyDetailUrl,
  collectMatchedLibraryNames,
  isPolicyLibraryItem,
  pinMatchedFirst,
} from "./policy-library-utils";
import {
  resolvePolicyDetailIndex,
  buildPolicyCardDedupKey,
  dedupePolicyItems,
  matchesPolicyCardKeyword,
  sortPolicyCardsByMatchScore,
  type PolicyListFilterOption,
} from "./policy-match-utils";
import { MODAL_MUTEX_KEY } from "../business-assistant/modal-mutex";

type RawPolicyItem = Record<string, any>;

type PolicyItem = {
  title: string;
  desc: string;
  declaration_item: string;
  support_objects: string;
  support_measures: string;
  apply_conditions: string;
  apply_materials: string;
  attachments: string;
  match_reason: string;
  tag: string;
  source: string;
  match_score: number;
  match_degree: string;
  enterprise_benefit: string;
  isRecommended: boolean;
  date: string;
  end_date: string;
  apply_link?: string;
  originalData: RawPolicyItem;
};

const props = withDefaults(
  defineProps<{
    visible?: boolean;
    policyData?: RawPolicyItem[] | null;
    policyContent?: string;
    recordMode?: boolean;
    sessionId?: string;
  }>(),
  {
    visible: true,
    policyData: null,
    policyContent: "",
    recordMode: false,
    sessionId: "",
  }
);

const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
}>();

const policies = ref<PolicyItem[]>([]);
const policyListItems = ref<PolicyItem[]>([]);
const policyListTotal = ref(0);
const panelVisible = ref(false);
const policyModalId = Symbol("policy-viewer");
const modalMutex = inject(MODAL_MUTEX_KEY, null);
let unregisterPolicyModal: (() => void) | undefined;
// list = 旧列表（惠企政策库 + 部门/分类筛选）；cardList = 卡片区「更多」侧边栏；detail = 单条详情
const panelMode = ref<"list" | "cardList" | "detail">("list");
const selectedPolicy = ref<number>(0);
const selectedPolicyOverride = ref<PolicyItem | null>(null);
const isWide = ref(false);
const isMobileViewer = ref(false);
const isZhaoshangLLM = computed(() => isZhaoshangLLMModel(globalThis.llmModel));
const widthLevel = 1200;
const panelWidth = 700;

const itemsPerPage = 20;
const currentPage = ref(1);

const listBodyRef = ref<HTMLElement | null>(null);

const filterOptions: PolicyListFilterOption[] = ["所有分类", "只看免申即享", "非免申即享"];
const currentFilterOption = ref<PolicyListFilterOption>("所有分类");
const showFilterMenu = ref(false);

/**
 * 部门筛选项：只列数据里实际存在的部门。
 *
 * ⚠️ 用 ref + 手动刷新，**不用 computed**：`globalThis.policiesPublic` 由
 * `ensurePolicyLibrary` 异步加载、不是响应式依赖（见 getLibraryPolicies），
 * computed 会把首次读到的空列表缓存住。
 * 所以在打开菜单时现算一次（那时数据早已加载完）。
 */
const deptOptions = ref<string[]>(["全部部门"]);

const collectDeptOptions = (): string[] => {
  /**
   * 只取**政策库**里 `政策所属部门` 的取值：卡片的 `source` 可能是**多部门串**
   * （含顿号/逗号/换行），并进来会变成又长又筛不出东西的假部门，一并挡掉。
   */
  const looksLikeSingleDept = (value: string) => value.length <= 12 && !/[,，、\s]/.test(value);

  const unique = [
    ...new Set(
      getLibraryPolicies()
        .map((item) => String(item?.["政策所属部门"] ?? "").trim())
        .filter((value) => value && looksLikeSingleDept(value))
    ),
  ].sort((a, b) => a.localeCompare(b, "zh-CN"));

  return ["全部部门", ...unique];
};

const refreshDeptOptions = () => {
  const next = collectDeptOptions();
  deptOptions.value = next;
  // 选中的部门若已不在数据里（数据换了），退回"全部部门"
  if (!next.includes(currentDeptFilter.value)) {
    currentDeptFilter.value = "全部部门";
  }
};

const currentDeptFilter = ref("全部部门");
const showDeptMenu = ref(false);

const searchKeyword = ref("");
const quickSearchKeywords = ["金融", "发展扶持", "专精特新", "高新技术", "先进制造"];

const handleQuickSearch = (keyword: string) => {
  searchKeyword.value = keyword;
};

const toggleFilterMenu = () => {
  showFilterMenu.value = !showFilterMenu.value;
  showDeptMenu.value = false;
};

const toggleDeptMenu = () => {
  const willOpen = !showDeptMenu.value;
  showDeptMenu.value = willOpen;
  showFilterMenu.value = false;
  // 打开时才现算部门清单（数据是异步加载的、且没有响应式依赖）
  if (willOpen) refreshDeptOptions();
};

const selectFilter = (opt: PolicyListFilterOption) => {
  currentFilterOption.value = opt;
  showFilterMenu.value = false;
};

const selectDeptFilter = (dept: string) => {
  currentDeptFilter.value = dept;
  showDeptMenu.value = false;
};

// 点击外部关闭下拉菜单
const closeMenus = () => {
  if (showFilterMenu.value) showFilterMenu.value = false;
  if (showDeptMenu.value) showDeptMenu.value = false;
};

onMounted(() => {
  document.addEventListener("click", closeMenus);
});

onBeforeUnmount(() => {
  document.removeEventListener("click", closeMenus);
});

// 卡片区「更多」→ 政策列表侧边栏：只列本条回答里出现的政策，数据源同 syncPolicies
const cardListItems = ref<PolicyItem[]>([]);

/** 重建列表：取本条回答的卡片 → 与政策库合并补全 → 规范化 → 去重（首见优先）→ 按匹配分排序 */
const rebuildCardList = () => {
  const raw = props.policyData?.length
    ? props.policyData
    : parsePolicyTableContent(props.policyContent);
  const normalized = (raw || []).map(mergeWithPublicPolicies).map(normalizePolicy);
  cardListItems.value = sortPolicyCardsByMatchScore(
    dedupePolicyItems(normalized, buildPolicyCardDedupKey)
  );
};

const cardListFiltered = computed(() =>
  cardListItems.value.filter((item) => matchesPolicyCardKeyword(item, searchKeyword.value))
);
const cardListTotal = computed(() => cardListFiltered.value.length);
const cardListPaginated = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return cardListFiltered.value.slice(start, start + itemsPerPage);
});

const filteredPolicies = computed(() => {
  if (props.recordMode) {
    return listPolicyItems.value;
  }

  return listPolicyItems.value.filter(p => {
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase();
      const matchTitle = p.title && p.title.toLowerCase().includes(keyword);
      const matchDesc = p.desc && p.desc.toLowerCase().includes(keyword);
      const matchItem = p.declaration_item && p.declaration_item.toLowerCase().includes(keyword);
      if (!matchTitle && !matchDesc && !matchItem) {
        return false;
      }
    }

    if (currentFilterOption.value === "只看免申即享" && p.tag !== "免申即享") {
      return false;
    } else if (currentFilterOption.value === "非免申即享" && p.tag === "免申即享") {
      return false;
    }

    if (currentDeptFilter.value !== "全部部门" && p.source !== currentDeptFilter.value) {
      return false;
    }

    return true;
  });
});

watch([currentFilterOption, currentDeptFilter, searchKeyword], () => {
  if (currentPage.value === 1) {
    fetchPolicyList();
    return;
  }

  currentPage.value = 1;
});

watch(currentPage, () => {
  fetchPolicyList();
});

const totalPages = computed(() => {
  if (panelMode.value === "cardList") {
    return Math.ceil(cardListTotal.value / itemsPerPage);
  }
  const total = props.recordMode ? policyListTotal.value : filteredPolicies.value.length;
  return Math.ceil(total / itemsPerPage);
});

const paginatedPolicies = computed(() => {
  // 两种列表模式互斥（由 panelMode 单一开关），共用 currentPage/itemsPerPage 安全
  if (panelMode.value === "cardList") {
    return cardListPaginated.value;
  }
  if (props.recordMode) {
    return filteredPolicies.value;
  }

  const start = (currentPage.value - 1) * itemsPerPage;
  return filteredPolicies.value.slice(start, start + itemsPerPage);
});

const changePage = (page: number) => {
  if (page < 1 || page > totalPages.value) return;
  currentPage.value = page;

  // 切换分页时滚动回顶部
  if (listBodyRef.value) {
    listBodyRef.value.scrollTop = 0;
  }
};

const visiblePages = computed(() => {
  const total = totalPages.value;
  const current = currentPage.value;
  const delta = 2;
  const range = [];
  const rangeWithDots = [];
  let l;

  range.push(1);
  for (let i = current - delta; i <= current + delta; i++) {
    if (i < total && i > 1) {
      range.push(i);
    }
  }
  if (total > 1) {
    range.push(total);
  }

  for (let i of range) {
    if (l) {
      if (i - l === 2) {
        rangeWithDots.push(l + 1);
      } else if (i - l !== 1) {
        rangeWithDots.push('...');
      }
    }
    rangeWithDots.push(i);
    l = i;
  }

  return rangeWithDots;
});

/**
 * 是否为精简数据格式（仅含 match_degree / match_reason / match_score / id）
 * —— 来自新版 chat 接口的 POLICY_TABLE 块
 */
const isMinimalFormat = (item: RawPolicyItem): boolean => {
  return (
    !item.name &&
    !item.title &&
    !item.declaration_item &&
    (item.match_degree || item.match_reason)
  );
};

const parsePolicyDetails = (item: RawPolicyItem) => {
  const details = item?.['详情'];
  if (!details) return {};
  if (typeof details === 'object') return details;

  try {
    return JSON.parse(details);
  } catch (error) {
    return {};
  }
};

const stripPolicyIdText = (value: unknown) => {
  if (typeof value !== 'string') {
    return value;
  }

  return value
    .replace(/政策ID\s*:\s*[0-9a-fA-F-]+/gi, '')
    .replace(/\s{2,}/g, ' ')
    .trim();
};

const normalizePolicy = (item: RawPolicyItem): PolicyItem => {
  const minimal = isMinimalFormat(item);
  const suggestedConditions = item.data?.["梳理后建议申报条件"] || item?.['申报条件'] || item.data?.["申报条件"] || [];
  const policyDetails = parsePolicyDetails(item);

  // 处理申报条件：兼容 JSON 字符串、数组、普通字符串三种格式
  let processedConditions = suggestedConditions || [];
  if (typeof suggestedConditions === 'string') {
    try {
      const parsed = JSON.parse(suggestedConditions.replace(/'/g, '"'));
      if (Array.isArray(parsed)) {
        processedConditions = parsed;
      } else {
        processedConditions = suggestedConditions;
      }
    } catch (e) {
      processedConditions = suggestedConditions;
    }
  }

  processedConditions = Array.isArray(processedConditions) ? processedConditions.join("；\n") : processedConditions;

  return {
    title: stripPolicyIdText(
      item.name ||
      item.title || item?.['政策名称'] ||
      (minimal
        ? `${formatMatchDegree(item.match_degree)} · ${(item.id || "").slice(0, 8)}`
        : "暂无政策名称")
    ),
    desc: stripPolicyIdText(item.desc || (minimal ? item.match_reason || "" : "")),
    declaration_item: stripPolicyIdText(
      item.declaration_item ||
      item.originalData?.declaration_item || item?.['申报事项'] ||
      // v2 数据的字段名（一个政策下多个申报事项，这两列实测 170 条全一致）
      item?.['部门上报事项'] || item?.['大模型拆解申报事项'] ||
      (minimal ? "查看政策详情" : "暂无申报项")
    ),
    support_objects: stripPolicyIdText(
      item.data?.["支持对象"] || item?.['支持对象'] || item.support_objects || (minimal ? "" : "暂无数据")
    ),
    support_measures: stripPolicyIdText(
      item.data?.["支持方式和标准"] || item?.['支持方式和标准'] || item.support_measures || (minimal ? "" : "暂无数据")
    ),
    apply_conditions: stripPolicyIdText(processedConditions) ||
      item.apply_conditions ||
      (minimal ? "" : "暂无数据"),
    match_reason: stripPolicyIdText(item.match_reason || "暂无匹配理由"),
    tag:
      (item.auto_granted || !!item?.['是否免申即享'])
        ? "免申即享"
        : item.tag || (minimal ? item.match_degree || "" : ""),
    source: stripPolicyIdText(
      item.department || item?.['部门'] || item.source ||
      // v2 数据的部门字段名（取值形如「区经委」，与筛选列表口径一致）
      item?.['政策所属部门'] || ""
    ),
    match_score: Number(item.match_score || 0),
    match_degree: item.match_degree || "",
    enterprise_benefit: stripPolicyIdText(
      item.enterprise_benefit ||
      item?.['企业收益'] ||
      item.metadata?.['企业收益'] ||
      policyDetails?.['企业收益'] ||
      ""
    ),
    apply_materials: stripPolicyIdText(
      item.data?.["申报材料"] || item?.['申报材料'] || item.apply_materials || (minimal ? "" : "暂无数据")
    ),
    attachments: stripPolicyIdText(item.data?.["相关附件"] || item?.['相关附件'] || item.attachments || ""),
    isRecommended: ["高", "中"].includes(item.match_degree),
    date:
      item.date || item?.declaration_end_time || item?.['结束时间'] ||
        (item.declaration_start_time && item.declaration_end_time)
        ? `${item.declaration_start_time || item?.['开始时间'] || ""} 至 ${item.declaration_end_time || item?.['结束时间'] || ""}`
        : "",
    // v2 数据的日期字段是「开始时间 / 结束时间」（结束时间可能是"未标明"这类文本）
    end_date: item.declaration_end_time || item.date || item?.['申报结束时间'] || item?.['结束时间'] || "",
    apply_link:
      item.apply_link ||
      item?.['政策原文地址'] ||
      item.data?.['政策原文地址'] ||
      // 库里 apply_link 全空，用「市级政策id」拼政策详情页地址
      buildPolicyDetailUrl(item) ||
      "",
    originalData: item,
  };
};

/**
 * chat 增量政策数据与预下载的完整列表（globalThis.policiesPublic）合并：
 * 以完整列表中的条目为基础，chat 返回的字段（匹配度等）覆盖其上。
 */
const mergeWithPublicPolicies = (item: RawPolicyItem): RawPolicyItem => {
  const fullList = globalThis.policiesPublic;
  if (!fullList || !Array.isArray(fullList)) return item;

  const id = item.id || item.policy_id;
  if (!id) return item;

  const fullEntry = fullList.find(
    (entry: any) => entry.id === id || entry.policy_id === id
  );
  if (!fullEntry) return item;

  return { ...fullEntry, ...item };
};

const listPolicyItems = computed(() => {
  return props.recordMode ? policyListItems.value : policies.value;
});


/* 惠企政策库：policies_public.v2.json 里的政策（由 index.html 预加载到 globalThis.policiesPublic）。
 * 判定优先用接口下发的 is_policy_library 字段，缺失时回退到"标题能在库里找到"。 */

/**
 * ⚠️ 这里是**函数**不是 computed，是刻意的。
 *
 * `globalThis.policiesPublic` 由 `ensurePolicyLibrary` 异步加载（失败时退到本地兜底），
 * 且应用**不等待**它——不是响应式依赖。写成 computed 会把首次读到的值
 * （很可能是空数组）缓存住，加载完成后也不会更新。
 * 所以每次调用时现读。
 */
const getLibraryPolicies = (): RawPolicyItem[] =>
  Array.isArray(globalThis.policiesPublic) ? globalThis.policiesPublic : [];

const getLibraryNameSet = (): Set<string> => buildLibraryNameSet(getLibraryPolicies());

/** 本轮卡片里匹配到的惠企政策名（用于在政策库列表里置顶） */
const matchedLibraryNames = computed(() =>
  collectMatchedLibraryNames(policies.value, getLibraryNameSet())
);

/** 当前详情页正在看的政策是否惠企政策——决定是否显示"返回政策列表" */
const selectedIsPolicyLibrary = computed(() =>
  isPolicyLibraryItem(selectedPolicyItem.value, getLibraryNameSet())
);

/** 构建惠企政策库列表：本轮匹配到的置顶，其余保持库内原顺序 */
const buildLibraryPolicyList = () => {
  const keyword = searchKeyword.value.trim().toLowerCase();
  const dept = currentDeptFilter.value === "全部部门" ? "" : currentDeptFilter.value;
  const matched = matchedLibraryNames.value;

  const filtered = getLibraryPolicies().map(normalizePolicy).filter((item) => {
    // 与卡片列表保持同一套筛选逻辑
    if (dept && String(item.source || "") !== dept) {
      return false;
    }
    const autoGranted = !!item.originalData?.auto_granted;
    if (currentFilterOption.value === "只看免申即享" && !autoGranted) return false;
    if (currentFilterOption.value === "非免申即享" && autoGranted) return false;
    if (keyword) {
      const haystack = [item.title, item.declaration_item, item.source, item.desc]
        .join(" ")
        .toLowerCase();
      if (!haystack.includes(keyword)) return false;
    }
    return true;
  });

  const ordered = pinMatchedFirst(filtered, matched, (item) => item.title);
  const start = (currentPage.value - 1) * itemsPerPage;
  policyListItems.value = ordered.slice(start, start + itemsPerPage);
  policyListTotal.value = ordered.length;
};

const buildRecordPolicyList = () => {
  const keyword = searchKeyword.value.trim().toLowerCase();
  const dept = currentDeptFilter.value === "全部部门" ? "" : currentDeptFilter.value;

  const filtered = policies.value.filter((item) => {
    // 部门按字面完全相等比较
    if (dept && String(item.source || "") !== dept) {
      return false;
    }
    const autoGranted = !!item.originalData?.auto_granted;
    if (currentFilterOption.value === "只看免申即享" && !autoGranted) return false;
    if (currentFilterOption.value === "非免申即享" && autoGranted) return false;
    if (keyword) {
      const haystack = [
        item.title,
        item.desc,
        item.declaration_item,
        item.match_reason,
        item.source,
        item.enterprise_benefit,
      ]
        .join(" ")
        .toLowerCase();
      if (!haystack.includes(keyword)) return false;
    }
    return true;
  });

  const start = (currentPage.value - 1) * itemsPerPage;
  policyListItems.value = filtered.slice(start, start + itemsPerPage);
  policyListTotal.value = filtered.length;
};


const syncPolicies = () => {
  const raw = props.policyData?.length
    ? props.policyData
    : parsePolicyTableContent(props.policyContent);
  const merged = (raw || []).map(mergeWithPublicPolicies);
  policies.value = merged.map(normalizePolicy);
  currentPage.value = 1; // 重置页码
  selectedPolicyOverride.value = null;

  // 换了一批卡片后让“更多”列表重建
  if (props.recordMode) {
    if (panelVisible.value && panelMode.value === "list") {
      buildRecordPolicyList();
    }
  }
  // 「政策列表」侧边栏开着时，流式新增的卡片也同步进去
  if (panelVisible.value && panelMode.value === "cardList") {
    rebuildCardList();
  }
};

/**
 * 刷新「政策事项列表」：主来源是惠企政策库，库还没加载完时退回本会话卡片（避免列表空白）。
 */
const fetchPolicyList = async () => {
  if (!props.recordMode || !panelVisible.value || panelMode.value !== "list") return;

  if (getLibraryPolicies().length) {
    buildLibraryPolicyList();
    return;
  }

  buildRecordPolicyList();
};

const panelData = computed(() => {
  return [...policies.value]
    .sort((a, b) => b.match_score - a.match_score)
    .slice(0, 6)
    .map((item) => ({
      // 卡片区标题用「政策名」：declaration_item 表示具体申报事项，优先取它会改掉卡片区观感
      title: item.title || item.originalData?.declaration_item || item.declaration_item,
      desc: item.desc || item.match_reason || "",
      match_score: item.match_score,
      match_degree: item.match_degree,
      enterprise_benefit: item.enterprise_benefit,
      // 来源标识（惠企政策库）
      is_policy_library: item.originalData?.is_policy_library === true,
      originalData: item.originalData,
    }));
});

const showSummary = computed(() => {
  return props.visible && policies.value.length > 0;
});

const selectedPolicyItem = computed(() => {
  return selectedPolicyOverride.value || policies.value[selectedPolicy.value] || null;
});

/**
 * /api/chat 协议独有、随 POLICY_TABLE 一起传入的附加数据（由 normalizePolicy 留在 originalData 里），
 * 仅记录模式（对话内）展示。
 */
const selectedConditions = computed<any[]>(() => {
  const list = selectedPolicyItem.value?.originalData?.conditions;
  return Array.isArray(list) ? list : [];
});

const selectedMatchBasis = computed<any[]>(() => {
  const list = selectedPolicyItem.value?.originalData?.match_basis;
  return Array.isArray(list) ? list : [];
});

// conditions.status 是中文，复用面板已有的匹配等级配色
const getConditionLevelClass = (status?: string) => {
  if (status === '满足') return 'match-high';
  if (status === '不满足') return 'match-low';
  if (status === '待确认') return 'match-medium';
  return 'match-default';
};

// match_basis.status 是英文（supports / conflicts / unknown）
const getBasisLevelClass = (status?: string) => {
  if (status === 'supports') return 'match-high';
  if (status === 'conflicts') return 'match-low';
  if (status === 'unknown') return 'match-medium';
  return 'match-default';
};

const formatBasisStatus = (status?: string) => {
  if (status === 'supports') return '有相关依据';
  if (status === 'conflicts') return '存在冲突';
  if (status === 'unknown') return '无法判断';
  return status || '无法判断';
};

const getMatchProgress = (degree: string) => {
  if (degree === '高' || degree === '高匹配') return 0.8;
  if (degree === '中' || degree === '中匹配') return 0.5;
  if (degree === '低' || degree === '低匹配') return 0.2;
  return 0;
};

const getMatchLevelClass = (degree: string | undefined) => {
  if (degree === '高' || degree === '高匹配') return 'match-high';
  if (degree === '中' || degree === '中匹配') return 'match-medium';
  if (degree === '低' || degree === '低匹配') return 'match-low';
  return 'match-default';
};

const formatMatchDegree = (degree?: string) => {
  if (!degree) return '未匹配';
  return degree.includes('匹配') ? degree : `${degree}匹配`;
};

const parseStringArray = (str: string) => {
  try {
    const parsed = JSON.parse(str.replace(/'/g, '"'));
    if (Array.isArray(parsed)) {
      return parsed;
    }
  } catch (e) {
    /* console.error('Failed to parse array string:', e); */
  }
  // Fallback to basic string split if JSON parse fails
  return str.slice(1, -1).split(',').map(s => s.trim().replace(/^['"]|['"]$/g, ''));
};

const handleResize = () => {
  isWide.value = window.innerWidth > widthLevel;
  isMobileViewer.value = window.innerWidth <= 767;
  emitPanelWidth();
};

const emitPanelWidth = () => {
  const width = panelVisible.value && isWide.value ? (props.recordMode ? 600 : 778) : 0;
  document.dispatchEvent(
    new CustomEvent("policyPanelWidthChange", {
      detail: { width },
    })
  );
};

const openDetail = async (index: number) => {
  selectedPolicyOverride.value = null;
  selectedPolicy.value = index;
  panelMode.value = "detail";
  const openTicket = modalMutex?.requestOpen(policyModalId);
  await nextTick();
  if (modalMutex && openTicket !== undefined && !modalMutex.isCurrentRequest(policyModalId, openTicket)) return;
  panelVisible.value = true;
  emitPanelWidth();
};

const openDetailByItem = async (item: { originalData?: RawPolicyItem; support_objects?: string }) => {
  // 反查下标（唯一命中才采信），详见 policy-match-utils.ts 的 resolvePolicyDetailIndex
  const index = resolvePolicyDetailIndex(policies.value, item);

  if (index >= 0) {
    openDetail(index);
    return;
  }

  selectedPolicyOverride.value = "support_objects" in item ? item as PolicyItem : null;
  selectedPolicy.value = 0;
  panelMode.value = "detail";
  const openTicket = modalMutex?.requestOpen(policyModalId);
  await nextTick();
  if (modalMutex && openTicket !== undefined && !modalMutex.isCurrentRequest(policyModalId, openTicket)) return;
  panelVisible.value = true;
  emitPanelWidth();
};

/**
 * 打开「政策事项列表」（旧列表）。数据来自惠企政策库，本轮匹配到的置顶。
 * 卡片区的「更多 >>」走 openCardList，不走这里。
 */
const openPolicyList = async () => {
  selectedPolicyOverride.value = null;
  panelMode.value = "list";
  // 面板打开即刷新部门清单（库是异步加载的，见 deptOptions 的说明）
  refreshDeptOptions();

  // 每次进入都重置筛选：否则上次的筛选残留会表现为"条目少"或"筛不出东西"
  currentPage.value = 1;
  searchKeyword.value = "";
  currentDeptFilter.value = "全部部门";
  currentFilterOption.value = "所有分类";

  const openTicket = modalMutex?.requestOpen(policyModalId);
  await nextTick();
  if (modalMutex && openTicket !== undefined && !modalMutex.isCurrentRequest(policyModalId, openTicket)) return;
  panelVisible.value = true;
  fetchPolicyList();
  emitPanelWidth();
};

/**
 * 打开「政策列表」侧边栏 —— 卡片区「更多 >>」的入口。
 * 只有搜索框与热门搜索，没有部门/分类筛选。
 *
 * ⚠️ 必须**先切 panelMode 再重置共享状态**：重置会触发 watch → fetchPolicyList，
 * 而它开头有 `panelMode !== "list"` 的守卫，切了模式才能让旧列表逻辑短路，
 * 不污染 policyListItems / policyListTotal。
 */
const openCardList = async () => {
  selectedPolicyOverride.value = null;
  panelMode.value = "cardList";
  refreshDeptOptions();

  currentPage.value = 1;
  searchKeyword.value = "";
  currentDeptFilter.value = "全部部门";
  currentFilterOption.value = "所有分类";
  showFilterMenu.value = false;
  showDeptMenu.value = false;

  rebuildCardList();

  const openTicket = modalMutex?.requestOpen(policyModalId);
  await nextTick();
  if (modalMutex && openTicket !== undefined && !modalMutex.isCurrentRequest(policyModalId, openTicket)) return;
  panelVisible.value = true;
  emitPanelWidth();
};

const closePanel = () => {
  panelVisible.value = false;
  modalMutex?.release(policyModalId);
  emitPanelWidth();
  emit("update:visible", false);
};

onMounted(() => {
  unregisterPolicyModal = modalMutex?.register(policyModalId, {
    close: closePanel,
    isOpen: () => panelVisible.value,
  });
});

defineExpose({ closePanel });

watch(
  () => [props.policyData, props.policyContent],
  () => {
    syncPolicies();
  },
  { immediate: true, deep: true }
);

watch(
  () => props.visible,
  (visible) => {
    if (!visible) {
      panelVisible.value = false;
      emitPanelWidth();
    }
  }
);

onMounted(() => {
  handleResize();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  unregisterPolicyModal?.();
  document.dispatchEvent(
    new CustomEvent("policyPanelWidthChange", {
      detail: { width: 0 },
    })
  );
  window.removeEventListener("resize", handleResize);
});
</script>

<style lang="scss">
.policy-match-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
  max-width: 360px;

  &.record-mode {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

.policy-header {
  font-size: 14px;
  color: #141b2b;
  line-height: 24px;
}

.policy-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.policy-line {
  display: none;
}

.policy-box {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy-item {
  background: #ffffff;
  border: 1px solid rgba(199, 196, 216, 0.3);
  border-radius: 12px;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.policy-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.policy-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(53, 37, 205, 0.05);
  border-radius: 6px;
  padding: 4px 8px;
  color: #3525cd;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

/* 来源标识：惠企政策库。与左侧“企业收益”徽标同形，仅换配色以便一眼区分 */
.policy-source-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: rgba(230, 126, 34, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
  color: #c2410c;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.policy-match-degree {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.policy-match-degree .label {
  font-size: 10px;
  font-weight: 500;
  color: #464555;
  line-height: 1.5;
}

.policy-match-degree .value {
  font-size: 16px;
  font-weight: 700;
  color: #3525cd;
  line-height: 1.5;
  font-family: "Inter", sans-serif;
}

.policy-title {
  color: #141b2b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}

.policy-desc {
  color: #464555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12px;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.policy-item-action {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3525cd;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.policy-item-action:hover {
  background: #2b1ea8;
}

.view-all-btn {
  color: #3525cd;
  text-align: center;
  padding-top: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.policy-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  pointer-events: none;
}

.policy-viewer-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 760px);
  height: 78vh;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
  will-change: transform, opacity;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);

  &.right-fixed {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: 778px;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.16);
  }
}

.policy-panel-enter-active,
.policy-panel-leave-active {
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.policy-panel-enter-from,
.policy-panel-leave-to {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 14px)) scale(0.985);
}

.policy-viewer-content.right-fixed.policy-panel-enter-from,
.policy-viewer-content.right-fixed.policy-panel-leave-to {
  transform: translateX(12px) scale(0.985);
}

.record-theme .policy-viewer-content.right-fixed {
  width: 600px;
  border-left: 1px solid rgba(199, 196, 216, 0.3);
  box-shadow: none;
}

/* \u5339\u914d\u6761\u4ef6\u533a\u57df\u6837\u5f0f */
.condition-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.condition-text-box {
  width: 100%;
  padding: 0 0 0 24px;
  border-left: 1px solid #a1a1a1;
  // border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(70, 69, 85, 0.5);
  white-space: pre-line;
}

.condition-match-card {
  width: 100%;
  border-radius: 12px;
  padding: 20px;
  border-left-width: 4px;
  border-left-style: solid;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

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

.match-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #464555;
}

.match-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12px;
}

.match-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: #141b2b;
}

/* \u9ad8\u5339\u914d\u6837\u5f0f */
.match-high {
  border-left-color: #22c55e;
  border-top: 1px solid rgba(199, 196, 216, 0.5);
  border-right: 1px solid rgba(199, 196, 216, 0.5);
  border-bottom: 1px solid rgba(199, 196, 216, 0.5);
}

.match-high .match-badge {
  background: #dcfce7;
  color: #15803d;
}

.match-high .match-card-title svg {
  color: #16a34a;
}

/* \u4e2d\u5339\u914d\u6837\u5f0f */
.match-medium {
  border-left-color: #eab308;
  border-top: 1px solid rgba(199, 196, 216, 0.5);
  border-right: 1px solid rgba(199, 196, 216, 0.5);
  border-bottom: 1px solid rgba(199, 196, 216, 0.5);
}

.match-medium .match-badge {
  background: #fef9c3;
  color: #a16207;
}

.match-medium .match-card-title svg {
  color: #ca8a04;
}

/* \u4f4e\u5339\u914d\u6837\u5f0f */
.match-low {
  border-left-color: #ef4444;
  border-top: 1px solid rgba(199, 196, 216, 0.5);
  border-right: 1px solid rgba(199, 196, 216, 0.5);
  border-bottom: 1px solid rgba(199, 196, 216, 0.5);
}

.match-low .match-badge {
  background: #fee2e2;
  color: #b91c1c;
}

.match-low .match-card-title svg {
  color: #dc2626;
}

/* \u9ed8\u8ba4\u5339\u914d\u6837\u5f0f */
.match-default {
  border-left-color: #94a3b8;
  border-top: 1px solid rgba(199, 196, 216, 0.5);
  border-right: 1px solid rgba(199, 196, 216, 0.5);
  border-bottom: 1px solid rgba(199, 196, 216, 0.5);
}

.match-default .match-badge {
  background: #f1f5f9;
  color: #475569;
}

.match-default .match-card-title svg {
  color: #64748b;
}

.record-close-btn {
  color: #464555;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;

  &:hover {
    background-color: rgba(195, 192, 255, 0.1);
  }
}

.policy-viewer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 28px;
  background-color: #3cb4be;
  background-image: url("../../assets/header-bg.png");
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
  position: relative;
}

.policy-viewer-header-record {
  justify-content: flex-end;
  padding: 32px 40px 0 40px;
  background-color: #ffffff;
  background-image: none;
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.record-theme .header-title {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-back,
.header-close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-close-record {
  background: rgba(79, 70, 229, 0.1);
  padding: 8px 16px;
  border-radius: 9999px;
  color: #4f46e5;
  font-size: 14px;
  font-weight: 500;
  gap: 4px;
}

.panel-scroll {
  overflow: hidden;
  min-height: 0;
  scrollbar-width: auto;
}

.list-mode-bg {
  background: #f6f6f6;
}

.record-theme .list-mode-bg {
  background: #ffffff;
}

.list-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f6f6f6;
  overflow: hidden;
}

.record-theme .list-body {
  background: #ffffff;
}

.list-content {
  margin: 19px 25px 25px;
  padding: 0 19px;
  background: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.record-theme .list-content {
  margin: 0;
  padding: 0 40px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
}

.list-items-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-right: -8px;
  scrollbar-width: auto;
}

.record-theme .list-item-wrapper {
  background: #ffffff;
  border: 1px solid #e9edff;
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.2s;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

.record-theme .list-item-content {
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.record-theme .record-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.record-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record-item-tag {
  background: #e2dfff;
  color: #3323cc;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}

.record-item-date {
  color: #464555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.record-theme .list-item-title {
  font-size: 22px;
  font-weight: 500;
  color: #141b2b;
  line-height: 1.3;
  letter-spacing: -0.24px;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-item-source {
  color: #464555;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.record-item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 98px;
  flex-shrink: 0;
  gap: 8px;
}

.record-match-box {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-match-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.record-match-text {
  color: #3525cd;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  z-index: 1;
}

.record-match-meta {
  color: #464555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 3px;
  margin-bottom: 12px;
}

.record-detail-btn {
  background: transparent;
  color: #3525cd;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #3525cd;
  border-radius: 8px;
  padding: 8px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.record-detail-btn:hover {
  background: rgba(53, 37, 205, 0.05);
}

.record-theme .list-item-source {
  color: #777587;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.6px;
}

.record-theme .list-item-date {
  display: none;
}

.record-list-header {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.record-list-title {
  color: #141b2b;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.64px;
}

.record-list-subtitle {
  color: #464555;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.search-filter-bar {
  background: #ffffff;
  border: 1px solid #e9edff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

.search-filter-top {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 49.19px;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: #f9f9ff;
  border: 1px solid #c7c4d8;
  border-radius: 8px;
  padding: 0 16px 0 48px;
}

.search-icon {
  position: absolute;
  left: 16px;
}

.search-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: #141b2b;
  font-size: 14px;
  font-weight: 500;
}

.search-input::placeholder {
  color: #6b7280;
}

.filter-selects {
  display: flex;
  gap: 16px;
  height: 100%;
}

.filter-select-wrapper {
  position: relative;
  height: 100%;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9f9ff;
  border: 1px solid #c7c4d8;
  border-radius: 8px;
  padding: 0 9px 0 16px;
  color: #141b2b;
  font-size: 14px;
  font-weight: 500;
  width: 150px;
  height: 100%;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.filter-option:hover {
  background: #f0f0f5;
}

.filter-option svg {
  transition: transform 0.2s ease;
}

.filter-option.is-open svg {
  transform: rotate(180deg);
}

.filter-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 150px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 10.5px rgba(0, 0, 0, 0.12);
  padding: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-popover-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 40px;
  padding: 6px 16px;
  background: #fafbff;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12px;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-popover-item:hover {
  background: #f0f4ff;
}

.filter-popover-item.active {
  color: #4f46e5;
  font-weight: 700;
}

.popover-fade-enter-active,
.popover-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.popover-fade-enter-from,
.popover-fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

.dept-popover {
  width: 158px;
  max-height: 300px;
  overflow-y: auto;
  left: auto;
  right: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.dept-popover::-webkit-scrollbar {
  width: 4px;
}

.dept-popover::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.dept-popover::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.dept-popover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4f46e5;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  height: 100%;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.is-open {
  background: #291bac;
}

.quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip-label {
  color: #464555;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
}

.chip {
  background: #e1e8fd;
  color: #141b2b;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
  cursor: pointer;
}

.detail-body {
  scrollbar-width: auto;
  scrollbar-color: transparent transparent;
}

.detail-body:hover {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.list-item-wrapper {
  background: #ffffff;
  border-bottom: 2px solid #e4e4e4;
  cursor: pointer;
  transition: transform 0.2s;
  padding: 19px 6px;
}

.list-item-wrapper:active {
  transform: scale(0.98);
}

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;

  .list-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
}

.list-item-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(90deg, #3cd4e0, #2da4ae);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  width: max-content;
}

.tag-icon {
  margin-right: 2px;
}

.list-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-item-source {
  font-size: 14px;
  color: #505050;
  line-height: 1.5;
}

.list-item-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #505050;
  margin-top: 6px;
}

.date-icon {
  flex-shrink: 0;
  transform: scale(0.85);
}

.list-item-recommend {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 10px;
  background: #ffffff;
  color: #3cb4be;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.detail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 32px 20px 32px;
  background: #ffffff;
}

.record-detail-body {
  padding: 32px 40px 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 773px;
}

.record-header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-bottom: 32px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  padding-top: 8px;
}

.detail-body-record {
  overflow-y: auto;
  overflow-x: hidden;
  user-select: text;
}

.record-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #3525cd;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.12px;
  line-height: 1.4;
}

.record-main-title {
  color: #141b2b;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.64px;
}

.mobile-record-meta-info {
  display: none;
}

.record-meta-info {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 8px;
  /* 拉满整行：与下方卡片（.detail-body-grid，整行宽）右边缘对齐 */
  width: 100%;
}

.record-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.record-meta-item.meta-name {
  flex: 1 1 auto;
  min-width: 0;
}

.record-meta-item.meta-no {
  /* 可伸展宽度，下限 110px（部门写全称时才不会被挤成三行） */
  flex: 0 1 340px;
  min-width: 110px;
}

.meta-label {
  color: #777587;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 1.4;
  padding-bottom: 0.8px;
}

.meta-value {
  color: #141b2b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.record-meta-divider {
  width: 1px;
  height: 40px;
  background: rgba(199, 196, 216, 0.5);
}

.detail-body-grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.detail-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-title {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.detail-subtitle {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
}

.divider {
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  flex-shrink: 0;
  margin: 24px 0;
}

.record-theme .divider {
  width: 1px;
  height: 40px;
  background: rgba(199, 196, 216, 0.5);
  margin: 0;
}

.detail-section-title {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.detail-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 12px;
}

.record-theme .detail-row {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 23.69px;
  border: 1px solid rgba(199, 196, 216, 0.5);
  border-radius: 12px;
  padding: 24px;
}

.record-theme .detail-body-grid .detail-row {
  margin-bottom: 0;
}

.record-theme .detail-body-grid .row-label {
  font-size: 18px;
}

.record-theme .condition-section {
  border: none;
  padding: 0;
  gap: 23.69px;
}

.record-theme .condition-section .row-label {
  color: #141b2b;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.record-theme .condition-value {
  border: 1px solid rgba(199, 196, 216, 0.5);
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
}

.row-label {
  display: flex;
  align-items: flex-start;
  color: #000000;
  font-size: 18px;
  width: 120px;
  flex-shrink: 0;
  gap: 6px;
}

.record-theme .row-label {
  align-items: center;
  color: #141b2b;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  gap: 8px;
}

.dot-icon {
  width: 24px;
  height: 24px;
  flex: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-text {
  flex-grow: 1;
  line-height: 1.6rem;
}

.record-theme .label-text {
  line-height: 1.5;
}

.dot-inner {
  width: 12px;
  height: 12px;
  border: 1px solid #3cb4be;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-inner::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #3cb4be;
  border-radius: 50%;
}

.row-value,
.detail-footer {
  color: #000000;
  font-size: 18px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.record-theme .row-value {
  color: #464555;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.attachment-item {
  margin-bottom: 6px;
  color: #3cb4be;
  line-height: 1.5;

  a {
    color: #3cb4be;
    text-decoration: underline;
  }
}

.detail-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
}

.footer-desc {
  line-height: 1.5;
}

.record-theme .detail-header {
  display: none;
}

.record-theme .detail-title {
  display: none;
}

.record-theme .detail-subtitle {
  display: none;
}

.record-theme .detail-section-title {
  display: none;
}

.record-theme .dot-icon {
  display: none;
}

.record-theme .detail-footer {
  display: none;
}

.record-theme .footer-title {
  display: none;
}

.record-theme .footer-desc {
  display: none;
}

.policy-fade-enter-active,
.policy-fade-leave-active {
  transition: opacity 0.2s ease;
}

.policy-fade-enter-from,
.policy-fade-leave-to {
  opacity: 0;
}

@media (max-width: 1200px) {
  .policy-match-summary {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .policy-viewer-content,
  .policy-viewer-content.detail-mode-bg,
  .policy-viewer-content.list-mode-bg {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }

  .policy-viewer-header {
    position: absolute;
    top: 27px;
    right: 16px;
    z-index: 4;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
  }

  .policy-viewer-header-record {
    padding: 0;
  }

  .header-actions {
    width: 40px;
    height: 40px;
    justify-content: center;
  }

  .header-close,
  .record-close-btn {
    width: 40px;
    height: 40px;
    color: #464555;
    border-radius: 999px;
  }

  .header-close svg path {
    stroke: currentColor;
  }

  .list-body,
  .record-theme .list-body {
    background: #ffffff;
    overflow-y: auto;
  }

  .list-content,
  .record-theme .list-content {
    margin: 0;
    padding: 32px 16px 0;
    gap: 24px;
    min-height: 100%;
    overflow: visible;
  }

  .record-list-header {
    gap: 7px;
    padding-right: 16px;
  }

  .record-list-title {
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: -0.64px;
  }

  .record-list-subtitle {
    font-size: 16px;
    line-height: 1.6;
  }

  .search-filter-bar {
    padding: 16px;
    gap: 16px;
    border-radius: 12px;
  }

  .search-filter-top,
  .filter-selects {
    height: auto;
    flex-direction: column;
  }

  .search-input-wrapper {
    width: 100%;
    height: 48px;
    flex: none;
    padding: 0 16px 0 48px;
  }

  .filter-selects {
    display: grid;
    grid-template-columns: 1fr 112px;
    gap: 16px;
  }

  .filter-select-wrapper,
  .filter-option,
  .filter-btn {
    width: 100%;
    height: 48px;
  }

  .filter-btn {
    justify-content: center;
    padding: 0 18px;
    background: #3525cd;
  }

  .quick-chips {
    display: none;
  }

  .list-items-container {
    overflow: scroll;
    margin-right: 0;
    gap: 12px;
  }

  .record-theme .list-item-wrapper {
    padding: 16px;
    border: 1px solid #e9edff;
    border-radius: 12px;
    box-shadow: none;
  }

  .record-theme .record-list-item {
    align-items: center;
    gap: 12px;
  }

  .record-item-top {
    gap: 12px;
  }

  .record-theme .list-item-title {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.24px;
    -webkit-line-clamp: 3;
  }

  .record-item-source {
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .record-item-actions {
    width: 98.48px;
  }

  .pagination-container {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }

  .page-btn {
    width: 100%;
  }

  .detail-body,
  .detail-body-record {
    width: 100%;
    padding: 32px 16px 64px;
    gap: 32px;
    background: #ffffff;
  }

  .record-header-section {
    position: relative;
    top: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    gap: 12px;
  }

  .record-main-title {
    font-size: 24px;
    line-height: 1.3333333;
    letter-spacing: -0.64px;
  }

  .record-meta-info {
    display: none;
  }

  .mobile-record-meta-info {
    display: flex;

    .mobile-record-meta-item {
      display: flex;
      gap: 32px;
      width: 100%;
      min-height: 48px;

      .meta-value {
        font-family: "HarmonyOS Sans SC", sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #777587;
        line-height: 1.6;
        padding-top: 3px;
        width: 100%;
      }
    }
  }

  .detail-body-grid {
    flex-direction: column;
    gap: 16px;
  }

  .detail-row.card-style,
  .record-theme .detail-row,
  .record-theme .condition-value {
    padding: 12px;
    border: 1px solid rgba(199, 196, 216, 0.3);
    border-radius: 12px;
  }

  .record-condition-title,
  .record-theme .condition-section .row-label {
    font-size: 16px;
  }
}

.detail-row.card-style {
  background: transparent;
  border: 1px solid rgba(199, 196, 216, 0.3);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  box-sizing: border-box;
}

.record-condition-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #141b2b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;

  svg {
    color: rgb(53, 37, 205);
  }
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 0 24px;
  width: 100%;
}

.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #c7c4d8;
  color: #464555;
  font-family: Inter, sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn.active {
  background: #3525cd;
  color: #ffffff;
  border-color: #3525cd;
}

.page-btn:hover:not(.active):not(:disabled) {
  background: rgba(195, 192, 255, 0.1);
  border-color: #3525cd;
  color: #3525cd;
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #464555;
  font-family: Inter, sans-serif;
  font-size: 16px;
}

@media (max-width: 767px) {

  .detail-row.card-style,
  .record-theme .detail-row,
  .record-theme .condition-value {
    padding: 12px;
    border: 1px solid rgba(199, 196, 216, 0.3);
    border-radius: 12px;
  }

  .record-theme .detail-body-grid .detail-row {
    margin-bottom: 0;
  }

  .record-theme .detail-body-grid .row-label,
  .record-condition-title,
  .record-theme .condition-section .row-label {
    font-size: 16px;
  }
}

.policy-link {
  color: #3525cd;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.policy-link:hover {
  color: #2b1ea8;
}
</style>