<template>
    <div>
        <!-- 封面 -->
        <div class="cd_box fm" style="border: none;margin-top: 20px;height: 868px;">
            <img class="fm_img" src="@/assets/images/report/logo.png">
            <div class="fm_info adffc">
                <div class="fi_p">PERILL</div>
                <div class="fi_line"></div>
                <div class="fi_title">团队发展评估报告 个人版</div>
                <div class="fi_tip">{{ reportData?.cover?.title }}</div>
                <div class="fi_xx adf">
                    <div class="fi_xx_pre">项目名称:{{ reportData?.cover?.programName }}</div>
                    <div class="fi_xx_pre ml">客户名称:{{ reportData?.cover?.enterpriseName }}</div>
                    <div class="fi_xx_pre ml">团队名称:{{ reportData?.cover?.teamName }}</div>
                </div>
                <div class="fi_xx adf" style="margin-top: 4px;">
                    <div class="fi_xx_pre">报告撰写人:{{ '创衡AI教练助手' }}</div>
                    <div class="fi_xx_pre ml">成员人数:{{ reportData?.cover?.userNum }}</div>
                    <div class="fi_xx_pre ml">报告时间:{{ reportData?.cover?.genDate }}</div>
                </div>
            </div>
            <div class="cd_page" style="color: #FFFFFF;">1/{{ pageNum }}</div>
        </div>
        <!-- 介绍 -->
        <div class="cd_box js" style="border: none;">
            <div class="cb_db adf">
                <div class="cb_db_l cdl">{{ datetime }}</div>
            </div>
            <div class="cb_content">
                <div class="mddj_title adfac">
                    <img src="@/assets/images/report/title_img_wbjg.png">
                    <span>介绍</span>
                </div>
                <p>PERILL模型由发展辅导领域的先驱、全球顶尖教练以及管理思维与团队绩效领域的权威David Clutterbuck教授研发。该模型运用复杂、适应性思维，通过 PERILL 六大支柱对团队进行分析。这六大支柱概括了相互作用、推动或阻碍团队绩效的六大关键影响因素。</p>
                <p>以下报告提取了参与 PERILL 诊断问卷的团队成员提供的评分，并将其应用于 PERILL 模型。报告旨在总结团队的高绩效领域与潜在功能失调领域，以助力提升团队整体绩效。</p>
                <p>这份 PERILL 报告的结果可帮助企业与团队更好地了解自身优势、存在的问题、差距或需要克服的潜在挑战，从而提升团队绩效、声誉与协作能力。</p>
                <div class="big_title">PERILL的六大支柱</div>
                <p>PERILL 诊断提供了一个复杂的团队系统概览，它并非针对孤立的问题，也不是简单的优缺点，而是着眼于团队系统的复杂性。它通过 6 个影响因素（如下所述）提出问题，以揭示团队系统各要素之间的联系，以及这些联系如何影响团队的高效运作能力。</p>
                <div class="js_boxs">
                    <div class="jb_pre jp1">
                        <div class="jbp_zm">P</div>
                        <img src="@/assets/images/report/intro_p.png">
                        <div class="jbp_title" style="line-height: 30px;">目的与动机</div>
                        <p style="margin-top: 0;">是否存在一个明确的存在理由和清晰的方向，能够激发团队成员的动力并抓住他们的想象力？</p>
                        <p>个人身份和集体身份是否围绕共同目标达成一致？</p>
                    </div>
                    <div class="jb_pre jp2">
                        <div class="jbp_zm">E</div>
                        <img src="@/assets/images/report/intro_e.png">
                        <div class="jbp_title" style="line-height: 12px;">外部流程及系统与架构</div>
                        <p style="margin-top: 0;">团队如何与其各类利益相关者互动？</p>
                        <p>团队如何理解这些利益相关者以及利益相关者如何理解团队？此外，团队又该如何管理相互冲突的期望、获取资源等？</p>
                    </div>
                    <div class="jb_pre jp3">
                        <div class="jbp_zm">R</div>
                        <img src="@/assets/images/report/intro_r.png">
                        <div class="jbp_title" style="line-height: 30px;">关系</div>
                        <p style="margin-top: 0;">团队成员之间是否相互信任和尊重？</p>
                        <p>团队成员之间是否相互信任和尊重？</p>
                        <p>团队成员之间的关系是否有助于实现真正紧密的协作？</p>
                    </div>
                    <div class="jb_pre jp4">
                        <div class="jbp_zm">I</div>
                        <img src="@/assets/images/report/intro_i.png">
                        <div class="jbp_title" style="line-height: 12px;">内部流程及系统与架构</div>
                        <p style="margin-top: 0;">团队在平衡责任与自主权方面是如何实现功能性协作的？</p>
                        <p>它的敏捷性如何，沟通方式怎样，决策流程的运作效果有多好？</p>
                    </div>
                    <div class="jb_pre jp5">
                        <div class="jbp_zm">L</div>
                        <img src="@/assets/images/report/intro_l.png">
                        <div class="jbp_title" style="line-height: 30px;">学习</div>
                        <p style="margin-top: 0;">团队如何提高绩效，提高技能和资源，以应对当前和未来的任务？</p>
                        <p>它如何管理能力和提高效率？</p>
                    </div>
                </div>
                <div class="js_single_box adf">
                    <div class="jsb_zm">L</div>
                    <div class="jsb_l adffcacjc">
                        <img src="@/assets/images/report/intro_ldl.png">
                        <p>领导力</p>
                    </div>
                    <div class="jsb_r adffcacjc">
                        领导力的特质与行为如何对团队运作及其他因素产生调节影响，且这种影响是正向还是负向的？
                    </div>
                </div>
            </div>
            <div class="cd_page">2/{{ pageNum }}</div>
        </div>
        <!-- 总体诊断分析 -->
        <div class="cd_box">
            <div class="cb_db adf">
                <div class="cb_db_l cdl">{{ datetime }}</div>
            </div>
            <div class="cb_content">
                <div class="mddj_title adfac">
                    <img src="@/assets/images/report/title_img_wbjg.png">
                    <span>总体诊断分析</span>
                </div>
                <p class="p2" style="margin-top: 23px;line-height: 24px;">{{ reportData?.overall?.diagResult }}</p>
                <div class="ztzdfx_box">
                    <div class="zb_text">下面条形图中的位置标记显示了团队按支柱划分的总分。</div>
                    <div class="zb_title">诊断分数概览</div>
                    <div class="zb_line"></div>
                    <div class="zb_pre adfac">
                        <div class="zbp_dian zd1"></div>
                        <span>团队成员</span>
                    </div>
                    <div class="zb_pre adfac">
                        <div class="zbp_dian zd2"></div>
                        <span>团队领导</span>
                    </div>
                    <div class="zb_pre adfac">
                        <div class="zbp_dian zd3"></div>
                        <span>利益相关者</span>
                    </div>
                    <div class="zb_memo">这个极坐标图显示了各参与组的平均分数，分数范围从1到50。图中的每个区域代表PERILL支柱内的一个主题。每个组在每个主题中的分数由一个彩色圆点表示，圆点离中心的距离越远，分数越高。</div>
                </div>
                <div class="pdfEchart" id="zttdznRef" style="width: 100%; height: 600px;margin-top: -60px;"></div>
            </div>
            <div class="cd_page">3/{{ pageNum }}</div>
        </div>
        <!-- 整体得分及差异分析 -->
        <div class="cd_box">
            <div class="cb_db adf">
                <div class="cb_db_l cdl">{{ datetime }}</div>
            </div>
            <div class="cb_content">
                <div class="mddj_title adfac">
                    <img src="@/assets/images/report/title_img_wbjg.png">
                    <span>整体得分及差异分析</span>
                </div>
                <div class="bp" style="margin-top: 41px;">均分及差异分析</div>
                <p class="p2" style="margin-top: 16px;">方差：体现的是团队中每个个体成员在问卷题目中的选择，相对于团队整体均分的差异；通过这个指标来体现团队内部各成员对问卷内容认知程度的差异。</p>
                <div class="cyfx_boxs">
                    <div class="cyfxb_box" style="border-left: none;">
                        <div class="cbb_top">均分前五</div>
                        <div class="cbb_bottom">
                            <div class="cbbb_item" v-for="rph in reportData?.overall?.avgDescFive">
                                <div class="ci_l">{{ rph?.question }}</div>
                                <div class="ci_r">
                                    <div class="circle">
                                        <div class="semi-circle" :style="{'--percentage': rph?.avgScore}"></div>
                                        <div class="number">{{ rph?.avgScore }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cyfxb_box">
                        <div class="cbb_top red">均分后五</div>
                        <div class="cbb_bottom">
                            <div class="cbbb_item" v-for="rph in reportData?.overall?.avgAceFive">
                                <div class="ci_l">{{ rph?.question }}</div>
                                <div class="ci_r">
                                    <div class="circle">
                                        <div class="semi-circle red" :style="{'--percentage': rph?.avgScore}"></div>
                                        <div class="number red">{{ rph?.avgScore }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cyfxb_box">
                        <div class="cbb_top">方差前五</div>
                        <div class="cbb_bottom">
                            <div class="cbbb_item" v-for="rph in reportData?.overall?.varianceDescFive">
                                <div class="ci_l">{{ rph?.question }}</div>
                                <div class="ci_r">
                                    <div class="circle">
                                        <div class="semi-circle" :style="{'--percentage': rph?.variance}"></div>
                                        <div class="number">{{ rph?.variance }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cyfxb_box">
                        <div class="cbb_top red">方差后五</div>
                        <div class="cbb_bottom">
                            <div class="cbbb_item" v-for="rph in reportData?.overall?.varianceAceFive">
                                <div class="ci_l">{{ rph?.question }}</div>
                                <div class="ci_r">
                                    <div class="circle">
                                        <div class="semi-circle red" :style="{'--percentage': rph?.variance}"></div>
                                        <div class="number red">{{ rph?.variance }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cd_page">4/{{ pageNum }}</div>
        </div>
        <!-- 多维度 -->
        <template v-if="reportData?.dimensionAnalysis?.length">
            <div v-for="(rd,ridx) in reportData.dimensionAnalysis" :key="ridx">
                <!-- 第四页 目的与动机 -->
                <div class="cd_box">
                    <div class="cb_db adf">
                        <div class="cb_db_l cdl">{{ datetime }}</div>
                    </div>
                    <div class="cb_content" :class="classes[rd?.performanceRatings?.title]||'box_defalut'">
                        <div class="mddj_title adfac">
                            <img :src="imgs[rd?.performanceRatings?.title]||''">
                            <span>{{ rd?.performanceRatings?.title }}</span>
                        </div>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-if="rd?.performanceRatings?.title=='目的和动机'">在目标与动机支柱中，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同目标达成一致。</p>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-else-if="rd?.performanceRatings?.title=='外部流程及系统与架构'">在外部流程及系统与架构维度中，我们旨在了解团队与各类利益相关方的互动方式、团队如何尝试理解利益相关方（及对方如何理解团队），以及现有系统和流程在管理各方不同期望与需求方面的有效性。</p>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-else-if="rd?.performanceRatings?.title=='关系'">在关系维度中，我们旨在了解团队成员之间的互动方式、彼此的信任度、尊重程度与关怀意识，以及团队成员间的关系如何促进（或阻碍）协作。</p>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-else-if="rd?.performanceRatings?.title=='内部流程及系统与架构'">在内部流程及系统与架构维度中，我们旨在了解团队如何在平衡问责制与自主权的情况下实现功能性协作。我们关注团队的敏捷性、沟通方式以及决策流程的有效性。</p>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-else-if="rd?.performanceRatings?.title=='学习'">在学习维度中，我们旨在了解团队如何提升自身绩效、技能和资源，以应对当前及未来的任务。我们还希望了解团队如何管理能力并提高效率。</p>
                        <p class="p2" style="margin-top: 43px;font-weight: bold;line-height: 20px;" v-else-if="rd?.performanceRatings?.title=='领导力'">在领导力维度中，我们旨在了解领导力特质与行为如何对团队运作及其他因素产生调节影响，以及这种影响是积极的还是消极的。</p>
                        <p class="p3" style="margin-top: 42px;">为了帮助我们理解这一点，我们将从 5 个关键主题的角度审视团队的运作情况，具体如下：</p>
                        <div class="mddj_boxs" v-if="rd?.performanceRatings?.title=='目的和动机'">
                            <div class="mb_item" style="border-top: 1px dotted #833478;">
                                <div class="mbi_title">一致性：</div>
                                <div class="mbi_text">存在共同的目标和使命意识。个人目标与集体目标之间具有凝聚力。团队成员共享价值观，且集体议程优先于个人议程。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">清晰度：</div>
                                <div class="mbi_text">团队对个人及集体的角色和职责有高度清晰的认知。他们清楚地理解自身未来的方向、目标和使命。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">热情与贡献：</div>
                                <div class="mbi_text">团队对自身的工作目的有强烈的认同感，并展现出高昂的热情，以应对既定的挑战和目标。他们认为自己的工作富有意义，并感觉正在为世界贡献特殊的价值。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">愉悦感：</div>
                                <div class="mbi_text">团队从工作角色中获得快乐和 / 或满足感，欣赏并与团队中的同事保持联结。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">支持与协作：</div>
                                <div class="mbi_text">团队成员拥有团结感和高度的同志情谊。他们对团队目标有着共同的承诺，并愿意相互支持以实现这些目标。</div>
                            </div>
                        </div>
                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='外部流程及系统与架构'">
                            <div class="mb_item" style="border-top: 1px dotted #009191;">
                                <div class="mbi_title">环境意识：</div>
                                <div class="mbi_text">该团队拥有环境扫描和竞争对手监控的流程，并对相关情况有强烈的意识。在更广泛的环境中正在发生的事情。他们对更广泛市场背景下的宏观和微观趋势有所了解，这有助于团队做出明智、合理且富有成效的商业决策。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">利益相关者与客户协同：</div>
                                <div class="mbi_text">该团队拥有良好的系统，使他们能够与客户保持良好且定期的互动利益相关者，并确保他们的优先事项、目标和价值观保持一致。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">人才与资源获取：</div>
                                <div class="mbi_text">团队在需要时能够获取额外或替代的人才和资源，并且他们了解这一流程他们需要遵循这些规则才能获得成功。这有助于团队实现平稳高效的运营。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">利益相关者与客户沟通：</div>
                                <div class="mbi_text">该团队建立了强大的系统，以便随时向利益相关者和客户通报其工作进展，以及为什么。他们愿意倾听并从利益相关者和客户那里学习，以支持他们实现目标目标并提升绩效。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">关系中的信任与诚信：</div>
                                <div class="mbi_text">利益相关者对团队及其能力充满信心，团队也因其行事方式而受到尊重他们自己的行为。</div>
                            </div>
                        </div>
                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='关系'">
                            <div class="mb_item" style="border-top: 1px dotted #002846;">
                                <div class="mbi_title">技能和专业知识：</div>
                                <div class="mbi_text">团队具备恰当的技能与专业能力平衡，以实现团队目标。成员彼此信任，认为各自具备互补的优势与劣势，能支持目标达成。<br/>尊重与信任团队成员无论在私下还是公开场合都高度尊重彼此。他们信任对方会言行一致，并相互欣赏。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">情谊与凝聚力</div>
                                <div class="mbi_text">团队成员彼此关怀，情谊深厚。任何冲突或挑战都具有建设性，成员期望彼此获得成功。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">人才与资源获取：</div>
                                <div class="mbi_text">团队在需要时能够获取额外或替代的人才和资源，并且他们了解这一流程他们需要遵循这些规则才能获得成功。这有助于团队实现平稳高效的运营。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">安全沟通环境：</div>
                                <div class="mbi_text">团队内部具备高度的心理安全感。成员之间能坦诚相待、善于倾听，敢于暴露自身脆弱之处并承认错误。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">重视多样性与包容性：</div>
                                <div class="mbi_text">团队高度重视多样性与包容性。所有成员都认为自己的声音被倾听与尊重，可自由提问与质疑，并在适当情况下欣然认同彼此的技能、价值观与经验。</div>
                            </div>
                        </div>
                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='内部流程及系统与架构'">
                            <div class="mb_item" style="border-top: 1px dotted #833478;">
                                <div class="mbi_title">合理资源配置：</div>
                                <div class="mbi_text">团队拥有实现目标所需的合理资源配置，具备恰当的能力与知识平衡，并能在必要时补充额外技能。<br/>尊重与信任团队成员无论在私下还是公开场合都高度尊重彼此。他们信任对方会言行一致，并相互欣赏。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">团队敏捷性：</div>
                                <div class="mbi_text">团队能够高效且迅速地响应外部变化，并实现快速创新。必要时，团队可分担责任，相互支持以减轻任务负担。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">问责机制：</div>
                                <div class="mbi_text">团队内部在问责制与自主权之间实现了良好平衡。成员可在自身专业领域承担领导角色，并负责相互同步信息（而非依赖团队领导者）。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">系统效能：</div>
                                <div class="mbi_text">团队建立了完善的系统，并定期审视系统背后的假设及其有效性。团队通过可靠的流程支持科学决策，避免决策偏差。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">团队保护：</div>
                                <div class="mbi_text">团队领导者助力成员专注于工作，确保将外部干扰降至最低，团队韧性较强。</div>
                            </div>
                        </div>
                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='学习'">
                            <div class="mb_item" style="border-top: 1px dotted #AFCDF5;">
                                <div class="mbi_title">发展规划：</div>
                                <div class="mbi_text">团队认识到学习与成长的重要性，所有成员均制定了个人发展计划。团队还制定了全员认同的团队发展计划，聚焦团队在未来 12-24 个月需实现的整体进化方向。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">学习相关性：</div>
                                <div class="mbi_text">团队重视根据环境变化的需求持续提升技能和重新学习技能。发展方向反映了市场和业务战略的演变。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">嵌入式学习：</div>
                                <div class="mbi_text">团队内部拥有根深蒂固的学习文化，并高度重视持续学习。他们开展相互辅导，并将学习作为团队会议议程的常规议题。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">发展导向：</div>
                                <div class="mbi_text">团队频繁挑战自身假设，并主动邀请外部挑战。他们专注于效能与创新，并投资构建支持这一目标的网络。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">反思性学习：</div>
                                <div class="mbi_text">团队分配时间进行反思性学习，拥有完善的流程和实践，可对错误和挫折进行回顾、反思与学习，并利用所学主动实施积极变革。</div>
                            </div>
                        </div>
                        <div class="mddj_boxs" v-else-if="rd?.performanceRatings?.title=='领导力'">
                            <div class="mb_item" style="border-top: 1px dotted #833478;">
                                <div class="mbi_title">愿景与背景：</div>
                                <div class="mbi_text">团队明确自身的发展方向及原因。团队领导者专注于阐释目标背后的背景，并帮助每位成员理解自身目标。协作赋能型领导力团队与领导者就合适的管理风格达成共识。成员被赋予自主权与问责制，且在需要时可承担领导角色。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">协作赋能型领导力：</div>
                                <div class="mbi_text">团队与领导者就合适的管理风格达成共识。成员被赋予自主权与问责制，且在需要时可承担领导角色。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">人际领导力：</div>
                                <div class="mbi_text">团队成员与领导者沟通时感到自在，他们关心并尊重领导者，而领导者也展现出对成员的关怀。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">领导勇气：</div>
                                <div class="mbi_text">领导者展现出勇气，具备即便面临个人风险也坚持做正确之事的能力。他们保护团队免受外部过度干扰，专注于提升团队声誉与公信力。</div>
                            </div>
                            <div class="mb_item">
                                <div class="mbi_title">启发性领导力：</div>
                                <div class="mbi_text">团队领导者是成员的榜样，以身作则践行团队的价值观与行为准则。领导者关注团队的使命与目标，其经验与才智深受成员尊敬与重视。</div>
                            </div>
                        </div>
                    </div>
                    <div class="cd_page">{{ridx*3+5}}/{{ pageNum }}</div>
                </div>
                <!-- 第五页 绩效评级目的与动机 -->
                <div class="cd_box">
                    <div class="cb_db adf">
                        <div class="cb_db_l cdl">{{ datetime }}</div>
                    </div>
                    <div class="cb_content jxpjmddj" :class="classes[rd?.performanceRatings?.title]||'box_defalut'">
                        <div class="mddj_title adfac">
                            <img :src="imgs[rd?.performanceRatings?.title]||''">
                            <span>{{ rd?.performanceRatings?.title }}</span>
                        </div>
                        <div class="bp" style="margin-top: 14px;">评分总体分布</div>
                        <div :id="'pfztfbRef'+ridx" style="width: 100%; height: 200px;" class="pdfEchart"></div>
                        <div class="bp" style="margin-top: 5px;">均分及差异分析</div>
                        <p class="p2" style="margin-top: 6px;">方差：体现的是团队中每个个体成员在问卷题目中的选择，相对于团队整体均分的差异；通过这个指标来体现团队内部各成员对问卷内容认知程度的差异。</p>
                        <div class="cyfx_boxs">
                            <div class="cyfxb_box" style="border-left: none;">
                                <div class="cbb_top">均分前五</div>
                                <div class="cbb_bottom">
                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.highestMeanScores">
                                        <div class="ci_l">{{ rph?.question }}</div>
                                        <div class="ci_r">
                                            <div class="circle">
                                                <div class="semi-circle" :style="{'--percentage': rph?.score}"></div>
                                                <div class="number">{{ rph?.score }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cyfxb_box">
                                <div class="cbb_top red">均分后五</div>
                                <div class="cbb_bottom">
                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.lowestMeanScores">
                                        <div class="ci_l">{{ rph?.question }}</div>
                                        <div class="ci_r">
                                            <div class="circle">
                                                <div class="semi-circle red" :style="{'--percentage': rph?.score}"></div>
                                                <div class="number red">{{ rph?.score }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cyfxb_box">
                                <div class="cbb_top">方差前五</div>
                                <div class="cbb_bottom">
                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.highestVarianceScores">
                                        <div class="ci_l">{{ rph?.question }}</div>
                                        <div class="ci_r">
                                            <div class="circle">
                                                <div class="semi-circle" :style="{'--percentage': rph?.score}"></div>
                                                <div class="number">{{ rph?.score }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cyfxb_box">
                                <div class="cbb_top red">方差后五</div>
                                <div class="cbb_bottom">
                                    <div class="cbbb_item" v-for="rph in rd?.performanceRatings?.lowestVarianceScores">
                                        <div class="ci_l">{{ rph?.question }}</div>
                                        <div class="ci_r">
                                            <div class="circle">
                                                <div class="semi-circle red" :style="{'--percentage': rph?.score}"></div>
                                                <div class="number red">{{ rph?.score }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cd_page">{{ridx*3+6}}/{{ pageNum }}</div>
                </div>
                <!-- 第六页 绩效评级目的与动机 -->
                <div class="cd_box">
                    <div class="cb_db adf">
                        <div class="cb_db_l cdl">{{ datetime }}</div>
                    </div>
                    <div class="cb_content" :class="classes[rd?.performanceRatings?.title]||'box_defalut'">
                        <div class="mddj_title adfac">
                            <img :src="imgs[rd?.performanceRatings?.title]||''">
                            <span>{{ rd?.performanceRatings?.title }}</span>
                        </div>
                        <div class="bp" style="margin-top: 44px;">诊断分析</div>
                        <p style="margin-top: 17px;">{{ rd?.diagAnalysis?.summary }}</p>
                        <!-- <p style="margin-top: 17px;" v-if="rd?.performanceRatings?.title=='目的和动机'">我们综合团队全体成员、赞助人、利益相关方各位团队伙伴在目的与动机维度的评分情况。请注意：我们的分析包含了团队在这一维度问卷得分的平均水平、团队内外部成员及赞助人等利益相关方评分的差异等角度做了综合分析，以此形成对于团队全体在这一维度所呈现出来的状态、成因的诊断分析；并结合这一诊断分析，提出对团队维度表现提升的的建议。</p>
                        <p style="margin-top: 17px;" v-else-if="rd?.performanceRatings?.title=='外部流程及系统与架构'">我们综合团队全体成员、赞助人、利益相关方各位团队伙伴在目的与动机维度的评分情况。请注意：我们的分析包含了团队在这一维度问卷得分的平均水平、团队内外部成员及赞助人等利益相关方评分的差异等角度做了综合分析，以此形成对于团队全体在这一维度所呈现出来的状态、成因的诊断分析；并结合这一诊断分析，提出对团队维度表现提升的的建议。</p>
                        <p style="margin-top: 17px;" v-else-if="rd?.performanceRatings?.title=='关系'">以下内容展示了 “关系” 支柱下团队总体得分最高的主题。<br><br>请注意，这并不一定意味着该领域功能高效，仅表明其为表现最佳的方面。你还应审视得分与差异情况，必要时可深入分析得分的进一步细分。</p>
                        <p style="margin-top: 17px;" v-else-if="rd?.performanceRatings?.title=='内部流程及系统与架构'"></p> -->
                        <div class="jxpjmddj_box">
                            <div class="jb_title">主题：纬度评价分：{{ rd?.diagAnalysis?.avgScore }}<span style="margin-left: 17px;">标准方差：{{ rd?.diagAnalysis?.variance }}</span></div>
                        </div>
                        <div class="jxpjmddj_box">
                            <div class="jb_title2">诊断结果：</div>
                            <div class="jb_text" v-html="rd?.diagAnalysis?.diagResult.replace(/(\r\n|\n|\r)+/g, '<br>')"></div>
                        </div>
                        <div class="jxpjmddj_box">
                            <div class="jb_title2">建议：</div>
                            <div class="jb_text" v-for="(t,i) in rd?.diagAnalysis?.suggestion" :key="i">{{ t }}</div><br>
                        </div>
                    </div>
                    <div class="cd_page">{{ridx*3+7}}/{{ pageNum }}</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup name="">
    const props = defineProps({
        reportData:{
            type: Object,
            default: () => {}
        }
    })
    import * as echarts from "echarts";
    import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'
    const { proxy } = getCurrentInstance();
    import useCommonStore from "@/store_v3/modules/common";
    const reportData = ref(null);
    const zttdznRef = ref(null)
    const pjgxRef = ref(null);
    const pageNum = ref('');
    const membersPageCount = ref(0);
    const optionsMap = new Map();
    const datetime = proxy.parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}');
    const { UserCategory} = proxy.useDict("UserCategory");
    const emits = defineEmits(['optionsMaps']);
    const classes = {
        '目的和动机':'box_dj',
        '外部流程及系统与架构':'box_wbjg',
        '关系':'box_gx',
        '内部流程及系统与架构':'box_nbjg',
        '学习':'box_xx',
        '领导力':'box_ldl'
    }
    const imgs = {
        '目的和动机':require('@/assets/images/report/title_img_dj.png'),
        '外部流程及系统与架构':require('@/assets/images/report/title_img_wblcjg.png'),
        '关系':require('@/assets/images/report/title_img_gx.png'),
        '内部流程及系统与架构':require('@/assets/images/report/title_img_nbjg.png'),
        '学习':require('@/assets/images/report/title_img_xx.png'),
        '领导力':require('@/assets/images/report/title_img_ldl.png')
    }
  
    const getLDTData = () => {
        const { ...rd } = reportData.value;
        const radar = rd?.overall?.reportRadar||[];
        const radarMap = new Map();
        radar.forEach((item) => {
            radarMap.set(item.classify, item);
        });

        const indicators = [
            { name: '目的和动机', max: 50 }, { name: '领导力', max: 50 }, { name: '学习', max: 50 }, { name: '内部流程及系统与架构', max: 50 }, { name: '关系', max: 50 }, { name: '外部流程及系统与架构', max: 50 }].reverse();
        const categoryData = [
            { name: '目的和动机', color: '#823479' },
            { name: '领导力', color: '#898989' },
            { name: '学习', color: '#AECDF3' },
            { name: '内部流程及系统与架构', color: '#FFD64E' },
            { name: '关系', color: '#193D59' },
            { name: '外部流程及系统与架构', color: '#009191' },
        ];
        const reversedCategoryData = [...categoryData].reverse();
        const newArr = [];
        categoryData.forEach(c=>{
            let rm =  radarMap.get(c.name);
            newArr.push({ 
                avgMemberScore:rm.avgMemberScore||0,
                avgLeaderScore:rm.avgLeaderScore||0,
                avgStakeholderScore:rm.avgStakeholderScore||0
            })
        })
        const teamData = [
            {
                name: '团队成员',
                value: newArr.map(n=>n.avgMemberScore).reverse(),
                lineStyle: { color: '#9F6196' },
                itemStyle: { color: '#FFD650' },
                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
            },
            {
                name: '团队领导',
                value: newArr.map(n=>n.avgLeaderScore).reverse(),
                lineStyle: { color: '#33A7A7' },
                itemStyle: { color: '#751E6A' },
                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
            },
            {
                name: '利益相关者',
                value: newArr.map(n=>n.avgStakeholderScore).reverse(),
                lineStyle: { color: '#FFD750' },
                itemStyle: { color: '#012846' },
                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
            },
        ];
        const generateBackgroundSeries = () => {
            const series = [];
            let current = 0;
            reversedCategoryData.forEach((cat) => {
                const data = new Array(indicators.length).fill('-');
                for (let i = 0; i < 1; i++) {
                    data[current + i] = 50;
                }
                series.push({
                    type: 'bar', 
                    coordinateSystem: 'polar', 
                    stack: 'background',
                    silent: true, data: data,
                    barCategoryGap: '0%',
                    itemStyle: {
                        color: cat.color,
                        opacity: 0.8,
                        borderColor: '#FFFFFF',
                        borderWidth: 0
                    }
                });
                current += 1;
            });
            return series;
        };
        return { indicators, reversedCategoryData, teamData,generateBackgroundSeries };
    }

    let chartInstance = null;
    const initZttdznChart = async () => {
        let { indicators, reversedCategoryData, teamData, generateBackgroundSeries } = await getLDTData();

        chartInstance = echarts.init(document.getElementById('zttdznRef'));
        const radarChartRadius = '60%';
        const outerRingRadius = ['60%', '75%'];
        const angleOffset = 360 / (indicators.length * 2);
    
        const option = {
            tooltip: { trigger: 'item' },
            polar: { center: ['50%', '50%'], radius: radarChartRadius },
            radar: {
                indicator: indicators,
                shape: 'circle',
                center: ['50%', '50%'],
                radius: radarChartRadius,
                startAngle: 90,
                splitNumber: 5,
                axisName: { show: false }, 
                splitArea: { show: false },
                axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
            },
            angleAxis: {
                type: 'category',
                data: indicators.map(i => i.name),
                boundaryGap: false,
                axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
            },
            radiusAxis: {
                min: 0, max: 50, interval: 10,
                axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
            },
            graphic: {
                elements: [
                    {
                        type: 'group',
                        left: 'center',
                        top: 'center',
                        children: [
                            {
                                type: 'circle',
                                shape: { r: 30 }, // 圆形按钮的半径
                                style: {
                                    fill: '#FFFFFF',
                                    shadowBlur: 20,
                                    shadowColor: 'rgba(0, 0, 0, 0.25)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 4
                                },
                                z: 20
                            }
                        ]
                    }
                ]
            },
            series: [
            {
                name: '外部环', type: 'pie', 
                radius: outerRingRadius, center: ['50%', '50%'],
                silent: true,
                startAngle: 90 + angleOffset,
                data: reversedCategoryData.map((item, index) => {
                    const total = reversedCategoryData.length;
                    const anglePerItem = 360 / total;
                    const centerAngle = -anglePerItem * index - anglePerItem / 2;
                    let rotation = centerAngle+30;
                    if (centerAngle < -90 && centerAngle > -270) {
                        rotation += 180;
                    }
                    return {
                        value: 1, name: item.name, itemStyle: { color: item.color },
                        label: { rotate: rotation }
                    };
                }),
                label: {
                    show: true, position: 'inside', formatter: '{b}',
                    color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
                },
                labelLine: { show: false },
                itemStyle: { borderWidth: 0 },
                z: 5,
            },
            { name: '能力评估', type: 'radar', data: teamData, symbol: 'circle', symbolSize: 8, z: 10 },
            ...generateBackgroundSeries()
            ],
        };
        optionsMap.set("zttdznRef_copy", option);
        chartInstance.setOption(option);
    
        const graphicLabels = indicators.map((indicator, index) => {
            // 将文字放在半径为47的位置，比雷达图最大值50略小，比数据区大
            const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
            const x = point[0];
            const y = point[1];
    
            const total = indicators.length;
            const angleStep = 360 / total;
            // 计算当前指标的角度, 90度为顶部, 顺时针递减
            const angleInDegrees = 90 - (index * angleStep);
    
            let rotationAngle = angleInDegrees;
            let textAlign = 'left';
            
            // 判断指标在圆的左半部分还是右半部分
            // 左半部分: 角度 > 90 或 < -90
            if (angleInDegrees <= -90 || angleInDegrees >= 90) {
                // 左侧文字，旋转180度使其正向，并设置为右对齐
                rotationAngle = angleInDegrees + 180;
                textAlign = 'right';
            } else if (angleInDegrees === 90 || angleInDegrees === -90) {
                // 顶部或底部文字，居中对齐
                textAlign = 'center';
            }
            // 右侧文字，保持默认左对齐即可
    
            // ECharts 的 rotation 是弧度制，需要转换
            const rotationInRadians = rotationAngle * (Math.PI / 180);
    
            return {
                type: 'text',
                style: {
                    // text: indicator.name,
                    font: '8px "Microsoft YaHei"',
                    fill: '#333',
                    align: textAlign, // 根据位置动态设置对齐方式
                    verticalAlign: 'middle',
                },
                x: x, y: y,
                rotation: rotationInRadians, // 应用计算好的旋转角度
                z: 15
            };
        });
    
        // 将计算好的文字元素添加到图表中
        let option2 = {
            graphic: {
                elements: [
                    ...option.graphic.elements, // 保留中心的圆形按钮
                    ...graphicLabels // 添加指标文字
                ]
            }
        };
        optionsMap.set("zttdznRef_copy2", option2);
        chartInstance.setOption(option2);
    }
    const resizeChart = () => {
        // dispose后重建，确保graphic元素能重新计算位置
        chartInstance?.dispose();
        initZttdznChart();
    };
    
    const initPfztfbChart = (dom,report,id) => {
        let myChart = echarts.init(dom);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '8%',
                right: '13%',
                bottom: '5%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: report?.performanceRatings?.avgByTheme.map(d=>d.theme)||[]
            },
            series: [
                {
                name: '',
                type: 'bar',
                data: report?.performanceRatings?.avgByTheme.map(d=>d.score)||[],
                itemStyle:{
                    color: function(params) {
                        var colorList = ['#484EAE','#B6C38D', '#61B7C8', '#5D7EE5', '#8C95DC'];
                        return colorList[params.dataIndex]
                    }
                }
                }
            ]
        };
        optionsMap.set(id+'_copy', option);
        myChart.setOption(option)
    }

    onMounted(() => {
        reportData.value = props.reportData;
        membersPageCount.value = Math.ceil(reportData.value?.nextSteps?.teamInfo?.team_info?.length/4);
        pageNum.value = reportData.value?.dimensionAnalysis?.length*3+4||'-';
        reportData.value?.dimensionAnalysis?.forEach(item=>{
            item.userNames = item?.teamMemberScores[0]?.memberScores?.map(d=>d.realName)||[];
            item?.teamMemberScores.forEach((tms,idx)=>{
                tms.scores = tms?.memberScores?.map(d=>d.score)||[];
                tms.scores = [...tms.scores,tms.avgScore,tms.variance]
            })
        })
        Promise.resolve().then(() => {
            initZttdznChart();
            window.addEventListener('resize', resizeChart);
        });
        if(reportData.value?.dimensionAnalysis?.length){
            nextTick(()=>{
                reportData.value?.dimensionAnalysis?.forEach((item,index)=>{
                    let dom = document.getElementById(`pfztfbRef${index}`)
                    initPfztfbChart(dom,item,`pfztfbRef${index}`);
                    if(index===reportData.value?.dimensionAnalysis?.length-1){
                        emits('optionsMaps', optionsMap);
                    }
                })
            })
        } 
    })
</script>

<style scoped lang="scss">
    @import url(./pdf.scss);

    .cd_box{
        width: 100%;
        height: 891px;
        color: #A1A1A1;
    }
</style>