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="openPolicyList">更多 >></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 === 'list' ? 'list-mode-bg' : 'detail-mode-bg'
          ]">
          <div class="policy-viewer-header" :class="{ 'policy-viewer-header-record': recordMode }">
            <div class="header-title" v-if="!recordMode && !(isMobileViewer && panelMode === 'detail')">
              {{ panelMode === "list" ? "智能政策匹配" : "智能政策匹配" }}
            </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>

          <div v-if="panelMode === 'list'" 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">政策事项列表</div>
                <div class="record-list-subtitle">浏览、搜索及筛选最新的惠企政策</div>
              </div>

              <div class="search-filter-bar" v-if="recordMode && isZhaoshangLLM">
                <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" @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>

            <!-- [已移除] 原文引用板块（数据来自 /api/chat 的 item.citations）——按用户要求去掉 -->
            <!--
            <div v-if="recordMode && selectedCitations.length" class="detail-row card-style">
              <div class="record-condition-title">
                <span>原文引用</span>
              </div>
              <div class="condition-content-wrapper">
                <div v-for="(citation, index) in selectedCitations" :key="`citation-${index}`"
                  class="condition-text-box">
                  {{ citation?.quote }}
                </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 {
  buildPolicyListSearchParams,
  buildPolicyListUrl,
  extractPolicyListResponse,
  getLocalPolicyListResponse,
  resolvePolicyDetailIndex,
  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 policyListLoading = ref(false);
const panelVisible = ref(false);
const policyModalId = Symbol("policy-viewer");
const modalMutex = inject(MODAL_MUTEX_KEY, null);
let unregisterPolicyModal: (() => void) | undefined;
const panelMode = ref<"list" | "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);

// 兜底部门列表（仅在拿不到卡片数据时使用）
const DEFAULT_DEPTS = [
  "区发改委",
  "区经委",
  "区商务委",
  "区科委",
  "区市场监管局",
  "区人社局",
  "区文旅局",
  "区农业农村委",
  "区体育局",
  "区人才局",
  "区财政局",
  "区教育局",
  "区卫健委",
  "区民政局",
  "区退役军人事务局"
];

/**
 * 部门筛选项。
 * 对话内（记录模式）用卡片数据里真实出现的部门，
 * 否则原来那 15 个硬编码部门大多筛不到内容，且弹出层过高会被面板裁切。
 */
// 部门筛选项：固定为最初的那 15 个部门
const deptOptions = computed(() => ["全部部门", ...DEFAULT_DEPTS]);

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 = () => {
  showDeptMenu.value = !showDeptMenu.value;
  showFilterMenu.value = false;
};

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);
});

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(() => {
  const total = props.recordMode ? policyListTotal.value : filteredPolicies.value.length;
  return Math.ceil(total / itemsPerPage);
});

const paginatedPolicies = computed(() => {
  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 {
      // 尝试解析JSON字符串
      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?.['申报事项'] ||
      (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 || ""),
    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.declaration_start_time && item.declaration_end_time) ? `${item.declaration_start_time || ""} 至 ${item.declaration_end_time || ""}` : "",
    end_date: item.declaration_end_time || item.date || item?.['申报结束时间'] || "",
    apply_link:
      item.apply_link ||
      item?.['政策原文地址'] ||
      item.data?.['政策原文地址'] ||
      // 库里 apply_link 全空，用「市级政策id」拼政策详情页地址（261/262 条有该 id）
      buildPolicyDetailUrl(item) ||
      "",
    originalData: item,
  };
};

/**
 * 将 chat 接口返回的增量政策数据与预下载的完整政策列表合并。
 * 完整列表从 globalThis.policiesPublic 读取（仅在 zhaoshang 等模式下可用）。
 * 合并策略：以完整列表中的条目为基础，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;

  // 完整条目为基础，chat 返回的增量字段覆盖其上
  return { ...fullEntry, ...item };
};

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


/**
 * 对话内（记录模式）的“更多”列表直接复用卡片数据：
 * 顺序与卡片完全一致（不再另行拉取与卡片无关的公共政策库），
 * 部门筛选也一定能筛到内容。
 */
/* ──────────────────────────────────────────────────────────────────────────
 * 惠企政策库相关
 *
 * 惠企政策 = policies_public.v1.json 里的那些政策（262 条申报事项 / 38 个政策，
 * 由 index.html 预加载到 globalThis.policiesPublic）。
 * 判定优先用接口下发的 is_policy_library 字段，缺失时回退到"标题能在库里找到"。
 * ────────────────────────────────────────────────────────────────────────── */

/**
 * ⚠️ 这里是**函数**不是 computed，是刻意的。
 *
 * `globalThis.policiesPublic` 由 index.html 异步 fetch 加载（失败时退到本地兜底），
 * 且应用**不等待**它——不是响应式依赖。写成 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())
);

/**
 * 构建惠企政策库列表（从 policies_public.v1.json）。
 * 本轮匹配到的惠企政策置顶，其余保持库内原顺序。
 */
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();
    }
  }
};

let policyListRequestId = 0;

const fetchPolicyList = async () => {
  if (!props.recordMode || !panelVisible.value || panelMode.value !== "list") return;

  // 政策事项列表统一来自惠企政策库（policies_public.v1.json）
  if (getLibraryPolicies().length) {
    buildLibraryPolicyList();
    return;
  }

  // 兜底：库还没加载完时，先列出本轮匹配到的卡片，避免列表空白
  if (policies.value.length) {
    buildRecordPolicyList();
    return;
  }

  const requestId = ++policyListRequestId;
  const sessionId = props.sessionId || globalThis.currentSession || "";
  const query = {
    page: currentPage.value,
    pageSize: itemsPerPage,
    keyword: searchKeyword.value,
    department: currentDeptFilter.value,
    filterOption: currentFilterOption.value,
    sessionId,
  };

  policyListLoading.value = true;

  try {
    const modelServer = (import.meta.env.VITE_MODEL_SERVER || globalThis.modelServer) as string | undefined;

    if (modelServer) {
      const params = buildPolicyListSearchParams(query);
      const url = buildPolicyListUrl(modelServer, params);
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const json = await response.json();
      if (requestId !== policyListRequestId) return;
      const { items, total } = extractPolicyListResponse<RawPolicyItem>(json);
      policyListItems.value = items.map(normalizePolicy);
      policyListTotal.value = total;
    } else {
      if (requestId !== policyListRequestId) return;
      const { items, total } = getLocalPolicyListResponse<RawPolicyItem>(
        globalThis.policiesPublic,
        query
      );
      policyListItems.value = items.map(normalizePolicy);
      policyListTotal.value = total;
    }
  } catch (error) {
    console.error("Failed to load public policy list:", error);
    if (requestId !== policyListRequestId) return;
    policyListItems.value = [];
    policyListTotal.value = 0;
  } finally {
    if (requestId === policyListRequestId) {
      policyListLoading.value = false;
    }
  }
};

const panelData = computed(() => {
  return [...policies.value]
    .sort((a, b) => b.match_score - a.match_score)
    .slice(0, 6)
    .map((item) => ({
      title:
        item.originalData?.declaration_item ||
        item.declaration_item ||
        item.title,
      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 : [];
});

// [已移除] 原文引用板块随模板一并去掉，此计算属性暂留备用
// const selectedCitations = computed<any[]>(() => {
//   const list = selectedPolicyItem.value?.originalData?.citations;
//   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 的说明。
  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();
};

/**
 * 打开「政策事项列表」。
 *
 * 卡片区「更多 >>」与惠企政策详情的「返回政策事项列表」**走同一条路径、同一个列表**——
 * 不因入口不同而内容不同。列表数据统一来自惠企政策库（policies_public.v1.json），
 * 本轮匹配到的惠企政策置顶。
 */
const openPolicyList = async () => {
  selectedPolicyOverride.value = null;
  panelMode.value = "list";

  // 每次进入都重置筛选：部门 / 分类 / 关键词 / 页码
  // 否则上次的筛选会残留，表现为"条目少"或"筛不出东西"
  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();
};

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;
}

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

.record-meta-item.meta-name {
  max-width: 462px;
}

.record-meta-item.meta-no {
  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>