<template>
  <div class="outer-container" :class="{'mobile': isMobile}">
    <!-- 添加顶部标识栏 -->
    <div class="report-header">
      <div class="header-left">
        <img src="/@/assets/qcLogo.png" class="cc-icon" alt="cc icon">
        AI面试结果检验报告
      </div>
      <div class="header-right">
        <div>报告生成时间：{{ reportTime }}</div>
        <div class="report-id">报告ID：{{ reportId }}</div>
        <!-- 添加导出按钮 -->
      </div>
    </div>

    <!-- 添加加载状态和错误提示 -->
    <div v-if="loading" class="loading-state">
      加载中...
    </div>
    
    <div v-else-if="error" class="error-state">
      {{ error }}
    </div>

    <div v-else class="report-container">
      <!-- 头部信息 -->
      <div class="header">
        <!-- 头像部分 -->
        <div class="header-left">
          <img class="avatar" :src="userInfo.avatar" alt="用户头像">
        </div>
        <!-- 信息部分 -->
        <div class="header-right">
          <!-- 左侧信息 -->
          <div class="left-section">
            <div class="info-row">
              <span class="label">姓名：</span>
              <span class="value">{{ userInfo.name }}</span>
            </div>
            <div class="info-row">
              <span class="label">面试时间：</span>
              <span class="value">{{ userInfo.interviewTime }}</span>
            </div>
            <div class="info-row">
              <span class="label">面试时长：</span>
              <span class="value">{{ userInfo.duration }}</span>
            </div>
          </div>
          <!-- 右侧信息 -->
          <div class="right-section">
            <div class="info-row">
              <span class="label">实名认证：</span>
              <span class="value verified">已核验</span>
            </div>
            <div class="info-row">
              <span class="label">身份证号：</span>
              <span class="value">{{ userInfo.idNumber }}</span>
            </div>
            <div class="info-row">
              <span class="label">手机号码：</span>
              <span class="value">{{ userInfo.phone }}</span>
            </div>
          </div>
          <!-- 印章 -->
          <div class="stamp">
            <img v-if="userInfo.pass < 60" src="/@/assets/notPass.png" alt="不通过印章">
            <img v-else src="/@/assets/pass.png" alt="通过印章">
          </div>
        </div>
      </div>

      <!-- 修改导航选项卡部分 -->
      <div 
        class="nav-tabs"
        :class="{ 'fixed': isNavFixed }"
        ref="navTabs"
      >
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-item"
          :class="{ 
            'active': activeTab === tab.id,
            'link-tab': tab.isLink,
            'info-tab': tab.isInfo 
          }"
          @click="handleTabClick(tab)"
        >
          {{ tab.name }}
          <!-- 添加链接图标 -->
          <i v-if="tab.isLink" class="el-icon-link"></i>
          <!-- 添加信息图标 -->
          <i v-if="tab.isInfo" class="el-icon-info"></i>
        </div>
      </div>
      
      <!-- 修改占位元素 -->
      <div 
        class="nav-placeholder"
        v-if="isNavFixed"
        :style="{ height: navHeight + 'px' }"
      ></div>

      <!-- 各个内容区域添加ref标识 -->
      <div ref="comprehensive" class="evaluation-result">
        <div class="score-section">
          <div class="score-section-left">
            <div class="score-title">综合评价</div>
            <div class="score-value">
              <span class="number">{{userInfo.pass}}</span>
              <span class="unit">分</span>
              <span class="status-tag" v-if="userInfo.pass < 60">不通过</span>
              <span class="status-tag" style='background:#67C23A;' v-else>通过</span>
            </div>
            <div class="detection-results">
              <span class="detection-item">
                身份认证 
                <span :class="userInfo.idNumber ? 'status-normal' : 'status-warning'">
                  {{ userInfo.idNumber ? '无异常' : '有异常' }}
                </span>
              </span>
              <span class="separator">/</span>
              <span class="detection-item">
                手机号实名认证 
                <span :class="userInfo.phone ? 'status-normal' : 'status-warning'">
                  {{ userInfo.phone ? '无异常' : '有异常' }}
                </span>
              </span>
              <span class="separator">/</span>
              <span class="detection-item">
                手部综合检测 <span class="status-normal">无异常</span>
              </span>
            </div>
          </div>
          <div class="fail-reason">
            <div class="reason-header">
            <!--   <i class="el-icon-warning"></i> -->
              <span>录用建议：{{hireRecommendation}}</span>
            </div>
            <div class="reason-content">
              {{ failReason }}
            </div>
          </div>
          <div class="reason-content redline-section">
            <div class="redline-header">
              <span class="redline-title">红线题检测结果</span>
              <span :class="{
                'status-normal': redLineQuestions.allCorrect,
                'status-warning': !redLineQuestions.allCorrect
              }">
                {{ redLineQuestions.allCorrect ? '全部正确' : '存在错误，建议不录用' }}
              </span>
            </div>

            <!-- 添加未通过题目的详细信息 -->
            <div v-if="!redLineQuestions.allCorrect && redLineQuestions.failedQuestions.length > 0"
                 class="failed-questions">
              <div class="failed-title">未通过的红线题：</div>
              <div class="failed-list">
                <div v-for="(question, index) in redLineQuestions.failedQuestions" 
                     :key="'failed-'+index"
                     class="failed-item">
                  <span class="bullet">•</span>
                  <span class="question-text">{{ question.question_text || `问题 ${index + 1}` }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 能力雷达图 -->
        <div class="radar-chart">
          <v-chart 
            ref="radarChart"
            class="radar" 
            :option="radarOption" 
            autoresize 
          />
        </div>
      </div>

      <div ref="ability" class="ability-quality">
        <h3 style="font-size: 16px; font-weight: bold;">能力素质 <span style="font-size: 14px; font-weight: normal;">综合得分<span class="score-text">{{ totalScore }}</span>/100 分</span> </h3>
        
        <div class="quality-details">
          <div class="quality-item">
            <div class="quality-left">
              <div class="icon-box">
                <div class="icon advantage-icon">
                  <img src="/@/assets/yous.png" alt="优势展现">
                </div>
                <h5>优势展现</h5>
              </div>
              <div class="content">
                <p v-for="(strength, index) in qualityDetails.strengths" 
                   :key="index">
                  {{ getChineseAnalysis(strength) }}
                </p>
              </div>
            </div>
            
            <div class="quality-right">
              <div class="icon-box">
                <div class="icon suggestion-icon" style="position: relative;">
                  <img src="/@/assets/que.png" alt="发展建议">
                  <img style="width: 10px; height: 10px; position: absolute; top: 32%; left: 5px;" src="/@/assets/info.png" alt="">
                </div>
                <h5>发展建议</h5>
              </div>
              <div class="content">
                <p v-for="(weakness, index) in qualityDetails.weaknesses" 
                   :key="index">
                  {{ getChineseAnalysis(weakness) }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="detailed-evaluation">
          <div class="line-info">
            <div class="line-info-left">低</div>
            <div class="line-info-center">中</div>
            <div class="line-info-right">高</div>
          </div>
          <div class="line-chart">
            <div class="line-chart-left"></div>
            <div class="line_left"></div>
            <div class="line_center"></div>
            <div class="line_right"></div>
          </div>
          <div class="ability-scores">
            <div v-for="(item, index) in abilityItems" :key="index" class="ability-item">
              <span class="ability-name">{{ item.tag_name }}</span>
              <div class="progress-bar">
                <el-progress 
                  :percentage="item.weighted_score" 
                  :format="format"
                  :stroke-width="8"
                  :color="getProgressColor(item.weighted_score)"
                  :class="item.weighted_score >= 80 ? 'progress-bar-custom' : ''"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div ref="cheat" class="detection-section">
        <div class="detection-section-header">
            <div class="section-title">作弊检测</div>
            <div class="status-tag normal">无异常</div>
        </div>
     <div class="detection-section-content">
        <div class="detection-items">
            <div class="item">
            <span class="status normal">无风险</span>
            <span class="separator">/</span>
            <span class="desc">转移、替考：检测无异常</span>
            </div>
            <div class="item">
            <span class="status normal">无风险</span>
            <span class="separator">/</span>
            <span class="desc">读稿：检测无异常</span>
            </div>
            <div class="item">
            <span class="status normal">无风险</span>
            <span class="separator">/</span>
            <span class="desc">录屏/切屏：检测无异常</span>
            </div>
        </div>

        <div class="risk-standards">
            <div class="standards-title">风险等级标准</div>
            <div class="standards-content">
            <div class="standard-item">
                <span class="level">无异常：</span>
                <span class="desc">候选人提供的信息真实/无切屏录屏行为/无互联网查询行为/无互联网传行为</span>
            </div>
            <div class="standard-item">
                <span class="level">低风险：</span>
                <span class="desc">候选人提供信息真实/可切屏录屏行为/可互联网查询行为/无互联网传行为</span>
            </div>
            <div class="standard-item">
                <span class="level">高风险：</span>
                <span class="desc">面试者与候选人为一不同人/可切屏录屏行为/可互联网查询行为/过程存在传输行为</span>
            </div>
            </div>
        
        </div>
    </div>
    </div>

    <div ref="psychology" class="psychology-section">
      <div class="section-title">心理检测</div>
     <!--  -->
      <div class="psychology_box">
        <div class="psychology_body">
          <div class="psychology-desc">
            {{ psychologyData.description }}
          </div>
          <div class="psychology-recommendation">
            <span class="label">录用建议：</span>
            <span class="value">{{ psychologyData.recommendation }}</span>
          </div>
        </div>
        <div class="duv-score">
         <!--  <span>DUV 心理测评得分</span> -->
          <span class="score">{{ psychologyData.score }}</span>
          <span>分</span>
        </div> 
      </div>
    </div>

    <div ref="body" class="body-detection-section">
      <div class="detection-section-header">
        <div class="section-title">肢体检测</div>
        <el-button 
          type="primary" 
          link
          @click="showBodyVerification = true"
        >
          查看肢体核验结果
        </el-button>
      </div>
       <!-- 手部检测结果说明 -->
  <div class="detection-results mt-6">
    <div class="grid grid-cols-2 gap-4">
      <!-- 左手检测结果 -->
      <template v-for="(photo, index) in getHandPhotos('left')" :key="'left-'+index">
        <div class="detection-item" style="background-color: #f8f8f8;">
          <span class="position" style="color: #6c6c6c;">{{ getPositionLabel('left', index) }}</span>
          <span class="status" :class="{
            'status-normal': photo.part_verification?.is_correct_part,
            'status-error': !photo.part_verification?.is_correct_part
          }">
            {{ photo.part_verification?.is_correct_part ? '动作检测无异常' : '动作检测异常' }}
          </span>
          <span class="description text-gray-500 text-sm">
            {{ photo.part_verification?.is_correct_part ? getDefaultDescription('left', index) : photo.part_verification?.explanation || '检测未通过' }}
          </span>
        </div>
      </template>

      <!-- 右手检测结果 -->
      <template v-for="(photo, index) in getHandPhotos('right')" :key="'right-'+index">
        <div class="detection-item" style="background-color: #f8f8f8;">
          <span class="position"  style="color: #6c6c6c;">{{ getPositionLabel('right', index) }}</span>
          <span class="status" :class="{
            'status-normal': photo.part_verification?.is_correct_part,
            'status-error': !photo.part_verification?.is_correct_part
          }">
            {{ photo.part_verification?.is_correct_part ? '动作检测无异常' : '动作检测异常' }}
          </span>
          <span class="description text-gray-500 text-sm">
            {{ photo.part_verification?.is_correct_part ? getDefaultDescription('right', index) : photo.part_verification?.explanation || '检测未通过' }}
          </span>
        </div>
      </template>
    </div>
  </div>
    </div>

    <div ref="answers" class="report-footer">
      <!-- 添加问答记录展示区域 -->
      <div class="qa-section">
        <h3 class="section-title">问答记录</h3>
        <div class="qa-content">
          <div  class="space-y-4">
            <div v-for="(record, index) in interviewRecords" :key="index" class=" rounded-lg p-4">
              <!-- 题目标题部分 -->
              <div class="mb-4" >
                <div class="flex items-start  space-x-2 w-2/3">
                  <div class="px-2 py-1 rounded text-sm" style="font-size: 14px; font-weight: 600; font-family: 微软雅黑;">第{{ index + 1 }}题:</div>
                <!--   <div class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm">{{ getQuestionTypeName(record.question_form || 0) }}</div> -->
                  <div class="flex-1">
                    <span class="text-gray-800 color-black " style="font-size: 14px;">{{ record.question }}</span>
                  </div>
                </div>
                <!-- 视频问答题布局 -->
                <div v-if="record.question_form === 0 || record.question_form === 5" class="mt-4">
                  <!-- 原有的视频问答题布局 -->
                  <div class="flex space-x-4">
                    <!-- 右侧答案和评分 -->
                    <div class="w-2/3">
                      <div class="bg-white p-4 rounded-xl">
                        <div class="">
                          <div class="flex flex-col space-x-2">
                            <div class="px-2 py-1 rounded text-sm" id="candidate-answer" style="font-size: 14px;">候选人回答:</div>
                            <div class="flex-1">
                              <p class="text-gray-700 mb-0" style="font-size: 14px; line-height: 20px;  color: #808080;">{{ record.answer }}</p>
                            </div>
                          </div>
                        </div>
                        
                        <div>
                        </div>
                      </div>
                    </div>
                    <!-- 左侧视频播放器 -->
                    <div class="w-1/3">
                      <div class="video-container">
                        <video
                          class="w-full h-full object-cover rounded-lg"
                          controls
                          :src="record.video_url"
                          preload="metadata"
                          :poster="fallbackImageBase64Ref"
                          @loadeddata="handleVideoLoaded"
                          @error="handleVideoError"
                        >
                          您的浏览器不支持视频播放。
                        </video>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 追问题列表 -->
                  <div v-if="record.follow_up_questions && record.follow_up_questions.length > 0" 
                       class="mt-2  border-gray-200">
                    <div v-for="(followUp, fIndex) in record.follow_up_questions" 
                         :key="fIndex" 
                         class="">
                      <div class="flex items-start space-x-2">
                       
                        <div class="flex-1">
                         
                          <!-- 追问题的视频和答案布局 -->
                          <div class="mt-2">
                            <div class="flex space-x-4">
                              <!-- 右侧答案和评分 -->
                              <div class="w-2/3">
                                <div class=" p-4 rounded-xl bg-white">
                                  <div class="">
                                    <div class="flex items-start space-x-2">
                                        <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm" style="font-size: 14px;background-color: #fdd3bd; color:#f7681d;">追问题</div>
                                      <!-- <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">候选人</div> -->
                                      <div class="flex-1">
                                        <span class="font-medium text-gray-800" style="font-size: 14px;">{{ followUp.question }}</span>
                                        <p class="text-gray-700 mb-0" style="font-size: 14px; line-height: 20px;  color: #808080;">{{ followUp.answer }}</p>
                                      </div>
                                    </div>
                                  </div>
                                  
                                  <div>
                                    <!-- <div class="flex items-start space-x-2">
                                      <div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">AI评分</div>
                                      <div class="flex-1">
                                        <p class="text-gray-600 m-0">{{ followUp.analysis }}</p>
                                        <div class="mt-1 text-blue-500">得分：{{ followUp.score }}</div>
                                      </div>
                                    </div> -->
                                  </div>
                                </div>
                              </div>
                              <!-- 左侧视频播放器 -->
                              <div v-if="followUp.video_url" class="w-1/3">
                                <div class="video-container">
                                  <video
                                    class="w-full h-full object-cover rounded-lg"
                                    controls
                                    :src="followUp.video_url"
                                    preload="metadata"
                                    :poster="fallbackImageBase64Ref"
                                    @loadeddata="handleVideoLoaded"
                                    @error="handleVideoError"
                                  >
                                    您的浏览器不支持视频播放。
                                  </video>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- ai评分 -->
                  <div class="flex flex-col items-start bg-[#f8f8f8] p-4 rounded-lg">
                    <div class="flex items-center">
                      <div class="text-[14px] text-[#000] mr-2">本题评分：</div>
                      <div class="text-[#409EFF] font-medium">{{ record.score }}分</div>
                    </div>
                    <div class="flex ml-0">
                      <div class="text-[14px] text-[#f7681d] mr-2">整体分析：</div>
                      <p class="text-[14px] text-[#666666] m-0 ml-4">{{ record.analysis }}</p>
                    </div>
                    <div class="flex items-center">
                      <div class="text-[14px] text-[#666666] mr-2">考核点：</div>
                      <div class="progress-bar" style="width: 180px; font-size: 12px;color: #808080;">
                        <el-progress 
                          :percentage="Number(record.score)" 
                          :stroke-width="6"
                          :format="formats"
                          :color="getProgressColor(record.score)"
                          class="custom-progress"
                          style="font-size: 12px;color: #808080;"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 将导出按钮移到这里，添加fixed-btn类 -->
    <el-button
          type="primary"
          circle
           class="export-btn fixed-btn"
          :loading="exporting"
          @click="exportPDF"
        >
          <el-icon><Download /></el-icon>
        </el-button>
 <!--  <el-button 
    type="primary"
    size="small"
    @click="exportPDF"
    :loading="exporting"
    class="export-btn fixed-btn"
  >
    <i class="el-icon-download"></i>
    {{ exporting ? '导出中...' : '导出PDF' }}
  </el-button> -->
</div>

<!-- 添加个人详细信息弹窗 -->
<el-dialog
  title="个人详细信息"
  v-model="showInfoDialog"
  width="60%"
  :before-close="handleDialogClose"
  class="info-dialog"
>
  <div class="info-content">
    <div class="info-section">
      <h4>基本信息</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ userProfile.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">性别：</span>
          <span class="value">{{ userProfile.gender }}</span>
        </div>
        <div class="info-item">
          <span class="label">年龄：</span>
          <span class="value">{{ userProfile.age }}岁</span>
        </div>
        <div class="info-item">
          <span class="label">身份证：</span>
          <span class="value">{{ userProfile.idCard }}</span>
        </div>
        <div class="info-item">
          <span class="label">民族：</span>
          <span class="value">{{ userProfile.ethnicity }}</span>
        </div>
        <div class="info-item">
          <span class="label">政治面貌：</span>
          <span class="value">{{ userProfile.politicalStatus }}</span>
        </div>
        <div class="info-item">
          <span class="label">婚姻状况：</span>
          <span class="value">{{ userProfile.maritalStatus }}</span>
        </div>
        <div class="info-item">
          <span class="label">身高：</span>
          <span class="value">{{ userProfile.height }}</span>
        </div>
        <div class="info-item">
          <span class="label">体重：</span>
          <span class="value">{{ userProfile.weight }}</span>
        </div>
      </div>
    </div>
    
    <div class="info-section">
      <h4>联系方式</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">手机号码：</span>
          <span class="value">{{ userProfile.phone }}</span>
        </div>
        <div class="info-item">
          <span class="label">籍贯：</span>
          <span class="value">{{ userProfile.nativePlace }}</span>
        </div>
        <div class="info-item">
          <span class="label">现居地址：</span>
          <span class="value">{{ userProfile.address }}</span>
        </div>
      </div>
    </div>

    <div class="info-section">
      <h4>教育背景</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">学历：</span>
          <span class="value">{{ userProfile.education }}</span>
        </div>
        <div class="info-item">
          <span class="label">毕业院校：</span>
          <span class="value">{{ userProfile.schoolName }}</span>
        </div>
        <div class="info-item">
          <span class="label">专业：</span>
          <span class="value">{{ userProfile.major }}</span>
        </div>
        <div class="info-item">
          <span class="label">毕业时间：</span>
          <span class="value">{{ userProfile.graduationDate }}</span>
        </div>
      </div>
    </div>

    <div class="info-section">
      <h4>工作信息</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">当前公司：</span>
          <span class="value">{{ userProfile.currentCompany }}</span>
        </div>
        <div class="info-item">
          <span class="label">所在部门：</span>
          <span class="value">{{ userProfile.department }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前职位：</span>
          <span class="value">{{ userProfile.position }}</span>
        </div>
        <div class="info-item">
          <span class="label">工作经验：</span>
          <span class="value">{{ userProfile.experience }}</span>
        </div>
        <div class="info-item">
          <span class="label">期望薪资：</span>
          <span class="value">{{ userProfile.expectedSalary }}</span>
        </div>
      </div>
    </div>

    <div class="info-section">
      <h4>其他信息</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">特长爱好：</span>
          <span class="value">{{ userProfile.specialties }}</span>
        </div>
      </div>
    </div>
  </div>
</el-dialog>

<!-- 添加肢体核验结果弹窗 -->
<el-dialog
  title="肢体核验结果"
  v-model="showBodyVerification"
  width="80%"
  :before-close="handleBodyVerificationClose"
  class="body-verification-dialog"
>
  <!-- 将原来的手势验证内容移到这里 -->
  <div class="hand-verification">
    <div class="grid grid-cols-2 gap-8">
      <!-- 左手验证结果 -->
      <div>
        <h4 class="text-gray-600 mb-2">左手手势验证</h4>
        <div class="grid grid-cols-3 gap-2">
          <div v-for="(photo, index) in getHandPhotos('left')" 
               :key="index"
               class="relative aspect-square rounded-lg overflow-hidden bg-gray-100"
               :class="{'border-2': photo.part_verification, 
                       'border-green-500': photo.part_verification?.is_correct_part,
                       'border-red-500': photo.part_verification && !photo.part_verification.is_correct_part}"
          >
            <!-- 使用 el-tooltip 包裹内容 -->
            <el-tooltip
              v-if="photo.part_verification && !photo.part_verification.is_correct_part"
              :content="photo.part_verification.explanation || '未提供失败原因'"
              placement="top"
              effect="dark"
              :show-after="200"
            >
              <div class="w-full h-full">
                <img :src="photo.url" 
                     :alt="photo.description" 
                     class="w-full h-full object-cover"
                     @error="handleImageError">
                
                <!-- 底部状态显示 -->
                <div class="absolute bottom-0 left-0 right-0 py-1 px-2 text-xs text-center text-white z-10"
                     :class="{
                       'bg-green-500 bg-opacity-90': photo.part_verification?.is_correct_part,
                       'bg-red-500 bg-opacity-90': photo.part_verification && !photo.part_verification.is_correct_part
                     }">
                  {{ photo.part_verification?.is_correct_part ? '通过' : '未通过' }}
                </div>
              </div>
            </el-tooltip>
            <template v-else>
                <img :src="photo.url" 
                    :alt="photo.description" 
                    class="w-full h-full object-cover"
                    @error="handleImageError">
                
                <!-- 底部状态显示 -->
                <div v-if="photo.part_verification"
                    class="absolute bottom-0 left-0 right-0 py-1 px-2 text-xs text-center text-white z-10"
                    :class="{
                        'bg-green-500 bg-opacity-90': photo.part_verification.is_correct_part,
                        'bg-red-500 bg-opacity-90': !photo.part_verification.is_correct_part
                    }">
                {{ photo.part_verification.is_correct_part ? '通过' : '未通过' }}
                </div>
            </template>
          </div>
        </div>
      </div>

      <!-- 右手验证结果 -->
      <div>
        <h4 class="text-gray-600 mb-2">右手手势验证</h4>
        <div class="grid grid-cols-3 gap-2">
          <div v-for="(photo, index) in getHandPhotos('right')" 
               :key="index"
               class="relative aspect-square rounded-lg overflow-hidden bg-gray-100"
               :class="{'border-2': photo.part_verification, 
                       'border-green-500': photo.part_verification?.is_correct_part,
                       'border-red-500': photo.part_verification && !photo.part_verification.is_correct_part}"
          >
            <!-- 使用 el-tooltip 包裹内容 -->
            <el-tooltip
              v-if="photo.part_verification && !photo.part_verification.is_correct_part"
              :content="photo.part_verification.explanation || '未提供失败原因'"
              placement="top"
              effect="dark"
              :show-after="200"
            >
              <div class="w-full h-full">
                <img :src="photo.url" 
                     :alt="photo.description" 
                     class="w-full h-full object-cover"
                     @error="handleImageError">
                
                <!-- 底部状态显示 -->
                <div class="absolute bottom-0 left-0 right-0 py-1 px-2 text-xs text-center text-white z-10"
                     :class="{
                       'bg-green-500 bg-opacity-90': photo.part_verification?.is_correct_part,
                       'bg-red-500 bg-opacity-90': photo.part_verification && !photo.part_verification.is_correct_part
                     }">
                  {{ photo.part_verification?.is_correct_part ? '通过' : '未通过' }}
                </div>
              </div>
            </el-tooltip>
            <template v-else>
                      <img :src="photo.url" 
                           :alt="photo.description" 
                           class="w-full h-full object-cover"
                           @error="handleImageError">
                          
                          <!-- 底部状态显示 -->
                          <div v-if="photo.part_verification"
                               class="absolute bottom-0 left-0 right-0 py-1 px-2 text-xs text-center text-white z-10"
                               :class="{
                                 'bg-green-500 bg-opacity-90': photo.part_verification.is_correct_part,
                                 'bg-red-500 bg-opacity-90': !photo.part_verification.is_correct_part
                               }">
                            {{ photo.part_verification.is_correct_part ? '通过' : '未通过' }}
                          </div>
                        </template>
          </div>
        </div>
      </div>
    </div>
  </div>

 
</el-dialog>
</div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
// 引入html2canvas和jspdf
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { Share, Download, Printer, ArrowUp, User } from '@element-plus/icons-vue'

use([
  CanvasRenderer,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'JobApplicationReport',
  components: {
    VChart
  },
  data() {
    return {
      userInfo: {
        avatar: '/@/assets/default-avatar.png',
        name: '张某三',
        interviewTime: '2021-06-30 18:00',
        duration: '18分 12秒',
        idNumber: '24893119999999999',
        phone: '14893725981',
        pass: 60
      },
      totalScore: 52.0,
      abilityItems: [],
      isPassed: false,
      hireRecommendation:'',
      failReason: '候选人答题过程中存在非正常表现和应答，同时，可行性较为不足，候选人表现出来的综合能力也不符合岗位要求的行为和动机表现，在特定学习方面，候选人未能呈现出明显的优势和发展潜质。',
      qualityDetails: {
        strengths: [],
        weaknesses: []
      },
      activeTab: 'comprehensive',
      tabs: [
        { id: 'comprehensive', name: '综合评价' },
        { id: 'ability', name: '能力素质' },
        { id: 'cheat', name: '作弊检测' },
        { id: 'psychology', name: '心理检测' },
        { id: 'body', name: '肢体检测' },
        { id: 'personal-info', name: '个人详细信息', isInfo: true },
        { id: 'answers', name: '问答记录' },
        { id: 'other-answers', name: '其余答题详情', isLink: true }
      ],
      isNavFixed: false,
      navHeight: 0,
      navOffsetTop: 0,
      loading: false,
      error: null,
      // 分析结果中英文对照表
      analysisMap: {
        'clear_expression': '表达清晰',
        'logical_thinking': '逻辑思维能力强',
        'professional_knowledge': '专业知识扎实',
        'communication_skills': '沟通能力出色',
        'problem_solving': '问题解决能力强',
        'team_collaboration': '团队协作意识好',
        'learning_ability': '学习能力强',
        'lack_experience': '经验不足',
        'weak_professional': '专业知识有待提升',
        'poor_expression': '表达能力需要提高',
        'weak_logic': '逻辑思维需要加强',
        'weak_communication': '沟通技巧需要改进',
        'weak_teamwork': '团队协作意识不足',
        'weak_learning': '学习能力有待提升'
      },
      psychologyData: {
        score: 35,
        description: '轻微焦虑或负面情绪，仍具备岗位适应力。候选人在某些方面可能存在轻微的心理压力，但总体上仍保持稳定，基本符合岗位要求。',
        recommendation: '可考虑录取'
      },
      redLineQuestions: {
        allCorrect: false,
        failedQuestions: []
      },
      // 修改手势验证数据结构
      handVerificationData: {
        left: [],
        right: []
      },
      // 添加新的数据属性
      reportTime: '2025.5.19',
      reportId: '2489372598',
      isMobile: false,
      showInfoDialog: false,
      userProfile: {
        name: '',
        gender: '',
        age: '',
        education: '',
        phone: '',
        email: '',
        address: '',
        position: '',
        experience: '',
        expectedSalary: '',
        idCard: '',
        height: '',
        weight: '',
        nativePlace: '',
        politicalStatus: '',
        ethnicity: '',
        maritalStatus: '',
        specialties: '',
        schoolName: '',
        major: '',
        graduationDate: '',
        currentCompany: '',
        department: '',
      },
      showBodyVerification: false, // 添加控制弹窗显示的数据
      competencyMap: {
        'communication_cooperation': '团队协作能力',
        'learning_ability': '应变能力',
        'service_awareness': '服务意识',
        'customer_insight': '客户需求洞察力',
        'position_matching': '应变能力',
        'communication_expression': '沟通表达能力'
      },
      // 修改雷达图数据结构
      radarData: {
        indicator: [
          { name: '团队协作能力', value: 50, max: 100 },
          { name: '应变能力', value: 50, max: 100 },
          { name: '服务意识', value: 50, max: 100 },
          { name: '客户需求洞察力', value: 50, max: 100 },
          { name: '应变能力', value: 50, max: 100 },
          { name: '沟通表达能力', value: 50, max: 100 }
        ],
        values: [50, 50, 50, 50, 50, 50]  // 初始值设为0
      },
      exporting: false, // 添加导出状态控制
      radarChartInstance: null,
      interviewRecords: [], // 存储问答记录
    }
  },
  async created() {
    await this.fetchApplicationDetail()
  },
  mounted() {
    // 获取导航栏的初始位置和高度
    this.$nextTick(() => {
      const navElement = this.$refs.navTabs
      if (navElement) {
        this.navHeight = navElement.offsetHeight
        this.navOffsetTop = navElement.offsetTop
        
        // 添加滚动监听
        window.addEventListener('scroll', this.handleScroll)
      }
    })
    // 检测设备类型
    this.checkDevice();
    // 监听窗口大小变化
    window.addEventListener('resize', this.checkDevice);
    // 添加获取图表实例的ref
    this.$nextTick(() => {
      // 保存图表实例的引用
      this.radarChartInstance = this.$refs.radarChart
    })
    // 等待组件渲染完成后保存图表实例
    this.$nextTick(() => {
      if (this.$refs.radarChart) {
        this.radarChartInstance = this.$refs.radarChart
      }
    })
  },
  beforeDestroy() {
    // 移除滚动监听
    window.removeEventListener('scroll', this.handleScroll)
    // 移除监听器
    window.removeEventListener('resize', this.checkDevice);
  },
  computed: {
    radarOption() {
      return {
        radar: {
          indicator: this.radarData.indicator,
          center: ['50%', '50%'],
          radius: '65%',
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            color: '#666',
            fontSize: 12,
            formatter: (name) => {
              const index = this.radarData.indicator.findIndex(item => item.name === name);
              const value = this.radarData.values[index];
              // 添加中文释义
              const nameMappings = {
                '团队协作能力': '团队协作',
                '应变能力': '应变能力',
                '服务意识': '服务意识',
                '客户需求洞察力': '需求洞察',
                '沟通表达能力': '沟通表达'
              };
              const displayName = nameMappings[name] || name;
              return `${value}\n${displayName}`;
            }
          },
          nameGap: 15,
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#fff']
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E7E9ED',
              type: 'solid',
              width: 1
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E7E9ED',
              width: 1
            }
          }
        },
        series: [{
          type: 'radar',
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#c1dafc',
                width: 2
              },
              areaStyle: {
                type: 'default',
                color: 'rgba(193, 218, 252, 0.6)',
                shadowBlur: 10,
                shadowColor: 'rgba(193, 218, 252, 0.5)',
                shadowOffsetY: 5
              }
            }
          },
          data: [{
            value: this.radarData.values
          }]
        }]
      }
    }
  },
  methods: {
    async fetchApplicationDetail() {
      try {
        const application_id = this.$route.query.id || this.$route.params.id
        console.log(application_id)
        this.loading = true
        const response = await fetch(
          `${import.meta.env.VITE_API_URL}/api/job/application_detail?tenant_id=${1}&application_id=${application_id}`
        )

        if (!response.ok) {
          throw new Error('获取数据失败')
        }

        const data = await response.json()
        
        if (data.code === 2000) {
          // 添加数据安全检查
          const applicationData = data.data || {}
          this.reportTime = applicationData.application?.update_datetime || ''
          // 更新用户信息
          this.userInfo = {
            avatar: this.getFacePhoto(applicationData.posture_photos) || '/@/assets/default-avatar.png',
            name: applicationData.applicant?.name || '未知',
            interviewTime: applicationData.application?.interview_completion_time || '-',
            duration: applicationData.application?.interview_duration_formatted || '-',
            idNumber: applicationData.applicant?.id_card || '-',
            phone: applicationData.applicant?.phone || '-',
            pass: applicationData.application?.comprehensive_score || 0
          }
          this.reportId = applicationData.application?.report_id || ''
          // 处理手势验证照片数据
          if (applicationData.posture_photos && Array.isArray(applicationData.posture_photos)) {
            // 分类处理左右手照片
            const leftHandPhotos = applicationData.posture_photos.filter(photo => 
              photo?.description?.includes('left_') || photo?.description?.includes('左手')
            ) || []
            
            const rightHandPhotos = applicationData.posture_photos.filter(photo => 
              photo?.description?.includes('right_') || photo?.description?.includes('右手')
            ) || []

            // 更新左手照片数据
            this.handVerificationData.left = leftHandPhotos.map(photo => ({
              url: photo?.photo_url || '/@/assets/default-image.png',
              description: this.getPhotoDescription(photo?.description || ''),
              part_verification: {
                is_correct_part: photo?.part_verification?.is_correct_part ?? true,
                explanation: photo?.part_verification?.explanation || '手势验证通过'
              }
            }))

            // 更新右手照片数据
            this.handVerificationData.right = rightHandPhotos.map(photo => ({
              url: photo?.photo_url || '/@/assets/default-image.png',
              description: this.getPhotoDescription(photo?.description || ''),
              part_verification: {
                is_correct_part: photo?.part_verification?.is_correct_part ?? true,
                explanation: photo?.part_verification?.explanation || '手势验证通过'
              }
            }))
          }

          // 更新其他数据，添加空值检查
          if (applicationData.application) {
            this.totalScore = applicationData.application.comprehensive_score || 0
            this.hireRecommendation = applicationData.application.hire_recommendation || ''
            this.failReason = applicationData.application.hire_reason || ''
          }

          // 更新能力标签得分数据，添加空值检查
          const videoAnalysisData = applicationData.application?.comprehensive_analysis?.video_analysis_data
          if (videoAnalysisData?.competency_scores) {
            this.abilityItems = Object.entries(videoAnalysisData.competency_scores)
              .map(([key, item]) => ({
                tag_name: this.getCompetencyName(key) || item.tag_name || key,
                weighted_score: Math.round(item.weighted_score || 0)
              }))
          } else {
            // 设置默认的能力项
            this.abilityItems = [
              { tag_name: '团队协作能力', weighted_score: 0 },
              { tag_name: '应变能力', weighted_score: 0 },
              { tag_name: '服务意识', weighted_score: 0 },
              { tag_name: '客户需求洞察力', weighted_score: 0 },
              { tag_name: '沟通表达能力', weighted_score: 0 }
            ]
          }

          // 更新优势和劣势数据，添加空值检查
          if (videoAnalysisData) {
            this.qualityDetails = {
              strengths: videoAnalysisData.strengths || [],
              weaknesses: videoAnalysisData.weaknesses || []
            }
          } else {
            this.qualityDetails = {
              strengths: [],
              weaknesses: []
            }
          }

          // 更新红线题数据
          if (applicationData.required_questions_summary) {
            this.redLineQuestions = {
              allCorrect: applicationData.required_questions_summary.all_correct || false,
              failedQuestions: applicationData.required_questions_summary.failed_questions_details || []
            }
          }

          // 获取心理测评分数
          const psychologyScore = applicationData.scoring_summary?.total_score_obtained

          // 更新心理检测组件数据
          this.psychologyData = {
            score: psychologyScore || 0,
            description: this.getPsychologyDescription(psychologyScore),
            recommendation: this.getHireRecommendation(psychologyScore)
          }

          // 更新雷达图数据，添加空值检查
          if (videoAnalysisData?.competency_scores) {
            this.updateRadarData(videoAnalysisData.competency_scores)
          } else {
            // 设置默认的雷达图数据
            this.radarData = {
              indicator: [
                { name: '团队协作能力', max: 100 },
                { name: '应变能力', max: 100 },
                { name: '服务意识', max: 100 },
                { name: '客户需求洞察力', max: 100 },
                { name: '沟通表达能力', max: 100 }
              ],
              values: [0, 0, 0, 0, 0]
            }
          }

          // 添加获取问答记录的逻辑
          if (data.data?.interview_progress) {
            this.interviewRecords = this.processInterviewRecords(data.data.interview_progress)
            console.log(this.interviewRecords)
          }
          
        }
      } catch (error) {
        console.error('获取应用详情失败:', error)
        this.error = error.message
      } finally {
        this.loading = false
      }
    },
    formats(percentage) {
      console.log(percentage)
      return `${percentage}分`
    },
    format(percentage) {
      return `${percentage}分`
    },
    scrollToSection(tabId) {
      // 如果是答题记录标签，则进行路由跳转
      if (tabId === 'other-answers') {
        // 假设当前路由中有 applicationId 参数
        const applicationId = this.$route.query.id || this.$route.params.id
        const baseUrl = window.location.origin;
        // 使用window.open在新标签页打开
        window.open(`${baseUrl}/#/topic?applicationId=${applicationId}`, '_blank')
        return
      }

      // 其他标签的原有滚动逻辑
      this.activeTab = tabId
      const element = this.$refs[tabId]
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      
      // 更新固定状态
      this.isNavFixed = scrollTop > this.navOffsetTop

      // 更新当前激活的标签
      this.updateActiveTab(scrollTop)
    },
    updateActiveTab(scrollTop) {
      const navHeight = this.navHeight
      
      // 获取所有section的位置
      const sections = this.tabs.map(tab => {
        const element = this.$refs[tab.id]
        return {
          id: tab.id,
          top: element.getBoundingClientRect().top + window.pageYOffset - navHeight - 20
        }
      })

      // 找到当前滚动位置对应的section
      for (let i = sections.length - 1; i >= 0; i--) {
        if (scrollTop >= sections[i].top) {
          this.activeTab = sections[i].id
          break
        }
      }
    },
    // 获取分析结果的中文释义
    getChineseAnalysis(key) {
      return this.analysisMap[key] || key
    },
    // 添加获取心理状态描述的方法
    getPsychologyDescription(score) {
      if (score === undefined) return '未进行心理测评或数据缺失'
      
      if (score <= 20) {
        return '心理状态健康，情绪稳定、认知正常。候选人在心理测评中表现出稳定的情绪状态和健康的心理特质，适合岗位要求。'
      } else if (score <= 35) {
        return '轻微焦虑或负面情绪，仍具备岗位适应力。候选人在某些方面可能存在轻微的心理压力，但总体上仍保持稳定，基本符合岗位要求。'
      } else if (score <= 55) {
        return '存在一定情绪波动或压力反应。候选人在测评中表现出一定程度的心理压力或情绪波动，建议进一步面谈评估。'
      } else if (score <= 70) {
        return '心理压力较大，可能影响工作稳定性。候选人在测评中表现出较明显的心理压力或情绪不稳定性，建议慎重录用或考虑调岗。'
      } else {
        return '可能存在较严重心理或精神问题。候选人在测评中表现出明显的心理或情绪问题，不建议录用。'
      }
    },
    // 添加获取录用建议的方法
    getHireRecommendation(score) {
      if (score === undefined) return '无法给出建议'
      
      if (score <= 20) {
        return '建议优先录取'
      } else if (score <= 35) {
        return '可考虑录取'
      } else if (score <= 55) {
        return '建议进一步面谈评估'
      } else if (score <= 70) {
        return '慎重录用或建议调岗'
      } else {
        return '不建议录用'
      }
    },
    // 添加照片描述转换方法
    getPhotoDescription(description) {
      const descriptionMap = {
        'left_palm': '左手手心',
        'left_back': '左手手背',
        'left_fist': '左手腕拳',
        'right_palm': '右手手心',
        'right_back': '右手手背',
        'right_fist': '右手腕拳',
        // 添加中文描述的映射
        '左手手心': '左手手心',
        '左手手背': '左手手背',
        '左手腕拳': '左手腕拳',
        '右手手心': '右手手心',
        '右手手背': '右手手背',
        '右手腕拳': '右手腕拳'
      }
      return descriptionMap[description] || description
    },
    // 修改获取手部照片的方法
    getHandPhotos(hand) {
      const photos = this.handVerificationData[hand] || []
      return photos.map(photo => ({
        url: photo.url,
        status: 'normal',
        photo_id: 1,
        detections: [],
        description: photo.description,
        photo_index: 1,
        analysis_model: '',
        part_verification: photo.part_verification,
        analysis_timestamp: '',
        overall_assessment: '正常'
      }))
    },
    // 图片错误处理函数保持不变
    handleImageError(event) {
      const imgElement = event.target
      if (imgElement) {
        imgElement.src = '/@/assets/default-image.png'
      }
    },
    checkDevice() {
      this.isMobile = window.innerWidth <= 768;
    },
    async handleTabClick(tab) {
      if (tab.isInfo) {
        // 打开弹窗前获取最新的用户信息
        await this.fetchUserProfile();
        this.showInfoDialog = true;
      } else if (tab.isLink) {
        this.scrollToSection(tab.id);
      } else {
        this.scrollToSection(tab.id);
      }
    },
    handleDialogClose() {
      this.showInfoDialog = false;
    },
    async fetchUserProfile() {
      try {
        const userId = this.$route.query.application_id;
        const tenantId = 1;
        
        const response = await fetch(
          `${import.meta.env.VITE_API_URL}/api/system/wechat/user/profile/get?user_id=${userId}&tenant_id=${tenantId}`
        );

        if (!response.ok) {
          throw new Error('获取用户信息失败');
        }

        const data = await response.json();
        
        if (data.success && data.profile) {
          const basicInfo = data.profile.basic_info;
          const education = data.profile.educations[0] || {};
          const workExp = data.profile.work_experiences[0] || {};

          // 更新用户详细信息
          this.userProfile = {
            name: basicInfo.name || this.userInfo.name,
            gender: basicInfo.gender === 1 ? '男' : '女',
            age: basicInfo.age || '',
            education: this.getEducationLevel(education.degree),
            phone: basicInfo.phone || this.userInfo.phone,
            email: '',  // API中没有邮箱字段
            address: basicInfo.current_address || '',
            position: workExp.position || '',
            experience: this.formatWorkExperience(workExp),
            expectedSalary: basicInfo.expected_salary ? `${basicInfo.expected_salary}元/月` : '',
            idCard: basicInfo.id_card || '',
            height: basicInfo.height ? `${basicInfo.height}cm` : '',
            weight: basicInfo.weight ? `${basicInfo.weight}kg` : '',
            nativePlace: basicInfo.native_place || '',
            politicalStatus: basicInfo.political_status || '',
            ethnicity: basicInfo.ethnicity || '',
            maritalStatus: this.getMaritalStatus(basicInfo.marital_status),
            specialties: basicInfo.specialties || '',
            schoolName: education.school_name || '',
            major: education.major || '',
            graduationDate: education.end_date || '',
            currentCompany: workExp.company_name || '',
            department: workExp.department || '',
          }
        }
      } catch (error) {
        console.error('获取用户详细信息失败:', error);
      }
    },
    getEducationLevel(degree) {
      const degrees = {
        1: '专科',
        2: '本科',
        3: '硕士',
        4: '博士'
      };
      return degrees[degree] || '未知';
    },
    formatWorkExperience(workExp) {
      if (!workExp.start_date) return '无工作经验';
      const start = new Date(workExp.start_date);
      const end = workExp.end_date ? new Date(workExp.end_date) : new Date();
      const years = Math.floor((end - start) / (365 * 24 * 60 * 60 * 1000));
      return `${years}年`;
    },
    getMaritalStatus(status) {
      return status === 0 ? '未婚' : '已婚';
    },
    getPositionLabel(hand, index) {
      // 根据照片的类型来确定位置标签
      const photoType = this.getPhotoType(hand, index);
      const positions = {
        left: {
          palm: '①左手手心',
          back: '②左手手背',
          fist: '③左手腕拳'
        },
        right: {
          palm: '④右手手心',
          back: '⑤右手手背',
          fist: '⑥右手腕拳'
        }
      };
      return positions[hand]?.[photoType] || `${hand === 'left' ? '左' : '右'}手部位${index + 1}`;
    },
    getDefaultDescription(hand, index) {
      // 根据照片的类型来确定描述
      const photoType = this.getPhotoType(hand, index);
      const descriptions = {
        left: {
          palm: '手掌纹理清晰，活动自然',
          back: '手背皮肤正常，关节灵活',
          fist: '腕关节活动度正常'
        },
        right: {
          palm: '手掌纹理清晰，活动自然',
          back: '手背皮肤正常，关节灵活',
          fist: '腕关节活动度正常'
        }
      };
      return descriptions[hand]?.[photoType] || '手部动作正常';
    },
    // 新增方法：根据照片信息确定类型
    getPhotoType(hand, index) {
      const photo = this.handVerificationData[hand]?.[index];
      if (!photo) return null;

      // 从照片描述中提取类型
      const description = photo.description?.toLowerCase() || '';
      
      if (description.includes('palm') || description.includes('手心')) {
        return 'palm';
      } else if (description.includes('back') || description.includes('手背')) {
        return 'back';
      } else if (description.includes('fist') || description.includes('腕拳')) {
        return 'fist';
      }
      
      // 如果无法从描述中确定类型，尝试从验证结果中获取
      if (photo.part_verification?.part_type) {
        return photo.part_verification.part_type;
      }
      
      // 根据索引返回默认类型
      const defaultTypes = ['palm', 'back', 'fist'];
      return defaultTypes[index] || 'unknown';
    },
    // 添加关闭弹窗的方法
    handleBodyVerificationClose() {
      this.showBodyVerification = false
    },
    // 添加新方法：获取能力名称的中文释义
    getCompetencyName(key) {
      const competencyMap = {
        'communication_cooperation': '团队协作能力',
        'learning_ability': '应变能力',
        'service_awareness': '服务意识',
        'customer_insight': '客户需求洞察力',
        'position_matching': '岗位匹配度',
        'communication_expression': '沟通表达能力',
        // 可以根据需要添加更多映射
      }
      return competencyMap[key]
    },
    // 修改更新雷达图数据的方法
    updateRadarData(competencyScores) {
      if (!competencyScores) return
      
      const processedData = Object.entries(competencyScores)
        .map(([key, item]) => ({
          name: this.getCompetencyName(key) || item.tag_name || key,
          score: Math.round(item.weighted_score || 0)
        }))
        .sort((a, b) => b.score - a.score)
        .slice(0, 6)

      this.radarData = {
        indicator: processedData.map(item => ({
          name: item.name,
          max: 100
        })),
        values: processedData.map(item => item.score)
      }
    },
    // 添加检查图表实例的方法
    async ensureChartRendered() {
      let attempts = 0
      const maxAttempts = 5
      
      while (!this.$refs.radarChart?.chart && attempts < maxAttempts) {
        await new Promise(resolve => setTimeout(resolve, 200))
        attempts++
      }
      
      return this.$refs.radarChart?.chart
    },
    // 修改exportPDF方法中的相关部分
    async exportPDF() {
      try {
        this.exporting = true
        
        // 1. 创建临时容器
        const tempContainer = document.createElement('div')
        tempContainer.style.width = '1200px'
        tempContainer.style.background = '#fff'
        tempContainer.style.position = 'absolute'
        tempContainer.style.left = '-9999px'
        
        // 2. 获取所有主要内容区块
        const sections = [
          '.report-header',
          '.report-container .header',
          '.evaluation-result',
          '.ability-quality',
          '.detailed-evaluation', 
          '.detection-section',
          '.psychology-section',
          '.body-detection-section',
          '.qa-section'
        ]

        // 3. 为每个区块创建独立容器
        const sectionContainers = sections.map(selector => {
          const element = document.querySelector(selector)
          if (!element) return null
          
          const container = document.createElement('div')
          container.className = 'pdf-section'
          container.style.pageBreakInside = 'avoid' // 防止内容被分页切割
          container.style.margin = '20px 0'
          container.appendChild(element.cloneNode(true))
          return container
        }).filter(Boolean)

        // 4. 添加到临时容器
        sectionContainers.forEach(container => {
          tempContainer.appendChild(container)
        })
        document.body.appendChild(tempContainer)

        // 5. 处理雷达图
        const radarChart = tempContainer.querySelector('.radar-chart')
        if(radarChart) {
          try {
            const echartsInstance = await this.ensureChartRendered()
            if (echartsInstance) {
              const exportOption = {
                ...this.radarOption,
                radar: {
                  ...this.radarOption.radar,
                  radius: '65%',
                  center: ['50%', '50%'],
                  nameGap: 15
                }
              }
              
              echartsInstance.setOption(exportOption)
              const canvas = echartsInstance.getRenderedCanvas({
                pixelRatio: 2,
                width: 429,
                height: 310
              })
              
              const radarImg = document.createElement('img')
              radarImg.src = canvas.toDataURL('image/png')
              radarImg.style.width = '429px'
              radarImg.style.height = '310px'
              radarImg.style.objectFit = 'contain'
              
              radarChart.innerHTML = ''
              radarChart.appendChild(radarImg)
              
              echartsInstance.setOption(this.radarOption)
            }
          } catch (err) {
            console.warn('处理雷达图时出错:', err)
          }
        }

        // 6. 优化html2canvas配置
        const canvas = await html2canvas(tempContainer, {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          backgroundColor: '#ffffff',
          windowWidth: 1200,
          height: tempContainer.scrollHeight,
          onclone: (clonedDoc) => {
            const styles = clonedDoc.getElementsByTagName('style')
            Array.from(styles).forEach(style => {
              style.innerHTML = style.innerHTML.replace(/\@media/g, '._pdf_media')
            })
          }
        })

        // 7. 移除临时容器
        document.body.removeChild(tempContainer)

        // 8. 计算PDF尺寸和分页
        const imgWidth = 595.28 // A4宽度
        const imgHeight = 841.89 // A4高度
        const pageHeight = imgHeight - 40 // 留出页边距
        const contentHeight = (imgWidth / canvas.width) * canvas.height
        const pageCount = Math.ceil(contentHeight / pageHeight)

        // 9. 创建PDF文档
        const pdf = new jsPDF('p', 'pt', 'a4')
        
        // 10. 分页处理
        for(let i = 0; i < pageCount; i++) {
          if(i > 0) {
            pdf.addPage()
          }

          // 计算当前页显示的内容范围
          const position = -(pageHeight * i)
          const canvasHeight = Math.min(pageHeight, contentHeight - pageHeight * i)
          
          pdf.addImage(
            canvas.toDataURL('image/jpeg', 1.0),
            'JPEG',
            0,
            position,
            imgWidth,
            (imgWidth / canvas.width) * canvas.height,
            '',
            'FAST'
          )

          // 添加页码
          pdf.setFontSize(10)
          pdf.setTextColor(128, 128, 128)
          pdf.text(
            `${i + 1}/${pageCount}`,
            imgWidth - 40,
            pageHeight - 10
          )
        }

        // 11. 生成文件名并下载
        const fileName = `AI面试报告_${this.userInfo.name}_${this.reportTime}.pdf`
        pdf.save(fileName)

      } catch (error) {
        console.error('导出PDF失败:', error)
        this.$message.error('导出PDF失败，请稍后重试')
      } finally {
        this.exporting = false
      }
    },
    getFacePhoto(photos) {
      if (!photos || !Array.isArray(photos)) {
        return null;
      }

      // 定义面部照片的中文和英文关键词
      const faceKeywords = ['face', 'facial', '面部', '人脸', '头像'];
      
      // 查找包含面部关键词的照片
      const facePhoto = photos.find(photo => {
        const description = (photo?.description || '').toLowerCase();
        return faceKeywords.some(keyword => description.includes(keyword));
      });

      // 如果找到面部照片则返回URL,否则返回数组第一张照片的URL
      return facePhoto?.photo_url || photos[0]?.photo_url;
    },
    // 获取题型名称
    getQuestionTypeName(questionForm) {
      const typeMap = {
        0: '视频问答题',
        1: '单选题',
        2: '多选题',
        3: '图片选择题',
        4: '问卷题',
        5: '开放问答题'
      }
      return typeMap[questionForm] || '未知题型'
    },
    // 处理问答记录数据
    processInterviewRecords(records) {
      if (!records || !Array.isArray(records)) return []
      
      // 过滤并处理记录，只保留 question_form 为 0 或 5 的记录
      const mainQuestions = records
        .filter(q => (q.question_form === 0 || q.question_form === 5) && (q.video_answer || q.answer_data))
        .map(q => ({
          question: q.question_text || '未提供问题',
          answer: q.video_answer?.transcript || q.answer_data?.text_answer || '',
          analysis: q.video_answer?.ai_analysis?.comment || '',
          score: q.video_answer?.ai_score ? `${q.video_answer.ai_score}` : '',
          question_form: q.question_form,
          question_id: q.question_id,
          parent_question_id: q.parent_question_id,
          follow_up_questions: [],
          video_url: q.video_answer.video_url
        }))

      // 处理追问题，仍然只处理 question_form 为 5 的追问
      records
        .filter(q => q.question_form === 5 && q.parent_question_id)
        .forEach(followUp => {
          const parentQuestion = mainQuestions.find(
            q => q.question_id === followUp.parent_question_id
          )
          if (parentQuestion) {
            parentQuestion.follow_up_questions.push({
              question: followUp.question_text || '未提供问题',
              answer: followUp.video_answer?.transcript || '',
              analysis: followUp.video_answer?.ai_analysis?.comment || '',
              score: followUp.video_answer?.ai_score ? `${followUp.video_answer.ai_score}分` : '',
              question_form: followUp.question_form,
              question_id: followUp.question_id,
              parent_question_id: followUp.parent_question_id,
              follow_up_questions: [],
              video_url: followUp.video_answer.video_url
            })
          }
        })

      return mainQuestions
    },
    getProgressColor(score) {
      if (score >= 80) {
        return [{
          color: '#00b050', // 深绿色起点
          percentage: 0
        }, {
          color: '#6aff05', // 浅绿色终点
          percentage: 100
        }]
      } else {
        return [{
          color: '#f7681d', // 橙色起点
          percentage: 0
        }, {
          color: '#fdd1bb', // 浅橙色终点
          percentage: 100
        }]
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.outer-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
}

.report-container {
  /* padding: 30px; */
  margin: 30px auto;
  width: 1200px;
  background: #fff;

  .header {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 8px;

    .header-left {
      .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .header-right {
      flex: 1;
      display: flex;
      position: relative;
      background: #f8f8f8;
      padding: 20px;
      border-radius: 8px;

      .left-section,
      .right-section {
        flex: 1;

        .info-row {
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          
          &:last-child {
            margin-bottom: 0;
          }

          .label {
            width: 80px;
            color: #666;
            font-size: 14px;
          }

          .value {
            color: #333;
            font-size: 14px;

            &.verified {
              color: #67C23A;
            }
          }
        }
      }

      .stamp {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);

        img {
          width: 150px;
          height: 150px;
          opacity: 0.8;
        }
      }
    }
  }

  .evaluation-result {
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    background: #f8f8f8;
    .score-section {
      width: 65%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 24px;
      background: #f8f8f8;
      border-radius: 4px;

      .score-section-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        white-space: nowrap; // 添加此行防止换行
        
        .score-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          min-width: fit-content; // 添加此行确保标题不会被压缩
        }

        .score-value {
          display: flex;
          align-items: baseline;
          min-width: fit-content; // 添加此行确保分数部分不会被压缩
          
          .number {
            font-size: 14px;
            font-weight: bold;
            color: #F56C6C;
          }

          .unit {
            margin: 0 8px;
            font-size: 14px;
            color: #333;
          }

          .status-tag {
            padding: 2px 8px;
            font-size: 12px;
            color: #fff;
            background: #F56C6C;
            border-radius: 2px;
          }
        }

        .detection-results {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: #333;
          min-width: fit-content; // 添加此行确保检测结果不会被压缩

          .detection-item {
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap; // 添加此行防止换行
            
            .status-normal {
              color: #67C23A;
            }

            .status-warning {
              color: #F56C6C;
            }
          }

          .separator {
            color: #DCDFE6;
          }
        }
      }

      .fail-reason {
        flex: 1;
        text-align: left;
        padding: 16px;
        border-radius: 4px;

        .reason-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
          color: #F56C6C;
          font-size: 14px;

          i {
            font-size: 16px;
          }
        }

        .reason-content {
          margin-top: 16px;
          font-size: 14px;

          .label {
            color: #333;
            font-weight: 500;
          }

          .status-normal {
            color: #67C23A;
          }

          .status-warning {
            color: #F56C6C;
          }

          .failed-questions {
            margin-top: 12px;
            padding: 12px;
            background-color: #FEF0F0;
            border-radius: 4px;
            border-left: 4px solid #F56C6C;

            .failed-title {
              color: #F56C6C;
              font-weight: 500;
              margin-bottom: 8px;
            }

            .failed-list {
            text-align: left;
              list-style-type: disc;
              padding-left: 20px;
              color: #606266;

              li {
                margin-bottom: 4px;
                
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }

    .radar-chart {
      width: 500px;
      height: 350px;
     /*  background: #fff; */
      border-radius: 8px;
      /* border: 1px solid #EBEEF5; */
      padding: 20px;
     /*  margin-right: 20px; */
      
      .radar {
        width: 100%;
        height: 100%;
      }

      :deep(.echarts-tooltip) {
        display: none; // 隐藏tooltip
      }
    }
  }

  .ability-quality {
    margin-top: 30px;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
    
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      padding-bottom: 16px;
 /*      border-bottom: 1px solid #eee; */

      .score-text {
        font-size: 14px;
        color: #f56c6c;
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .quality-details {
      margin-top: 20px;

      .quality-item {
        display: flex;
        gap: 24px;
        
        .quality-left, .quality-right {
            .icon-box{
                display: flex;
                align-items: center;
                .icon {
                    width: 32px;
                    height: 32px;
                    border-radius: 4px;
                    flex-shrink: 0;
                    margin-right: 12px;
                } 
                h5{
                    margin-bottom: 0;
                }
            }
          flex: 1;
          display: flex;
          align-items: flex-start;
          gap: 12px;
          
          

          .advantage-icon {
            /* background: #67C23A; */
          }

          .suggestion-icon {
            /* background: #E6A23C; */
          }

          .content {
            flex: 1;
            
            h4 {
              margin: 0 0 12px 0;
              font-size: 14px;
              color: #333;
            }

            p {
              margin: 0;
              font-size: 14px;
              line-height: 1.6;
              color: #666;
            }
          }
        }
      }
    }
  }

  .detailed-evaluation {
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    background: #f8f8f8;
    position: relative;
    .line-info {
      color: #9b9b9b;
      .line-info-left {
        position: absolute;
        left: 30%;
        top: 0;
      }
      .line-info-center {
        position: absolute;
        left: 62%;
        top: 0;
      }
      .line-info-right {  
        position: absolute;
        left: 73%;
        top: 0;
      }
    }
    .line-chart {
      .line-chart-left {
        width: 1px;
        height: 91%;
        border-left: 1px solid #e1e1e1;
        position: absolute;
        left: 10%;
        
        margin-left: 20px;
      }
        .line_left {
          width: 1px;
          height: 90%;
          border-left: 1px dashed #e1e1e1;
          position: absolute;
          left: 56%;
          /* top: 0; */

        }
        .line_center {
          width: 1px;
          height: 90%;
          border-left: 1px dashed #e1e1e1;
          position: absolute;
          left: 69%;
          /* margin-left: 6px; */
        }
        .line_right {
          width: 1px;
          height: 90%;
          border-left: 1px dashed #e1e1e1;
          position: absolute;
          left: 77%;
          margin-left: 6px;
        }
      }

    .ability-scores {
      .ability-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .ability-name {
          width: 100px;
          margin-right: 20px;
          font-size: 14px;
          color: #333;
        }

        .progress-bar {
          flex: 1;
          
          :deep(.el-progress) {
            .el-progress-bar__outer {
              background-color: #E5E5E5 !important;
              height: 6px !important;
            }

            .el-progress-bar__inner {
              border-radius: 3px;
              background: linear-gradient(to right, #f7681d, #fdd1bb) !important;
            }
            .progress-bar-custom .el-progress-bar__inner {
              background: linear-gradient(to right, #00b050, #6aff05) !important;
            }
            
            // 修改分数文字样式
            .el-progress__text {
              color: #666;
              font-size: 14px !important;
              min-width: 35px;
            }
          }
        }

        &:last-child {
          .progress-bar {
            :deep(.el-progress) {
              .el-progress-bar__inner {
                background-color: #67C23A !important;
              }
            }
          }
        }
      }
    }
  }

  .detection-section,
  .psychology-section,
  .body-detection-section {
    .detection-section-header{
      display: flex;
    align-items: flex-start;
    justify-content: space-between;
    }
    margin-top: 20px;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 8px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 16px;
    }

    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 2px;
      font-size: 12px;
      
      &.normal {
        font-size: 14px;
        /* background: #67C23A; */
        color: #67C23A;
      }
    }
  }
  .detection-section-content{
   display: flex;
   justify-content: space-between;
   gap: 16px;
  .detection-items {
    margin: 16px 0;

    .item {
      margin-bottom: 8px;
      font-size: 14px;

      .status {
        &.normal {
          color: #67C23A;
        }
      }

      .separator {
        margin: 0 8px;
        color: #DCDFE6;
      }

      .desc {
        color: #606266;
      }
    }
  }

  .risk-standards {
    margin-top: 16px;
    
    .standards-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 12px;
    }

    .standard-item {
      margin-bottom: 8px;
      font-size: 14px;
      
      .level {
        color: #333;
      }
      
      .desc {
        color: #606266;
      }
    }
  }

  }
  .psychology-section {
    .psychology_box{
      display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    }
    .duv-score {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 16px 0;
      
      .score {
        font-size: 24px;
        color: #81b337;
        font-weight: bold;
      }
    }

    .psychology-desc {
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
    }

    .psychology-recommendation {
      margin-top: 16px;
      font-size: 14px;
      
      .label {
        color: #333;
        font-weight: 500;
      }
      
      .value {
        color: #409EFF;
      }
    }
  }

  .body-detection-section {
    .hand-verification {
      .grid {
        @apply gap-4;
      }
      
      .aspect-square {
        @apply relative;
        padding-top: 100%;
        
        img {
          @apply absolute inset-0 w-full h-full object-cover;
        }
      }
    }

    .detection-results {
      .detection-item {
        @apply p-4 bg-gray-50 rounded-lg;
        
        .position {
          @apply font-medium text-gray-700 mr-2;
        }
        
        .status {
          font-weight: 500;
          
          &.status-normal {
            color: #67C23A;  // 绿色
          }
          
          &.status-error {
            color: #F56C6C;  // 红色
          }
        }
        
        .description {
          @apply block mt-1;
        }
      }
    }
  }

  .nav-tabs {
    position: sticky;
    top: 0;
    display: flex;
    gap: 32px;
    margin: 20px 0;
    padding: 0 20px;
    border: none;
    margin-bottom: 2px;
   /*  border-bottom: 1px solid #EBEEF5; */
    background: #fff;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;

    &.fixed {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .tab-item {
      position: relative;
      padding: 5px 22px;
      font-size: 14px;
      color: #606266;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 15px;

      &:hover {
        color: #409EFF;
        background: #f2f3f8;
      }

      &.active {
        color: #409EFF;
        font-weight: 500;
        background: #f2f3f8;

        &::after {
          display: none;
        }
      }

      &.link-tab {
        display: flex;
        align-items: center;
        gap: 4px;
        
        i {
          font-size: 12px;
        }

        &:hover {
          color: #409EFF;
          text-decoration: underline;
        }
      }

      &.info-tab {
        display: flex;
        align-items: center;
        gap: 4px;
        
        i {
          font-size: 14px;
        }

        &:hover {
          color: #409EFF;
        }
      }
    }
  }

  // 修改占位元素样式
  .nav-placeholder {
    margin: 20px 0;
    transition: height 0.3s ease;
  }
}

.loading-state,
.error-state {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error-state {
  color: #F56C6C;
}

.redline-section {
  margin-top: 16px;
  padding: 16px;
  background-color: #FFF6F6;
  border-radius: 4px;

  .redline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .redline-title {
      color: #F56C6C;
      font-size: 14px;
      font-weight: 500;
    }

    .status-normal {
      color: #67C23A;
      font-size: 14px;
    }

    .status-warning {
      color: #F56C6C;
      font-size: 14px;
    }
  }

  .failed-questions {
    text-align: left !important;
    .failed-title {
    text-align: left;
      color: #606266;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .failed-list {
    text-align: left;
      padding-left: 8px;
      
      .failed-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px;
        color: #606266;
        font-size: 14px;
        line-height: 1.5;
 text-align: left;
        &:last-child {
          margin-bottom: 0;
        }

        .bullet {
          color: #F56C6C;
          margin-right: 8px;
          font-size: 16px;
          line-height: 1;
        }

        .question-text {
          flex: 1;
        }
      }
    }
  }
}

.hand-verification {
  .grid {
    @apply gap-4;
  }
  
  .aspect-square {
    @apply relative;
    padding-top: 100%;
    
    img {
      @apply absolute inset-0 w-full h-full object-cover;
    }
  }
}

.detection-results {
  .detection-item {
    @apply p-4 rounded-lg;
    
    .position {
      @apply font-medium text-gray-700 mr-2;
    }
    
    .status {
      font-weight: 500;
      
      &.status-normal {
        color: #67C23A;  // 绿色
      }
      
      &.status-error {
        color: #F56C6C;  // 红色
      }
    }
    
    .description {
      @apply block mt-1;
    }
  }
}

// 添加一些额外的样式来处理图片加载失败的情况
.aspect-square {
  background: #f5f5f5;
  
  img {
    &[src="/@/assets/default-image.png"] {
      object-fit: contain;
      padding: 20%;
    }
  }
}

// 添加顶部标识栏样式
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 80px;
  padding: 5px 24px;
  background: url("/@/assets/report.png") no-repeat center center;
  background-size: 100% 100%;
  color: #fff;
  position: relative;
  width: 1200px;
    margin: 0 auto;
    border-radius: 5px;
  .header-left {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    color: #000;
    padding: 5px 40px;
    background-color: #fff;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    border-top-right-radius: 60px;
    .cc-icon {
      width: 21px;
      height: 12px;
      margin-right: 8px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
    font-size: 14px;
    opacity: 0.8;
    margin-left: 260px;
    span {
      white-space: nowrap;
    }

    .report-id {
      opacity: 0.8;
    }
  }
}

// 添加媒体查询和响应式样式
@media screen and (max-width: 768px) {
  .outer-container {
    padding: 0;
  }

  .report-header {
    height: auto;
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    .header-right {
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }
  }

  .report-container {
    padding: 16px;

    .header {
      flex-direction: column;
      gap: 16px;

      .header-left {
        .avatar {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          display: block;
        }
      }

      .header-right {
        flex-direction: column;
        padding: 16px;

        .left-section,
        .right-section {
          width: 100%;
        }

        .stamp {
          position: static;
          transform: none;
          margin-top: 16px;
          text-align: center;

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }

    .nav-tabs {
      gap: 16px;
      padding: 0 12px;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      .tab-item {
        padding: 8px 0;
        font-size: 13px;
      }
    }

    .evaluation-result {
      .score-section {
        padding: 16px;

        .score-section-left {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;

          .detection-results {
            flex-direction: column;
            gap: 8px;

            .separator {
              display: none;
            }
          }
        }
      }
    }

    .ability-quality {
      .quality-details {
        .quality-item {
          flex-direction: column;
          gap: 20px;
        }
      }
    }

    .detailed-evaluation {
     
      .ability-scores {
        .ability-item {
          flex-direction: column;
          gap: 8px;
          margin-bottom: 16px;

          .ability-name {
            width: 100%;
          }
        }
      }
    }

    .detection-section-content {
      flex-direction: column;
      gap: 20px;
    }

    // 手势验证部分响应式处理
    .hand-verification {
      .grid {
        grid-template-columns: 1fr !important;
        gap: 16px;

        h4 {
          margin-top: 16px;
        }
      }
    }
  }

  // 修改心理检测部分在移动端的样式
  .psychology-section {
    .duv-score {
      flex-wrap: wrap;
      
      .score {
        font-size: 20px;
      }
    }
  }

  // 修改红线题部分在移动端的样式
  .redline-section {
    padding: 12px;

    .failed-questions {
      .failed-list {
        .failed-item {
          margin-bottom: 12px;
        }
      }
    }
  }
}

// 添加暗黑模式支持1
/* @media (prefers-color-scheme: dark) {
  .report-container {
    background: #1a1a1a;
    color: #e5e5e5;

    .header-right {
      background: #2a2a2a;
    }

    .nav-tabs {
      background: #1a1a1a;
      border-bottom-color: #333;

      .tab-item {
        color: #e5e5e5;

        &:hover,
        &.active {
          color: #409EFF;
        }
      }
    }

    .evaluation-result,
    .ability-quality,
    .detailed-evaluation,
    .detection-section,
    .psychology-section,
    .body-detection-section {
      background: #2a2a2a;
    }

    .status-normal {
      color: #95d475;
    }

    .status-warning {
      color: #ff7875;
    }
  }
} */

.info-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #EBEEF5;
  }

  :deep(.el-dialog__body) {
    padding: 24px;
  }

  .info-content {
    .info-section {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      h4 {
        font-size: 16px;
        color: #333;
        margin: 0 0 16px 0;
        padding-left: 10px;
        border-left: 3px solid #409EFF;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        .info-item {
          display: flex;
          align-items: center;

          .label {
            width: 80px;
            color: #666;
            font-size: 14px;
          }

          .value {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
  }
}

// 添加移动端适配
@media screen and (max-width: 768px) {
  .info-dialog {
    :deep(.el-dialog) {
      width: 90% !important;
      margin: 20px auto !important;
    }

    .info-content {
      .info-section {
        .info-grid {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}

// 添加弹窗相关样式
.body-verification-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #EBEEF5;
  }

  :deep(.el-dialog__body) {
    padding: 24px;
  }

  // 在弹窗中保持原有的手势验证样式
  .hand-verification {
    .grid {
      @apply gap-4;
    }
    
    .aspect-square {
      @apply relative;
      padding-top: 100%;
      
      img {
        @apply absolute inset-0 w-full h-full object-cover;
      }
    }
  }

  .detection-results {
    .detection-item {
      @apply p-4 bg-gray-50 rounded-lg;
      
      .position {
        @apply font-medium text-gray-700 mr-2;
      }
      
      .status {
        @apply text-green-500;
      }
      
      .description {
        @apply block mt-1;
      }
    }
  }
}

// 添加移动端适配
@media screen and (max-width: 768px) {
  .body-verification-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 10px auto !important;
    }

    .hand-verification {
      .grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
      }
    }

    .detection-results {
      .grid {
        grid-template-columns: 1fr !important;
      }
    }
  }
}

// 确保在移动端也能正常显示
@media screen and (max-width: 768px) {
  .radar-chart {
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
  }
}

// 修改心理测评部分的样式
.psychology-section {
  .psychology_box {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
    align-items: center;

    .psychology_body {
      flex: 1;
    }

    .duv-score {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background: #fff;
      border-radius: 50%;
      color: #81b337;
      gap: 8px;
      span {
        &:first-child {
          font-size: 14px;
          color: #666;
        }

        &.score {
         
          font-size: 48px;
          font-weight: bold;
          color: #81b337;
        }

        &:last-child {
           margin-top: 20px;
          font-weight: bold;
          font-size: 20px;
          color: #81b337;
        }
      }
    }
  }

  .psychology-desc {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .psychology-recommendation {
    font-size: 14px;
    
    .label {
      color: #333;
      font-weight: 500;
    }
    
    .value {
      color: #409EFF;
    }
  }
}

// 添加移动端适配
@media screen and (max-width: 768px) {
  .psychology-section {
    .psychology_box {
      flex-direction: column;
      
      .duv-score {
        width: 100%;
        padding: 16px;
      }
    }
  }
}

// 修改导出按钮样式
.export-btn.fixed-btn {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999;
  padding: 20px 20px;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  
  .el-icon-download {
    font-size: 16px;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
}

// 添加移动端适配
@media screen and (max-width: 768px) {
  .export-btn.fixed-btn {
    right: 20px;
    bottom: 20px;
    padding: 10px 16px;
  }
}

// 修改header-right样式以适应新增按钮
.report-header {
  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .export-btn {
      margin-left: auto; // 将按钮推到最右侧
    }
  }
}

// 添加移动端适配
@media screen and (max-width: 768px) {
  .report-header {
    .header-right {
      flex-wrap: wrap;
      
      .export-btn {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
      }
    }
  }
}

// 添加问答记录相关样式
.qa-section {
  margin-top: 30px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .qa-content {
    .qa-item {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }

    .question-block {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;

      .question-header {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;

        .question-tag {
          padding: 2px 8px;
          background: #e6f7ff;
          color: #1890ff;
          border-radius: 4px;
          font-size: 12px;
        }

        .question-type {
          padding: 2px 8px;
          background: #f5f5f5;
          color: #666;
          border-radius: 4px;
          font-size: 12px;
        }
      }

      h4 {
        font-size: 14px;
        color: #333;
        margin-bottom: 12px;
      }
    }

    .answer-content {
      p {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 8px;
      }

      .score-info {
        color: #1890ff;
        font-size: 14px;

        .analysis {
          color: #666;
          margin-top: 4px;
        }
      }
    }

    .follow-up-questions {
      padding-left: 24px;
      border-left: 2px solid #e8e8e8;

      .follow-up-item {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .follow-up-header {
          margin-bottom: 12px;

          .follow-up-tag {
            padding: 2px 8px;
            background: #f6f3ff;
            color: #722ed1;
            border-radius: 4px;
            font-size: 12px;
          }
        }

        h4 {
          font-size: 14px;
          color: #333;
          margin-bottom: 12px;
        }
      }
    }
  }
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 126px;
  /* aspect-ratio: 3/4; */
  height: 150px;
  margin: 0 auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
// 移动端适配
@media screen and (max-width: 768px) {
  .qa-section {
    padding: 16px;

    .qa-content {
      .follow-up-questions {
        padding-left: 16px;
      }
    }
  }
}
#candidate-answer{
  margin-left: 15px;
  position: relative;
  padding-left: 12px;  // 为竖条留出空间
  &::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: #2a3dae;  // 竖条颜色
    border-radius: 2px;
  }
}

// 添加媒体查询以处理移动端显示
@media screen and (max-width: 768px) {
  .score-section-left {
    flex-wrap: wrap; // 在移动端允许换行
    white-space: normal; // 在移动端允许换行
    
    .detection-results {
      width: 100%;
      flex-wrap: wrap;
      
      .detection-item {
        width: 100%;
        justify-content: flex-start;
      }
      
      .separator {
        display: none; // 在移动端隐藏分隔符
      }
    }
  }
}

// 添加自定义进度条样式
:deep(.custom-progress) {
  .el-progress-bar__outer {
    border-radius: 3px;
    overflow: hidden;
  }
  span{
    font-size: 12px;
    color: #808080;
  }
  
  .el-progress-bar__inner {
    border-radius: 3px;
    position: relative;
    font-size: 12px;
    color: #808080;
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 6px;
      background: inherit;
      filter: brightness(115%);
      border-radius: 0 3px 3px 0;
    }
  }
}
</style>
