<template>
    <view class="company-detail" :class="{ 'company-detail--desktop': desktopLayout }">
        <!-- Starry Background -->
        <view class="starry-bg">
            <view v-for="star in stars" :key="star.id" class="star" :style="{
                top: star.top,
                left: star.left,
                width: star.size + 'px',
                height: star.size + 'px',
                animationDuration: star.duration + 's',
                animationDelay: star.delay + 's',
            }"></view>
            <view class="glow-top"></view>
            <view class="glow-bottom"></view>
        </view>

        <!-- Header -->
        <view class="detail-header">
            <view class="detail-header-back" @click="handleBack">
                <text class="back-icon">‹</text>
                <text class="back-text">返回</text>
            </view>
            <text class="detail-header-title">商号详解</text>
            <view class="detail-header-favorite" @click="toggleFavorite">
                <text class="favorite-icon" :class="{ 'favorite-icon-active': isFavorited }">{{ isFavorited ? '❤' : '♡'
                    }}</text>
            </view>
        </view>

        <!-- Content -->
        <scroll-view scroll-y class="detail-content" :class="{ 'detail-content--desktop': desktopLayout }">
            <view class="detail-content-inner" :class="{ 'detail-content-inner--desktop': desktopLayout }">
                <!-- 1. 总分卡片 -->
                <view class="score-card" @click="openModal('zonghe')">
                    <view class="score-corner score-corner-tl"></view>
                    <view class="score-corner score-corner-tr"></view>
                    <view class="score-corner score-corner-bl"></view>
                    <view class="score-corner score-corner-br"></view>

                    <view class="score-label">TOTAL SCORE</view>
                    <view class="score-value-wrap">
                        <text class="score-value">{{ detailData.total_score }}</text>
                        <view class="score-ring"></view>
                    </view>

                    <view class="score-stars">
                        <text v-for="i in 5" :key="i" class="score-star"
                            :class="{ active: i <= detailData.star_rating }">★</text>
                    </view>

                    <view class="score-divider"></view>

                    <text class="score-name">{{ detailData.name }}</text>
                    <text class="score-pinyin">{{ detailData.pinyin }}</text>

                    <view v-if="zongheContent" class="master-comment">
                        <text class="master-rating">{{ zongheContent.rating }}</text>
                        <text class="master-summary-preview">{{ truncateText(zongheContent.summary, 50) }}</text>
                        <text class="click-hint">点击查看详解 ›</text>
                    </view>
                </view>

                <!-- 2. 品牌意象解析 -->
                <view v-if="pinpaiSection" class="section" @click="openModal('pinpai')">
                    <view class="section-title">
                        <text class="section-icon">🏢</text>
                        <text class="section-text">{{ pinpaiSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="meaning-card">
                        <view class="meaning-quote">❝</view>
                        <text class="meaning-label">商业寓意</text>
                        <text class="meaning-text">{{ detailData.name_meaning }}</text>
                        <view class="meaning-judge">
                            <text class="meaning-judge-label">判断：</text>
                            <text class="meaning-judge-text">{{ pinpaiSection.summary_data.judgment }}</text>
                        </view>
                    </view>
                </view>

                <!-- 3. 商业数理吉凶 -->
                <view v-if="shuliSection" class="section" @click="openModal('shuli')">
                    <view class="section-title">
                        <text class="section-icon">#</text>
                        <text class="section-text">{{ shuliSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="math-card">
                        <view class="math-header">
                            <view class="math-info">
                                <text class="math-label">总格 (81数理)</text>
                                <text class="math-value">{{ shuliSection.summary_data.number }} ({{
                                    shuliSection.summary_data.luck }})</text>
                            </view>
                            <text class="math-badge">{{ shuliSection.summary_data.luck_name }}</text>
                        </view>
                    </view>
                </view>

                <!-- 4. 市场潜力评估 -->
                <view v-if="shichangSection" class="section section--desktop-wide" @click="openModal('shichang')">
                    <view class="section-title">
                        <text class="section-icon">📊</text>
                        <text class="section-text">{{ shichangSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="radar-card">
                        <view class="radar-labels">
                            <view class="radar-label-item">
                                <text class="radar-label-name">传播力</text>
                                <text class="radar-label-value">{{ formatScore(shichangSection.summary_data.scores.comm)
                                }}</text>
                            </view>
                            <view class="radar-label-item">
                                <text class="radar-label-name">契合度</text>
                                <text class="radar-label-value">{{
                                    formatScore(shichangSection.summary_data.scores.compat)
                                }}</text>
                            </view>
                            <view class="radar-label-item">
                                <text class="radar-label-name">财运</text>
                                <text class="radar-label-value">{{
                                    formatScore(shichangSection.summary_data.scores.wealth)
                                }}</text>
                            </view>
                            <view class="radar-label-item">
                                <text class="radar-label-name">领导力</text>
                                <text class="radar-label-value">{{ formatScore(shichangSection.summary_data.scores.lead)
                                }}</text>
                            </view>
                            <view class="radar-label-item">
                                <text class="radar-label-name">凝聚力</text>
                                <text class="radar-label-value">{{
                                    formatScore(shichangSection.summary_data.scores.cohes)
                                }}</text>
                            </view>
                            <view class="radar-label-item">
                                <text class="radar-label-name">创新力</text>
                                <text class="radar-label-value">{{
                                    formatScore(shichangSection.summary_data.scores.innov)
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 5. 商业卦象 -->
                <view v-if="guaxiangSection" class="section" @click="openModal('guaxiang')">
                    <view class="section-title">
                        <text class="section-icon">☯</text>
                        <text class="section-text">{{ guaxiangSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="gua-card">
                        <view class="gua-bg-text">{{ getGuaChar(guaxiangSection.summary_data.gua) }}</view>
                        <view class="gua-content">
                            <view class="gua-header">
                                <text class="gua-name">{{ guaxiangSection.summary_data.gua }}</text>
                                <text class="gua-badge">{{ guaxiangSection.summary_data.gua_type }}</text>
                            </view>
                            <text class="gua-desc">{{ guaxiangSection.summary_data.text }}</text>
                        </view>
                    </view>
                </view>

                <!-- 5b–5g. 与公司测名 JSON 扩展模块（与个人测名同字段名：liuyao 等） -->
                <view v-if="hasCompanyLiuyao" class="section" @click="openModal('liuyao')">
                    <view class="section-title">
                        <text class="section-icon">🔮</text>
                        <text class="section-text">六爻</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="meaning-card company-extra-card">
                        <view class="meaning-quote">❝</view>
                        <text v-if="toText(companyLiuyao?.hexagram_title)" class="modal-text company-extra-strong">{{
                            companyLiuyao?.hexagram_title }}</text>
                        <text v-if="toText(companyLiuyao?.changing_summary)" class="modal-text">动爻：{{
                            companyLiuyao?.changing_summary }}</text>
                        <text v-if="toText(companyLiuyao?.interpretation)" class="modal-text">{{
                            companyLiuyao?.interpretation }}</text>
                        <text v-for="(yl, yi) in arr(companyLiuyao?.yao_lines).slice(0, 6)" :key="yi" class="modal-text">{{
                            toText(yl) }}</text>
                    </view>
                </view>

                <view v-if="hasCompanyWuxingBagua" class="section" @click="openModal('wuxing_bagua')">
                    <view class="section-title">
                        <text class="section-icon">☰</text>
                        <text class="section-text">五行八卦</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="math-card company-extra-flat">
                        <text v-if="toText(companyWuxingBagua?.wuxing_sketch)" class="modal-text company-extra-strong">五行：{{
                            companyWuxingBagua?.wuxing_sketch }}</text>
                        <text v-if="toText(companyWuxingBagua?.bagua_profile)" class="modal-text">八卦：{{
                            companyWuxingBagua?.bagua_profile }}</text>
                        <text v-if="toText(companyWuxingBagua?.mutual_sketch)" class="modal-text">{{
                            companyWuxingBagua?.mutual_sketch }}</text>
                        <text v-if="toText(companyWuxingBagua?.summary)" class="modal-text">{{ companyWuxingBagua?.summary
                        }}</text>
                    </view>
                </view>

                <view v-if="hasCompanyZodiacSign" class="section" @click="openModal('zodiac_sign')">
                    <view class="section-title">
                        <text class="section-icon">🐲</text>
                        <text class="section-text">属相</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="founder-card company-extra-card">
                        <view class="founder-header">
                            <view class="founder-avatar">
                                <text class="founder-avatar-text">{{ toText(companyZodiacSign?.animal_icon) ||
                                    toText(companyZodiacSign?.animal).slice(0, 1) || '属' }}</text>
                            </view>
                            <view class="founder-info">
                                <text class="founder-title">属相</text>
                                <text class="founder-desc">{{ toText(companyZodiacSign?.animal) }} {{
                                    toText(companyZodiacSign?.earthly_branch) }}</text>
                                <text v-if="toText(companyZodiacSign?.trait_summary)" class="modal-text company-extra-sub">{{
                                    companyZodiacSign?.trait_summary }}</text>
                                <text v-if="toText(companyZodiacSign?.name_harmony)" class="modal-text company-extra-sub">与商号：{{
                                    companyZodiacSign?.name_harmony }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view v-if="hasCompanyCareerPlan" class="section" @click="openModal('career_plan')">
                    <view class="section-title">
                        <text class="section-icon">💼</text>
                        <text class="section-text">事业规划</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="math-card company-extra-flat">
                        <text v-if="toText(companyCareerPlan?.summary)" class="modal-text">{{ companyCareerPlan?.summary
                        }}</text>
                        <view v-for="(m, mi) in arr(companyCareerPlan?.milestones)" :key="mi"
                            class="company-career-milestone">
                            <text class="modal-text company-extra-strong">{{ toText(m?.phase) }}{{ toText(m?.period) ? ' · '
                                + toText(m.period) : '' }}</text>
                            <text v-if="toText(m?.focus)" class="modal-text">{{ m?.focus }}</text>
                            <text v-if="toText(m?.advice)" class="modal-text">{{ m?.advice }}</text>
                        </view>
                    </view>
                </view>

                <view v-if="hasCompanyLuckyNumbers" class="section" @click="openModal('lucky_numbers')">
                    <view class="section-title">
                        <text class="section-icon">🔢</text>
                        <text class="section-text">幸运数字</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="math-card company-extra-flat">
                        <text v-if="toText(companyLuckyNumbers?.primary)" class="modal-text company-extra-strong">主推：{{
                            companyLuckyNumbers?.primary }}</text>
                        <text v-if="companyLuckyNumbersDisplay" class="modal-text">{{ companyLuckyNumbersDisplay }}</text>
                        <text v-if="toText(companyLuckyNumbers?.meaning)" class="modal-text">{{ companyLuckyNumbers?.meaning
                        }}</text>
                    </view>
                </view>

                <view v-if="hasCompanyLuckyColors" class="section" @click="openModal('lucky_colors')">
                    <view class="section-title">
                        <text class="section-icon">🎨</text>
                        <text class="section-text">幸运颜色</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="math-card company-extra-flat">
                        <text v-if="toText(companyLuckyColors?.primary)" class="modal-text company-extra-strong">主推：{{
                            companyLuckyColors?.primary }}</text>
                        <view v-for="(c, ci) in arr(companyLuckyColors?.colors)" :key="ci" class="company-lucky-color-row">
                            <view v-if="toText(c?.hex)" class="company-lucky-swatch"
                                :style="{ backgroundColor: toText(c?.hex) }" />
                            <text class="modal-text company-lucky-color-text">{{ toText(c?.name) }}{{ toText(c?.note) ? ' — '
                                + toText(c?.note) : '' }}</text>
                        </view>
                        <text v-if="toText(companyLuckyColors?.meaning)" class="modal-text">{{ companyLuckyColors?.meaning
                        }}</text>
                    </view>
                </view>

                <!-- 6. 创始人契合度 -->
                <view v-if="founderSection" class="section" @click="openModal('founder')">
                    <view class="section-title">
                        <text class="section-icon">👤</text>
                        <text class="section-text">{{ founderSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="founder-card">
                        <view class="founder-header">
                            <view class="founder-avatar">
                                <text class="founder-avatar-text">创</text>
                            </view>
                            <view class="founder-info">
                                <text class="founder-title">创始人命理</text>
                                <text class="founder-desc">{{ founderSection.summary_data.trait }}</text>
                            </view>
                            <view class="founder-score">
                                <text class="founder-score-value">{{ founderSection.summary_data.score }}分</text>
                                <text class="founder-score-label">契合指数</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 7. 财运风水布局 -->
                <view v-if="fengshuiSection" class="section" @click="openModal('fengshui')">
                    <view class="section-title">
                        <text class="section-icon">💎</text>
                        <text class="section-text">{{ fengshuiSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="fengshui-grid">
                        <view class="fengshui-card">
                            <text class="fengshui-icon">📍</text>
                            <text class="fengshui-label">办公财位</text>
                            <text class="fengshui-value">{{ fengshuiSection.summary_data.position }}</text>
                        </view>
                        <view class="fengshui-card">
                            <text class="fengshui-icon">🎨</text>
                            <text class="fengshui-label">品牌主色</text>
                            <text class="fengshui-value">{{ fengshuiSection.summary_data.colors }}</text>
                        </view>
                    </view>
                </view>

                <!-- 8. 未来五年运势预测 -->
                <view v-if="wunianSection" class="section" @click="openModal('wunian')">
                    <view class="section-title">
                        <text class="section-icon">📈</text>
                        <text class="section-text">{{ wunianSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="trend-card">
                        <view class="trend-chart">
                            <view v-for="(item, idx) in wunianYears" :key="idx" class="trend-bar-wrap">
                                <view class="trend-bar" :style="{ height: item.s + '%' }"
                                    :class="{ 'trend-bar-highlight': item.s > 90 }"></view>
                                <text class="trend-year">{{ item.y }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 9. 企业命理 SWOT 分析 -->
                <view v-if="swotSection" class="section" @click="openModal('swot')">
                    <view class="section-title">
                        <text class="section-icon">📋</text>
                        <text class="section-text">{{ swotSection.title }}</text>
                        <text class="section-hint">点击详解 ›</text>
                    </view>
                    <view class="swot-grid">
                        <view class="swot-card swot-card-s">
                            <text class="swot-title swot-title-gold">S / 优势</text>
                        </view>
                        <view class="swot-card swot-card-w">
                            <text class="swot-title swot-title-red">W / 劣势</text>
                        </view>
                        <view class="swot-card swot-card-o">
                            <text class="swot-title swot-title-gold">O / 机会</text>
                        </view>
                        <view class="swot-card swot-card-t">
                            <text class="swot-title swot-title-red">T / 威胁</text>
                        </view>
                    </view>
                </view>

                <!-- Action Buttons -->
                <view v-if="props.showBusinessFortune !== false" class="action-buttons">
                    <!-- <view class="action-btn action-btn-share">
                        <text class="action-btn-icon">📤</text>
                        <text class="action-btn-text">生成海报</text>
                    </view> -->
                    <view class="action-btn action-btn-primary" @click="handleBusinessFortune">
                        <text class="action-btn-text">商业运势</text>
                    </view>
                    <!-- <view class="action-btn action-btn-download">
                        <text class="action-btn-icon">📥</text>
                        <text class="action-btn-text">下载报告</text>
                    </view> -->
                </view>

                <!-- Footer -->
                <view class="detail-footer">
                    <text class="footer-text">壹梵 · 致力于东方美学与易经智慧的传承</text>
                </view>
            </view>
        </scroll-view>

        <!-- 详情弹窗 -->
        <view v-if="showModal" class="modal-overlay" @click.stop="closeModal">
            <view class="modal-container" @click.stop="">
                <view class="modal-header">
                    <text class="modal-title">{{ modalTitle }}</text>
                    <view class="modal-close" @click.stop="closeModal">
                        <text class="modal-close-icon">×</text>
                    </view>
                </view>
                <scroll-view scroll-y class="modal-body">
                    <view class="modal-body-contain">
                        <!-- 综合评分详情 -->
                        <view v-if="currentModal === 'zonghe'" class="modal-content">
                            <view v-if="zongheContent && zongheContent.rating" class="modal-rating-badge">{{
                                zongheContent.rating }}</view>
                            <text class="modal-section-title">大师总评</text>
                            <text class="modal-text">{{ zongheContent && zongheContent.summary ? zongheContent.summary :
                                '暂无数据' }}</text>
                        </view>

                        <!-- 品牌意象详情 -->
                        <view v-if="currentModal === 'pinpai'" class="modal-content">
                            <text class="modal-section-title">品牌解析</text>
                            <view class="modal-item">
                                <text class="modal-item-label">核心释义</text>
                                <text class="modal-text">{{ pinpaiContent && pinpaiContent.intro ? pinpaiContent.intro :
                                    '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">深度分析</text>
                                <text class="modal-text">{{ pinpaiContent && pinpaiContent.analysis ?
                                    pinpaiContent.analysis
                                    : '暂无数据' }}</text>
                            </view>
                        </view>

                        <!-- 商业数理详情 -->
                        <view v-if="currentModal === 'shuli'" class="modal-content">
                            <view v-if="shuliContent && shuliContent.number" class="modal-number-badge">{{
                                shuliContent.number }}</view>
                            <text v-if="shuliContent && shuliContent.luck_name" class="modal-luck-name">{{
                                shuliContent.luck_name }}</text>
                            <view class="modal-item">
                                <text class="modal-item-label">基本含义</text>
                                <text class="modal-text">{{ shuliContent && shuliContent.basic ? shuliContent.basic :
                                    '暂无数据'
                                }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">商业解读</text>
                                <text class="modal-text">{{ shuliContent && shuliContent.biz ? shuliContent.biz : '暂无数据'
                                }}</text>
                            </view>
                        </view>

                        <!-- 市场潜力详情 -->
                        <view v-if="currentModal === 'shichang'" class="modal-content">
                            <text class="modal-section-title">六维评估详解</text>
                            <view v-if="shichangContent && shichangContent.comm" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">传播力</text>
                                    <text class="modal-score-value">{{ shichangContent.comm.score ?
                                        (shichangContent.comm.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.comm.desc || '暂无数据' }}</text>
                            </view>
                            <view v-if="shichangContent && shichangContent.lead" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">领导力</text>
                                    <text class="modal-score-value">{{ shichangContent.lead.score ?
                                        (shichangContent.lead.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.lead.desc || '暂无数据' }}</text>
                            </view>
                            <view v-if="shichangContent && shichangContent.cohes" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">凝聚力</text>
                                    <text class="modal-score-value">{{ shichangContent.cohes.score ?
                                        (shichangContent.cohes.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.cohes.desc || '暂无数据' }}</text>
                            </view>
                            <view v-if="shichangContent && shichangContent.innov" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">创新力</text>
                                    <text class="modal-score-value">{{ shichangContent.innov.score ?
                                        (shichangContent.innov.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.innov.desc || '暂无数据' }}</text>
                            </view>
                            <view v-if="shichangContent && shichangContent.compat" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">契合度</text>
                                    <text class="modal-score-value">{{ shichangContent.compat.score ?
                                        (shichangContent.compat.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.compat.desc || '暂无数据' }}</text>
                            </view>
                            <view v-if="shichangContent && shichangContent.wealth" class="modal-score-item">
                                <view class="modal-score-header">
                                    <text class="modal-score-name">财运</text>
                                    <text class="modal-score-value">{{ shichangContent.wealth.score ?
                                        (shichangContent.wealth.score * 10).toFixed(0) : '-' }}分</text>
                                </view>
                                <text class="modal-text">{{ shichangContent.wealth.desc || '暂无数据' }}</text>
                            </view>
                        </view>

                        <!-- 商业卦象详情 -->
                        <view v-if="currentModal === 'guaxiang'" class="modal-content">
                            <view class="modal-gua-header">
                                <text class="modal-gua-name">{{ guaxiangContent && guaxiangContent.gua ?
                                    guaxiangContent.gua
                                    : '暂无卦象' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">卦象释义</text>
                                <text class="modal-text">{{ guaxiangContent && guaxiangContent.interp ?
                                    guaxiangContent.interp : '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">商业解读</text>
                                <text class="modal-text">{{ guaxiangContent && guaxiangContent.biz ? guaxiangContent.biz
                                    :
                                    '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">决策指引</text>
                                <text class="modal-text modal-text-highlight">{{ guaxiangContent &&
                                    guaxiangContent.guide ?
                                    guaxiangContent.guide : '暂无数据' }}</text>
                            </view>
                        </view>

                        <!-- 创始人契合详情 -->
                        <view v-if="currentModal === 'founder'" class="modal-content">
                            <view class="modal-founder-score">
                                <text class="modal-founder-score-value">{{ founderContent && founderContent.score ?
                                    founderContent.score : '-' }}</text>
                                <text class="modal-founder-score-label">契合指数</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">命理特征</text>
                                <text class="modal-text">{{ founderContent && founderContent.trait ?
                                    founderContent.trait :
                                    '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">详细分析</text>
                                <text class="modal-text">{{ founderContent && founderContent.analysis ?
                                    founderContent.analysis : '暂无数据' }}</text>
                            </view>
                        </view>

                        <!-- 风水布局详情 -->
                        <view v-if="currentModal === 'fengshui'" class="modal-content">
                            <text class="modal-section-title">品牌视觉识别建议</text>
                            <view class="modal-item">
                                <text class="modal-item-label">主色调</text>
                                <text class="modal-text">{{ fengshuiContent && fengshuiContent.color ?
                                    fengshuiContent.color
                                    : '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">Logo形态</text>
                                <text class="modal-text">{{ fengshuiContent && fengshuiContent.logo ?
                                    fengshuiContent.logo :
                                    '暂无数据' }}</text>
                            </view>
                            <view class="modal-item">
                                <text class="modal-item-label">办公选址</text>
                                <text class="modal-text">{{ fengshuiContent && fengshuiContent.office ?
                                    fengshuiContent.office : '暂无数据' }}</text>
                            </view>
                        </view>

                        <!-- 五年运势详情 -->
                        <view v-if="currentModal === 'wunian'" class="modal-content">
                            <text class="modal-section-title">未来五年运势详解</text>
                            <view v-for="(year, idx) in wunianYearsDetail" :key="idx" class="modal-year-item">
                                <view class="modal-year-header">
                                    <text class="modal-year-name">{{ year.y }}年</text>
                                    <text class="modal-year-zhi">({{ year.z }})</text>
                                    <text class="modal-year-label" :class="{ 'modal-year-label-hot': year.s > 90 }">{{
                                        year.l }}</text>
                                    <text class="modal-year-score">{{ year.s }}分</text>
                                </view>
                                <text class="modal-text">{{ year.d }}</text>
                            </view>
                        </view>

                        <!-- SWOT详情 -->
                        <view v-if="currentModal === 'swot'" class="modal-content">
                            <text class="modal-section-title">企业命理SWOT分析</text>
                            <view class="modal-swot-item modal-swot-s">
                                <text class="modal-swot-title">Strengths / 优势</text>
                                <text class="modal-text">{{ swotContent && swotContent.s ? swotContent.s : '暂无数据'
                                }}</text>
                            </view>
                            <view class="modal-swot-item modal-swot-w">
                                <text class="modal-swot-title">Weaknesses / 劣势</text>
                                <text class="modal-text">{{ swotContent && swotContent.w ? swotContent.w : '暂无数据'
                                }}</text>
                            </view>
                            <view class="modal-swot-item modal-swot-o">
                                <text class="modal-swot-title">Opportunities / 机会</text>
                                <text class="modal-text">{{ swotContent && swotContent.o ? swotContent.o : '暂无数据'
                                }}</text>
                            </view>
                            <view class="modal-swot-item modal-swot-t">
                                <text class="modal-swot-title">Threats / 威胁</text>
                                <text class="modal-text">{{ swotContent && swotContent.t ? swotContent.t : '暂无数据'
                                }}</text>
                            </view>
                        </view>

                        <!-- 公司测名扩展（六爻 / 五行八卦 / 属相 / 事业规划 / 幸运数字 / 幸运颜色）详文 -->
                        <view v-if="isCompanyExtraModal" class="modal-content">
                            <view v-for="(node, idx) in companyExtraModalNodes" :key="idx" class="company-extra-node">
                                <text v-if="node?.type === 'text'" class="modal-text">{{ toText(node.text) }}</text>
                                <view v-else-if="node?.type === 'list'">
                                    <text v-for="(item, j) in arr(node.items)" :key="j" class="modal-text">· {{ toText(item)
                                    }}</text>
                                </view>
                                <view v-else-if="node?.type === 'kv'">
                                    <text v-for="(item, j) in arr(node.items)" :key="j" class="modal-text">{{
                                        toText(item?.label) }}：{{ toText(item?.value) }}</text>
                                </view>
                            </view>
                        </view>
                    </view>

                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, withDefaults } from "vue";
import { userApi, namingApi } from "@/api";
import { getWealthAnalysisByReportId } from "@/api/cai-yun";

declare const uni: any;

const props = withDefaults(
    defineProps<{
        data: any;
        showBusinessFortune?: boolean;
        /** 电脑端测名：双列玻璃排版 */
        desktopLayout?: boolean;
    }>(),
    { desktopLayout: false },
);

const emit = defineEmits<{
    back: [];
    businessFortune: [any];
}>();

const toText = (v: any): string => String(v ?? '').trim();
const toNum = (v: any, fallback = 0): number => {
    const n = Number(v);
    return Number.isFinite(n) ? n : fallback;
};
const arr = (v: any): any[] => (Array.isArray(v) ? v : []);

const COMPANY_EXTRA_MODAL_KEYS = [
    'liuyao',
    'wuxing_bagua',
    'zodiac_sign',
    'career_plan',
    'lucky_numbers',
    'lucky_colors',
] as const;

const companyLiuyao = computed(() => props.data?.liuyao);
const companyWuxingBagua = computed(() => props.data?.wuxing_bagua);
const companyZodiacSign = computed(() => props.data?.zodiac_sign);
const companyCareerPlan = computed(() => props.data?.career_plan);
const companyLuckyNumbers = computed(() => props.data?.lucky_numbers);
const companyLuckyColors = computed(() => props.data?.lucky_colors);

const hasCompanyLiuyao = computed(() => {
    const x = companyLiuyao.value;
    if (!x || typeof x !== 'object') return false;
    return !!(
        toText(x.hexagram_title) ||
        toText(x.changing_summary) ||
        toText(x.interpretation) ||
        arr(x.yao_lines).length ||
        arr(x.details?.nodes).length
    );
});

const hasCompanyWuxingBagua = computed(() => {
    const x = companyWuxingBagua.value;
    if (!x || typeof x !== 'object') return false;
    return !!(
        toText(x.wuxing_sketch) ||
        toText(x.bagua_profile) ||
        toText(x.mutual_sketch) ||
        toText(x.summary) ||
        arr(x.details?.nodes).length
    );
});

const hasCompanyZodiacSign = computed(() => {
    const x = companyZodiacSign.value;
    if (!x || typeof x !== 'object') return false;
    return !!(
        toText(x.animal) ||
        toText(x.animal_icon) ||
        toText(x.earthly_branch) ||
        toText(x.trait_summary) ||
        toText(x.name_harmony) ||
        arr(x.details?.nodes).length
    );
});

const hasCompanyCareerPlan = computed(() => {
    const x = companyCareerPlan.value;
    if (!x || typeof x !== 'object') return false;
    return !!(toText(x.summary) || arr(x.milestones).length || arr(x.details?.nodes).length);
});

const hasCompanyLuckyNumbers = computed(() => {
    const x = companyLuckyNumbers.value;
    if (!x || typeof x !== 'object') return false;
    return !!(toText(x.primary) || toText(x.meaning) || arr(x.numbers).length || arr(x.details?.nodes).length);
});

const hasCompanyLuckyColors = computed(() => {
    const x = companyLuckyColors.value;
    if (!x || typeof x !== 'object') return false;
    return !!(toText(x.primary) || toText(x.meaning) || arr(x.colors).length || arr(x.details?.nodes).length);
});

const companyLuckyNumbersDisplay = computed(() => {
    const nums = arr(companyLuckyNumbers.value?.numbers);
    if (!nums.length) return '';
    return nums.map((n: any) => String(n)).join('、');
});
const nodesToText = (nodes: any): string => {
    if (!Array.isArray(nodes)) return '';
    const lines: string[] = [];
    nodes.forEach((n: any) => {
        if (!n) return;
        if (n.type === 'text') lines.push(toText(n.text));
        else if (n.type === 'list' && Array.isArray(n.items)) lines.push(...n.items.map((x: any) => toText(x)));
        else if (n.type === 'kv' && Array.isArray(n.items)) {
            n.items.forEach((it: any) => lines.push(`${toText(it?.label)}：${toText(it?.value)}`));
        }
    });
    return lines.filter(Boolean).join('\n');
};
const findKvValue = (nodes: any, labelKeyword: string): string => {
    if (!Array.isArray(nodes)) return '';
    for (const n of nodes) {
        if (n?.type !== 'kv' || !Array.isArray(n?.items)) continue;
        for (const it of n.items) {
            const label = toText(it?.label);
            if (label.includes(labelKeyword)) return toText(it?.value);
        }
    }
    return '';
};
const luckToScore = (luck: string): number => {
    if (luck.includes('大吉')) return 95;
    if (luck.includes('中吉')) return 82;
    if (luck.includes('小吉')) return 72;
    if (luck.includes('中平') || luck.includes('平')) return 60;
    if (luck.includes('凶')) return 35;
    return 60;
};

const normalizedData = computed(() => {
    const raw = props.data || {};
    // 旧结构兼容：已有 sections 直接沿用
    if (Array.isArray(raw?.sections)) return raw;

    // 新结构适配（按用户提供的后端 schema）
    const header = raw?.header || {};
    const charA = raw?.characterAnalysis || {};
    const pattern = raw?.businessPattern || {};
    const gua = raw?.gua || {};
    const team = raw?.team || {};
    const years = raw?.years || {};
    const direction = raw?.direction || {};
    const layout = raw?.layout || {};
    const execution = raw?.execution || {};

    const score = toNum(header?.score, 0);
    const tagLeft = toText(header?.tagLeft);
    const totalNumber = (tagLeft.match(/\d+/)?.[0] || '').trim();
    const luckName = (tagLeft.includes('·') ? tagLeft.split('·')[1] : '').trim();

    const radarLabels = Array.isArray(pattern?.radar?.labels) ? pattern.radar.labels : [];
    const radarValues = Array.isArray(pattern?.radar?.values) ? pattern.radar.values : [];
    const scoreMap: Record<string, number> = {};
    radarLabels.forEach((label: any, idx: number) => {
        scoreMap[toText(label)] = toNum(radarValues[idx], 0);
    });
    const toScale10 = (n: number) => Number((n / 10).toFixed(1));

    const yearItems = Array.isArray(years?.items) ? years.items : [];

    return {
        id: raw?.id,
        report_id: raw?.report_id,
        is_favorited: raw?.is_favorited,
        name: toText(header?.name),
        pinyin: toText(raw?.pinyin),
        total_score: score,
        star_rating: Math.max(1, Math.min(5, Math.round(score / 20))),
        name_meaning: toText(charA?.analysis || header?.quote),
        sections: [
            {
                section_type: 'zonghe',
                title: '综合评分',
                summary_data: { rating: toText(header?.tagRight) || '—' },
                details: [{ content: { rating: toText(header?.tagRight), summary: toText(header?.quote) } }],
            },
            {
                section_type: 'pinpai',
                title: '品牌意象解析',
                summary_data: { judgment: toText(charA?.analysis) || '—' },
                details: [{ content: { intro: toText(charA?.analysis), analysis: nodesToText(charA?.details?.nodes) } }],
            },
            {
                section_type: 'shuli',
                title: '商业数理吉凶',
                summary_data: { number: totalNumber || '—', luck: toText(header?.tagRight) || '—', luck_name: luckName || '—' },
                details: [{
                    content: {
                        number: totalNumber || '—',
                        luck_name: luckName || '—',
                        basic: findKvValue(charA?.details?.nodes, '总格23') || findKvValue(charA?.details?.nodes, '总格') || nodesToText(charA?.details?.nodes),
                        biz: nodesToText(charA?.details?.nodes),
                    }
                }],
            },
            {
                section_type: 'shichang',
                title: '市场潜力评估',
                summary_data: {
                    scores: {
                        comm: toScale10(scoreMap['名望'] || scoreMap['传播力'] || 0),
                        compat: toScale10(scoreMap['基业'] || scoreMap['行业契合'] || 0),
                        wealth: toScale10(scoreMap['财运'] || 0),
                        lead: toScale10(scoreMap['机遇'] || 0),
                        cohes: toScale10(scoreMap['团队'] || 0),
                        innov: toScale10(scoreMap['竞力'] || 0),
                    }
                },
                details: [{
                    content: {
                        comm: { score: toScale10(scoreMap['名望'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                        compat: { score: toScale10(scoreMap['基业'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                        wealth: { score: toScale10(scoreMap['财运'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                        lead: { score: toScale10(scoreMap['机遇'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                        cohes: { score: toScale10(scoreMap['团队'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                        innov: { score: toScale10(scoreMap['竞力'] || 0), desc: nodesToText(pattern?.details?.nodes) },
                    }
                }],
            },
            {
                section_type: 'guaxiang',
                title: '商业卦象',
                summary_data: { gua: toText(gua?.name), gua_type: toText(gua?.badge), text: toText(gua?.desc) },
                details: [{ content: { gua: toText(gua?.name), interp: toText(gua?.desc), biz: toText(gua?.insight), guide: Array.isArray(gua?.tags) ? gua.tags.join('；') : '' } }],
            },
            {
                section_type: 'founder',
                title: '创始人契合度',
                summary_data: {
                    trait: toText(team?.members?.[0]?.desc),
                    score: toText(team?.members?.[0]?.score),
                },
                details: [{ content: { trait: toText(team?.members?.[0]?.desc), score: toText(team?.members?.[0]?.score), analysis: toText(team?.note) } }],
            },
            {
                section_type: 'fengshui',
                title: '财运风水布局',
                summary_data: { position: toText(direction?.note), colors: toText(execution?.text).slice(0, 24) + (toText(execution?.text).length > 24 ? '...' : '') },
                details: [{ content: { color: findKvValue(layout?.details?.nodes, '核心理念') || toText(execution?.text), logo: nodesToText(layout?.details?.nodes), office: toText(direction?.note) } }],
            },
            {
                section_type: 'wunian',
                title: '未来五年运势预测',
                summary_data: {
                    years: yearItems.map((y: any) => ({
                        y: toText(y?.year).match(/\d{4}/)?.[0] || toText(y?.year),
                        s: luckToScore(toText(y?.luck)),
                    })),
                },
                details: [{
                    content: {
                        years: yearItems.map((y: any) => ({
                            y: toText(y?.year).match(/\d{4}/)?.[0] || toText(y?.year),
                            z: toText(y?.year).replace(/\d{4}\s*\(?/, '').replace(/\)?$/, ''),
                            l: toText(y?.luck),
                            s: luckToScore(toText(y?.luck)),
                            d: toText(y?.text),
                        })),
                    }
                }],
            },
            {
                section_type: 'swot',
                title: '企业命理 SWOT 分析',
                summary_data: {},
                details: [{
                    content: {
                        s: toText(findKvValue(execution?.details?.nodes, '第1月') || execution?.text),
                        w: toText(findKvValue(execution?.details?.nodes, '第3月')),
                        o: toText(findKvValue(execution?.details?.nodes, '第6月')),
                        t: toText(direction?.note),
                    }
                }],
            },
        ],
    };
});

// 收藏状态
const isFavorited = ref(false);

// 初始化收藏状态
if (props.data?.is_favorited !== undefined) {
    isFavorited.value = props.data.is_favorited;
}

// 切换收藏状态
const toggleFavorite = async () => {
    if (!props.data?.id) {
        uni.showToast({ title: "方案ID不存在", icon: "none" });
        return;
    }

    try {
        if (!isFavorited.value) {
            const res = await userApi.favoriteSolution({ solution_id: props.data.id, category: 'company' });
            isFavorited.value = res?.is_favorited ?? true;
            uni.showToast({
                title: res?.msg || "收藏成功",
                icon: "success"
            });
            return;
        }

        const res = await userApi.unfavoriteSolution({ solution_id: props.data.id });
        isFavorited.value = res?.is_favorited ?? false;
        uni.showToast({
            title: res?.msg || "已取消收藏",
            icon: "success"
        });
    } catch (e: any) {
        uni.showToast({ title: e.msg || "操作失败", icon: "none" });
    }
};

// 弹窗状态
const showModal = ref(false);
const currentModal = ref('');

// 弹窗标题映射
const modalTitles: Record<string, string> = {
    zonghe: '综合评分详解',
    pinpai: '品牌意象详解',
    shuli: '商业数理详解',
    shichang: '市场潜力详解',
    guaxiang: '商业卦象详解',
    liuyao: '六爻详解',
    wuxing_bagua: '五行八卦详解',
    zodiac_sign: '属相详解',
    career_plan: '事业规划详解',
    lucky_numbers: '幸运数字详解',
    lucky_colors: '幸运颜色详解',
    founder: '创始人契合详解',
    fengshui: '风水布局详解',
    wunian: '五年运势详解',
    swot: 'SWOT分析详解',
};

const modalTitle = computed(() => modalTitles[currentModal.value] || '详情');

const isCompanyExtraModal = computed(() =>
    COMPANY_EXTRA_MODAL_KEYS.includes(currentModal.value as (typeof COMPANY_EXTRA_MODAL_KEYS)[number])
);

const companyExtraModalNodes = computed(() => {
    const m = currentModal.value;
    if (!COMPANY_EXTRA_MODAL_KEYS.includes(m as (typeof COMPANY_EXTRA_MODAL_KEYS)[number])) return [];
    const block = (props.data as Record<string, any>)?.[m];
    return arr(block?.details?.nodes);
});

// 打开弹窗
const openModal = (modalType: string) => {
    currentModal.value = modalType;
    showModal.value = true;
};

// 关闭弹窗
const closeModal = () => {
    showModal.value = false;
    currentModal.value = '';
};

// 星星数据
const stars = ref(
    Array.from({ length: 30 }).map((_, i) => ({
        id: i,
        top: `${Math.random() * 100}%`,
        left: `${Math.random() * 100}%`,
        size: Math.random() * 2 + 1,
        duration: Math.random() * 3 + 2,
        delay: Math.random() * 2,
    }))
);

// 安全获取数据
const detailData = computed(() => ({
    name: normalizedData.value?.name || '',
    pinyin: normalizedData.value?.pinyin || '',
    total_score: normalizedData.value?.total_score || 0,
    star_rating: normalizedData.value?.star_rating || 0,
    name_meaning: normalizedData.value?.name_meaning || '',
}));

console.log('detailData===>>>', detailData.value);
// 获取 section
const getSection = (sectionType: string) => {
    const sections = normalizedData.value?.sections;
    if (!sections || !Array.isArray(sections)) return null;
    return sections.find((s: any) => s.section_type === sectionType) || null;
};

// 获取 section 的 content
const getContent = (section: any) => {
    if (!section?.details || !Array.isArray(section.details) || section.details.length === 0) return null;
    return section.details[0]?.content || null;
};

// 各模块 section
const zongheSection = computed(() => getSection('zonghe'));
const pinpaiSection = computed(() => getSection('pinpai'));
const shuliSection = computed(() => getSection('shuli'));
const shichangSection = computed(() => getSection('shichang'));
const guaxiangSection = computed(() => getSection('guaxiang'));
const founderSection = computed(() => getSection('founder'));
const fengshuiSection = computed(() => getSection('fengshui'));
const wunianSection = computed(() => getSection('wunian'));
const swotSection = computed(() => getSection('swot'));

// 各模块 content
const zongheContent = computed(() => getContent(zongheSection.value));
const pinpaiContent = computed(() => getContent(pinpaiSection.value));
const shuliContent = computed(() => getContent(shuliSection.value));
const shichangContent = computed(() => getContent(shichangSection.value));
const guaxiangContent = computed(() => getContent(guaxiangSection.value));
const founderContent = computed(() => getContent(founderSection.value));
const fengshuiContent = computed(() => getContent(fengshuiSection.value));
const wunianContent = computed(() => getContent(wunianSection.value));
const swotContent = computed(() => getContent(swotSection.value));

// 五年运势数据
const wunianYears = computed(() => wunianSection.value?.summary_data?.years || []);
const wunianYearsDetail = computed(() => wunianContent.value?.years || []);

// 格式化分数
const formatScore = (score: number | undefined): string => {
    if (score === undefined || score === null) return '-';
    return (score * 10).toFixed(0);
};

// 获取卦象字符
const getGuaChar = (gua: string): string => {
    if (!gua) return '卦';
    return gua.substring(0, 2);
};

// 截断文本
const truncateText = (text: string, maxLen: number): string => {
    if (!text) return '';
    if (text.length <= maxLen) return text;
    return text.substring(0, maxLen) + '...';
};

const handleBack = () => {
    emit("back");
};

const handleBusinessFortune = async () => {
    const solutionId = Number(props.data?.id || 0);
    if (!solutionId) {
        uni.showToast({ title: '方案ID不存在', icon: 'none' });
        return;
    }

    try {
        uni.showLoading({ title: '加载中...' });
        
        // 先获取方案详情以获得report_id
        // const solutionDetail = await namingApi.getSolutionDetail(solutionId);
        const reportId = props.data?.report_id;
        
        if (!reportId) {
            uni.hideLoading();
            uni.showToast({ title: '报告ID不存在', icon: 'none' });
            return;
        }

        // 使用report_id获取财运解析数据
        const businessFortuneData = await getWealthAnalysisByReportId(reportId);
        uni.hideLoading();
        
        uni.setStorageSync('business_fortune_report_id', reportId);
        emit('businessFortune', { id: reportId, businessFortuneData });
    } catch (error: any) {
        uni.hideLoading();
        uni.showToast({ title: error?.msg || error?.message || '加载失败，请重试', icon: 'none' });
    }
};
</script>


<style scoped>
/* 基础布局 */
.company-detail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #050508 0%, #10101a 50%, #1a1a2e 100%);
    overflow: hidden;
    z-index: 50;
}

/* 星空背景 */
.starry-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    opacity: 0.2;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.glow-top {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 50%;
    height: 50%;
    background: #2a3d5d;
    opacity: 0.2;
    filter: blur(100px);
    border-radius: 50%;
}

.glow-bottom {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: #9c2a2a;
    opacity: 0.1;
    filter: blur(100px);
    border-radius: 50%;
}

/* 头部 */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 30rpx;
    padding-top: calc(60rpx + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(10, 10, 15, 0.5);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 20;
}

.detail-header-back {
    display: flex;
    align-items: center;
    color: #a0a0a0;
}

.back-icon {
    font-size: 40rpx;
    margin-right: 8rpx;
}

.back-text {
    font-size: 28rpx;
    letter-spacing: 4rpx;
}

.detail-header-title {
    font-size: 36rpx;
    font-weight: bold;
    letter-spacing: 8rpx;
    color: #d4af37;
}

.detail-header-favorite {
    width: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-icon {
    font-size: 48rpx;
    color: #a0a0a0;
    transition: all 0.3s;
}

.favorite-icon-active {
    color: #ff4757;
    animation: heartbeat 0.3s ease-in-out;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.detail-header-placeholder {
    width: 80rpx;
}

/* 内容区域 */
.detail-content {
    flex: 1;
    height: 0;
    position: relative;
    z-index: 10;
}

.detail-content-inner {
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom, 0px));
    padding: 30rpx;
}

/* 总分卡片 */
.score-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60rpx 40rpx;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 50rpx;
    border-radius: 8rpx;
}

.score-corner {
    position: absolute;
    width: 24rpx;
    height: 24rpx;
    border-color: #d4af37;
}

.score-corner-tl {
    top: 0;
    left: 0;
    border-top: 4rpx solid;
    border-left: 4rpx solid;
}

.score-corner-tr {
    top: 0;
    right: 0;
    border-top: 4rpx solid;
    border-right: 4rpx solid;
}

.score-corner-bl {
    bottom: 0;
    left: 0;
    border-bottom: 4rpx solid;
    border-left: 4rpx solid;
}

.score-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 4rpx solid;
    border-right: 4rpx solid;
}

.score-label {
    font-size: 22rpx;
    color: #d4af37;
    letter-spacing: 8rpx;
    margin-bottom: 20rpx;
    opacity: 0.8;
}

.score-value-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 280rpx;
    height: 280rpx;
}

.score-value {
    font-size: 120rpx;
    font-weight: bold;
    background: linear-gradient(180deg, #d4af37 0%, #8a6e1e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.score-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2rpx dashed rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.score-stars {
    display: flex;
    justify-content: center;
    gap: 8rpx;
    margin: 20rpx 0 30rpx;
}

.score-star {
    font-size: 28rpx;
    color: #5a5a5a;
}

.score-star.active {
    color: #d4af37;
}

.score-divider {
    width: 100%;
    height: 2rpx;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 50%, transparent 100%);
    margin: 20rpx 0;
}

.score-name {
    display: block;
    font-size: 56rpx;
    font-weight: bold;
    color: #e2e2e2;
    letter-spacing: 12rpx;
    margin-top: 20rpx;
}

.score-pinyin {
    display: block;
    font-size: 26rpx;
    color: #a0a0a0;
    font-style: italic;
    margin-top: 10rpx;
}

.master-comment {
    margin-top: 30rpx;
    padding-top: 20rpx;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.master-rating {
    display: inline-block;
    font-size: 24rpx;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    margin-bottom: 16rpx;
}

.master-summary-preview {
    display: block;
    font-size: 24rpx;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 12rpx;
}

.click-hint {
    font-size: 22rpx;
    color: #d4af37;
    opacity: 0.6;
}

/* 通用 Section 样式 */
.section {
    margin-bottom: 40rpx;
    padding: 10rpx;
    border-radius: 16rpx;
    transition: background 0.2s;
}

.section:active {
    background: rgba(255, 255, 255, 0.05);
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    padding: 0 10rpx;
}

.section-icon {
    font-size: 32rpx;
    margin-right: 12rpx;
}

.section-text {
    font-size: 30rpx;
    font-weight: bold;
    color: #e2e2e2;
    letter-spacing: 4rpx;
}

.section-hint {
    font-size: 20rpx;
    color: rgba(212, 175, 55, 0.6);
    margin-left: auto;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
}

/* 品牌意象卡片 */
.meaning-card {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40rpx;
    border-radius: 12rpx;
    position: relative;
    overflow: hidden;
}

.meaning-quote {
    position: absolute;
    right: 20rpx;
    top: 10rpx;
    font-size: 80rpx;
    color: rgba(212, 175, 55, 0.1);
}

.meaning-label {
    display: block;
    font-size: 26rpx;
    font-weight: bold;
    color: #d4af37;
    margin-bottom: 16rpx;
}

.meaning-text {
    display: block;
    font-size: 26rpx;
    color: #a0a0a0;
    line-height: 1.8;
    text-align: justify;
}

.meaning-judge {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.meaning-judge-label {
    font-size: 26rpx;
    color: #d4af37;
}

.meaning-judge-text {
    font-size: 26rpx;
    color: #e2e2e2;
}

/* 商业数理卡片 */
.math-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30rpx;
    border-radius: 12rpx;
}

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

.math-info {
    display: flex;
    flex-direction: column;
}

.math-label {
    font-size: 24rpx;
    color: #a0a0a0;
    margin-bottom: 8rpx;
}

.math-value {
    font-size: 32rpx;
    font-weight: bold;
    color: #e2e2e2;
}

.math-badge {
    font-size: 22rpx;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
}

/* 市场潜力雷达 */
.radar-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30rpx;
    border-radius: 12rpx;
}

.radar-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.radar-label-item {
    flex: 0 0 calc(33.33% - 14rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8rpx;
}

.radar-label-name {
    font-size: 22rpx;
    color: #a0a0a0;
    margin-bottom: 8rpx;
}

.radar-label-value {
    font-size: 28rpx;
    font-weight: bold;
    color: #d4af37;
}

/* 卦象卡片 */
.gua-card {
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 40rpx;
    border-radius: 12rpx;
    position: relative;
    overflow: hidden;
}

.gua-bg-text {
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    font-size: 200rpx;
    color: rgba(255, 255, 255, 0.05);
    font-weight: bold;
}

.gua-content {
    position: relative;
    z-index: 1;
}

.gua-header {
    display: flex;
    align-items: baseline;
    gap: 16rpx;
    margin-bottom: 16rpx;
}

.gua-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #e2e2e2;
    letter-spacing: 4rpx;
}

.gua-badge {
    font-size: 22rpx;
    color: #9c2a2a;
    border: 1px solid #9c2a2a;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
}

.gua-desc {
    font-size: 26rpx;
    color: #a0a0a0;
    line-height: 1.6;
}

/* 创始人契合卡片 */
.founder-card {
    background: linear-gradient(90deg, #16213e 0%, #1a1a2e 100%);
    padding: 30rpx;
    border-radius: 12rpx;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.founder-header {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.founder-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.founder-avatar-text {
    font-size: 32rpx;
    color: #d4af37;
}

.founder-info {
    flex: 1;
}

.founder-title {
    display: block;
    font-size: 24rpx;
    color: #a0a0a0;
    margin-bottom: 8rpx;
}

.founder-desc {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #e2e2e2;
}

.founder-score {
    text-align: right;
}

.founder-score-value {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #d4af37;
}

.founder-score-label {
    display: block;
    font-size: 20rpx;
    color: #a0a0a0;
}

/* 风水布局网格 */
.fengshui-grid {
    display: flex;
    gap: 20rpx;
}

.fengshui-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 30rpx;
    border-radius: 12rpx;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fengshui-icon {
    font-size: 40rpx;
    margin-bottom: 12rpx;
}

.fengshui-label {
    font-size: 22rpx;
    color: #a0a0a0;
    margin-bottom: 8rpx;
}

.fengshui-value {
    font-size: 26rpx;
    font-weight: bold;
    color: #e2e2e2;
    text-align: center;
}

/* 五年运势图表 */
.trend-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30rpx;
    border-radius: 12rpx;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.trend-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200rpx;
    padding-top: 20rpx;
}

.trend-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60rpx;
}

.trend-bar {
    width: 40rpx;
    background: linear-gradient(180deg, #d4af37 0%, #8a6e1e 100%);
    border-radius: 8rpx 8rpx 0 0;
    min-height: 20rpx;
    transition: height 0.3s;
}

.trend-bar-highlight {
    background: linear-gradient(180deg, #9c2a2a 0%, #d4af37 100%);
    box-shadow: 0 0 16rpx rgba(212, 175, 55, 0.5);
}

.trend-year {
    font-size: 22rpx;
    color: #a0a0a0;
    margin-top: 12rpx;
}

/* SWOT 网格 */
.swot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.swot-card {
    flex: 0 0 calc(50% - 8rpx);
    padding: 24rpx;
    border-radius: 12rpx;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.swot-card-s {
    border-left: 4rpx solid #d4af37;
}

.swot-card-w {
    border-left: 4rpx solid #9c2a2a;
}

.swot-card-o {
    border-left: 4rpx solid #d4af37;
}

.swot-card-t {
    border-left: 4rpx solid #9c2a2a;
}

.swot-title {
    font-size: 26rpx;
    font-weight: bold;
}

.swot-title-gold {
    color: #d4af37;
}

.swot-title-red {
    color: #9c2a2a;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 20rpx;
    margin: 40rpx 0;
}

.action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx 16rpx;
    border-radius: 12rpx;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn-share {
    background: rgba(255, 255, 255, 0.05);
}

.action-btn-primary {
    background: linear-gradient(135deg, #9c2a2a 0%, #d4af37 100%);
    border: none;
}

.action-btn-download {
    background: rgba(255, 255, 255, 0.05);
}

.action-btn-icon {
    font-size: 36rpx;
    margin-bottom: 8rpx;
}

.action-btn-text {
    font-size: 24rpx;
    color: #e2e2e2;
}

/* 页脚 */
.detail-footer {
    text-align: center;
    padding: 40rpx 0 60rpx;
}

.footer-text {
    font-size: 22rpx;
    color: #5a5a5a;
    letter-spacing: 2rpx;
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-container {
    width: 100%;
    max-height: 85vh;
    background: #101015;
    border-radius: 32rpx 32rpx 0 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 40rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #151520;
}

.modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #e2e2e2;
    letter-spacing: 4rpx;
}

.modal-close {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.modal-close-icon {
    font-size: 40rpx;
    color: #a0a0a0;
}

.modal-body {
    flex: 1;
    height: 0;
}

.modal-body-contain {
    padding: 40rpx;

}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

/* 公司测名扩展模块（与个人测名同 JSON 字段） */
.company-extra-card {
    position: relative;
}

.company-extra-flat {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    padding: 28rpx;
}

.company-extra-strong {
    color: #e2e2e2;
    font-weight: 600;
}

.company-extra-sub {
    margin-top: 8rpx;
    font-size: 26rpx !important;
}

.company-career-milestone {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.company-career-milestone:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.company-lucky-color-row {
    display: flex;
    align-items: flex-start;
    gap: 16rpx;
}

.company-lucky-swatch {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6rpx;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.company-lucky-color-text {
    flex: 1;
}

.company-extra-node {
    margin-bottom: 16rpx;
}

/* 弹窗内容样式 */
.modal-rating-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 28rpx;
    color: #d4af37;
    border: 2rpx solid #d4af37;
    padding: 12rpx 24rpx;
    border-radius: 8rpx;
    background: rgba(212, 175, 55, 0.1);
}

.modal-section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #d4af37;
    letter-spacing: 2rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #d4af37;
}

.modal-text {
    font-size: 28rpx;
    color: #a0a0a0;
    line-height: 1.8;
    text-align: justify;
}

.modal-text-highlight {
    color: #d4af37;
    font-weight: bold;
}

.modal-item {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    padding: 24rpx;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12rpx;
}

.modal-item-label {
    font-size: 26rpx;
    font-weight: bold;
    color: #e2e2e2;
}

/* 数理弹窗 */
.modal-number-badge {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37 0%, #8a6e1e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    align-self: center;
    box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.3);
}

.modal-luck-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #e2e2e2;
    text-align: center;
    letter-spacing: 4rpx;
}

/* 市场潜力弹窗 */
.modal-score-item {
    padding: 24rpx;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12rpx;
    border-left: 4rpx solid #d4af37;
}

.modal-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
}

.modal-score-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #e2e2e2;
}

.modal-score-value {
    font-size: 28rpx;
    font-weight: bold;
    color: #d4af37;
}

/* 卦象弹窗 */
.modal-gua-header {
    text-align: center;
    padding: 20rpx;
}

.modal-gua-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #e2e2e2;
    letter-spacing: 8rpx;
}

/* 创始人弹窗 */
.modal-founder-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(156, 42, 42, 0.2) 100%);
    border-radius: 16rpx;
}

.modal-founder-score-value {
    font-size: 72rpx;
    font-weight: bold;
    color: #d4af37;
}

.modal-founder-score-label {
    font-size: 24rpx;
    color: #a0a0a0;
    letter-spacing: 4rpx;
}

/* 五年运势弹窗 */
.modal-year-item {
    padding: 24rpx;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12rpx;
    margin-bottom: 20rpx;
}

.modal-year-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 16rpx;
    flex-wrap: wrap;
}

.modal-year-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #e2e2e2;
}

.modal-year-zhi {
    font-size: 26rpx;
    color: #a0a0a0;
}

.modal-year-label {
    font-size: 22rpx;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
}

.modal-year-label-hot {
    background: #9c2a2a;
    border-color: #9c2a2a;
    color: #fff;
}

.modal-year-score {
    font-size: 28rpx;
    font-weight: bold;
    color: #d4af37;
    margin-left: auto;
}

/* SWOT弹窗 */
.modal-swot-item {
    padding: 24rpx;
    border-radius: 12rpx;
    background: rgba(255, 255, 255, 0.03);
}

.modal-swot-s {
    border-left: 6rpx solid #4CAF50;
}

.modal-swot-w {
    border-left: 6rpx solid #F44336;
}

.modal-swot-o {
    border-left: 6rpx solid #2196F3;
}

.modal-swot-t {
    border-left: 6rpx solid #FF9800;
}

.modal-swot-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #e2e2e2;
    margin-bottom: 12rpx;
}

/* —— 电脑端测名详解：双列 + 登录页同系玻璃金边 —— */
.company-detail--desktop {
    background: linear-gradient(165deg, #070a12 0%, #12102a 42%, #0a1628 100%) !important;
}

.company-detail--desktop .starry-bg {
    opacity: 0.28;
}

.company-detail--desktop .detail-header {
    background: rgba(15, 23, 42, 0.72) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    backdrop-filter: blur(12px);
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}

.company-detail--desktop .detail-header-title {
    color: #f2e6d8 !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.22);
}

.company-detail--desktop .detail-header-back {
    color: #d4af37 !important;
}

.company-detail--desktop .detail-content--desktop {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

.company-detail--desktop .detail-content-inner--desktop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 10px 14px 20px !important;
    align-content: start;
}

.company-detail--desktop .score-card {
    grid-column: 1 / -1;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(212, 175, 55, 0.22) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    padding: 20px 22px !important;
}

.company-detail--desktop .section {
    margin-bottom: 0 !important;
}

.company-detail--desktop .section--desktop-wide {
    grid-column: 1 / -1;
}

.company-detail--desktop .section-title {
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

.company-detail--desktop .meaning-card,
.company-detail--desktop .math-card,
.company-detail--desktop .radar-card,
.company-detail--desktop .gua-card,
.company-detail--desktop .company-extra-card {
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.48) !important;
    border: 1px solid rgba(212, 175, 55, 0.16) !important;
    backdrop-filter: blur(8px);
}

.company-detail--desktop .modal-text {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

@media (min-width: 1200px) {
    .company-detail--desktop .detail-content-inner--desktop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .company-detail--desktop .score-card {
        grid-column: 1 / -1;
    }
}
</style>
