<template>
  <div v-loading="loading" element-loading-text="正在加载报告..." class="viewItemFile" id="viewItemFile"  >
    <!-- 第一页 -->
    <div style="page-break-after: always;">
        <div class="report-title">
        <div class="report-title-text">{{summaryData.plan_name}}分析报告</div>
        <div class="report-title-time">报告生成时间: {{ summaryData.report_date }}</div>
        </div>
        <div class="report-box-title">概述:</div>
        <div class="report-box-content">
          {{summaryData.school_name}}本次筛查涉及{{ schoolData.grade_num }}个年级，{{ schoolData.class_num }}个班级，包括学生{{ schoolData.student_num }} 人。最终纳入本次统计有效筛查人数{{ schoolInsighted.total_students }}人，未筛{{schoolInsighted.no_exam}}人，筛查覆盖率为{{schoolInsighted.exam_rate}}%。经统计分析，本校现有近视学生{{schoolInsighted.js}}人，近视率为 {{schoolInsighted.js_rate}}%，高度近视学生{{schoolInsighted.gdjs}}人，高度近视率为{{schoolInsighted.gdjs_rate}}%。
        </div>
        <div class="report-box-title2"> 按性别分类</div>
        <ul>
          <li>男生有效筛查{{schoolInsighted.boy}}人，近视学生{{schoolInsighted.boy_js}}人，近视率为{{schoolInsighted.boy_js_rate}}%，高度近视学生{{schoolInsighted.boy_gdjs}}人，高度近视率为{{schoolInsighted.boy_gdjs_rate}}%。</li>
          <li>女生有效筛查{{schoolInsighted.girl}}人，近视学生{{schoolInsighted.girl_js}}人，近视率为{{schoolInsighted.girl_js_rate}}%，高度近视学生{{schoolInsighted.girl_gdjs}}人，高度近视率为{{schoolInsighted.girl_gdjs_rate}}%。</li>
          <li v-if="schoolInsighted.boy_js_rate < schoolInsighted.girl_js_rate">女生近视率高于男生{{(schoolInsighted.girl_js_rate - schoolInsighted.boy_js_rate).toFixed(2)}}%。</li>
          <li v-if="schoolInsighted.boy_js_rate > schoolInsighted.girl_js_rate">男生近视率高于女生{{(schoolInsighted.boy_js_rate -schoolInsighted.girl_js_rate).toFixed(2)}}%。</li>
          <li v-if="schoolInsighted.boy_js_rate === schoolInsighted.girl_js_rate">女生近视率与男生女生近视率相同。</li>
        </ul>
        <div class="report-box-title2"> 按年级分类</div>
        <ul>
          <li>{{insightedGradeListlabel}}。</li>
          <li v-for="(a,aindex) in insightedGradeList" :key="aindex">
            <span v-if="a.max_data != null && a.max_data != ''">
              {{a.grade_name}}{{a.max_data.class_name}}近视率最高为{{a.max_data.sighted_rate}}%，{{a.min_data.class_name}}近视率最低{{a.min_data.sighted_rate}}%
            </span>
           
          </li>
        </ul>
        <div class="report-box-title">筛查信息:</div> 
        <div>
          <div class="report-box-text">学校名称：{{summaryData.school_name}}</div>
          <div class="report-box-text">地区：{{summaryData.region_name}}</div>
          <div class="report-box-text">筛查计划：{{summaryData.plan_name}}</div>
          <div class="report-box-text">筛查时间：{{summaryData.plan_date}}</div>
        </div>
        <div class="report-box-title">近视整体情况:</div> 
        <div class="report-box-text">本次筛查发现有效筛查{{schoolData.student_num}}人，其分布如下：</div>
        <ul>
          <li>近视人数{{schoolInsighted.js}}人，近视率为{{schoolInsighted.js_rate}}%;男生近视人数{{schoolInsighted.boy_js}}人，近视率为{{schoolInsighted.boy_js_rate}}%;女生近视人数{{schoolInsighted.girl_js}}人，近视率为{{schoolInsighted.girl_js_rate}}%。</li>
          <li>高度近视人数{{schoolInsighted.gdjs}}人，高度近视率为{{schoolInsighted.gdjs_rate}}%；男生高度近视人数{{schoolInsighted.boy_gdjs}}人，高度近视率为{{schoolInsighted.boy_gdjs_rate}}%；女生高度近视人数{{schoolInsighted.girl_gdjs}}人，高度近视率为{{schoolInsighted.girl_gdjs_rate}}%。</li>
        </ul>
        <div class="report-box-chart">
          <div id="echarts1" style="width:400px;height:240px;"></div>
          <div class="report-box-chart-text">
            <div class="report-box-text">
              <div>近视人数(男/女)</div>
              <div>近视率(男/女)</div>
              <div>近视前期人数(男/女)</div>
              <div>近视前期比例(男/女)</div>
              <div>轻度近视人数(男/女)</div>
              <div>轻度近视率(男/女)</div>
              <div>高度近视人数(男/女)</div>
              <div>高度近视率(男/女)</div>
            </div>
            <div class="report-box-text">
              <div>{{schoolInsighted.js}}人( {{schoolInsighted.boy_js}}人/ {{schoolInsighted.girl_js}}人)</div>
              <div>{{schoolInsighted.js_rate}}%( {{schoolInsighted.boy_js_rate}}%/ {{schoolInsighted.girl_js_rate}}%)</div>
              <div>{{schoolInsighted.ddjs}}人( {{schoolInsighted.boy_ddjs}}人/ {{schoolInsighted.girl_ddjs}}人)</div>
              <div>{{schoolInsighted.ddjs_rate}}%( {{schoolInsighted.boy_ddjs_rate}}%/ {{schoolInsighted.girl_ddjs_rate}}%)</div>
              <div>{{schoolInsighted.zdjs}}人( {{schoolInsighted.boy_zdjs}}人/ {{schoolInsighted.girl_zdjs}}人)</div>
              <div>{{schoolInsighted.zdjs_rate}}%( {{schoolInsighted.boy_zdjs_rate}}%/ {{schoolInsighted.girl_zdjs_rate}}%)</div>
              <div>{{schoolInsighted.gdjs}}人( {{schoolInsighted.boy_gdjs}}人/ {{schoolInsighted.girl_gdjs}}人)</div>
              <div>{{schoolInsighted.gdjs_rate}}%( {{schoolInsighted.boy_gdjs_rate}}%/ {{schoolInsighted.girl_gdjs_rate}}%)</div>
            </div>
          </div>
        </div>
        <div class="report-box-text">注：戴角膜塑形镜学生不计入低度、中度、高度近视情况统计。</div>
        <div class="report-box-chartlabel">{{summaryData.school_name}}近视情况</div>
    </div>
    <!-- 第二页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">指导建议:</div> 
          <div>
            <div class="report-box-text">建议学校开展如下工作：</div>
            <ul>
              <li>建立由学校、家庭、专业医疗机构组成的近视防控模式，达成三方共管共助的工作目标。</li>
              <li>根据专业医疗机构完成的检查报告，将眼健康检查信息有效反馈至家长，近视学生推荐其建立屈光发育档案。</li>
              <li>开展多种形式的健康教育活动，每年3、9月设立为近视防控活动主题月，邀请专业医疗机构，组织教师、学生、家长，举办针对各年层的近视防控健康教育课堂，寒暑假期间与专业医疗机构联合举办社会实践活动，利用多种媒介，通过通俗易懂（漫画版眼健康知识手册、漫画版眼健康视频等、班级主题活动、家长会等）的方式，对儿童青少年普及眼健康知识，提高儿童青少年的眼健康保护意识，培养良好的用眼习惯。</li>
              <li>组织教师培训，提升近视防控工作的重视程度。</li>
              <li>加强近视等学生常见病及健康影响因素监测工作，利用大数据、智能便携设备开展学生近视防控的行为干预。</li>
              <li>对各年级、教室光照环境进行检测，改善环境，为学生视觉环境健康提供服务。</li>
              <li>要求各年级学生需达到每天不少于2小时以上的课外活动时间，课间要求学生进行户外远眺放松。</li>
            </ul>
            <div class="report-box-text">建议教师开展如下工作：</div>
            <ul>
              <li>支持、配合、重视学校与专业眼科医疗机构的各项近视防控活动。</li>
              <li>在日常活动中关注学生表现，若出现：看远模糊，看不清黑板上的字或抱怨屋子里的光线太暗、看远处时经常眯眼、读书时眼睛贴的近、频繁眨眼、经常皱眉、经常歪头看物体、看东西时眼睛斜，因尽早提示其家长带学生到专业的眼科医疗机构就诊。</li>
            </ul>
          </div>
          
    </div>
    <!-- 第三页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">近视详细分析报告:</div> 
          <ul style="margin-left:0px;">
            <li  style="list-style: none !important;">{{insightedGradeListlabel}}。</li>
            <li style="list-style: none !important;" v-for="(a,aindex) in insightedGradeList" :key="aindex">
              <span v-if="a.max_data != null && a.max_data != ''">
                {{a.grade_name}}{{a.max_data.class_name}}近视率最高为{{a.max_data.sighted_rate}}%,{{a.min_data.class_name}}近视率最低{{a.min_data.sighted_rate}}%
              </span>
            </li>
          </ul>
          <div class="report-box-text">(班级近视情况见附表)</div>
          <div style="position:relative;padding-left: 20px;"> 
            <div style="position: absolute;transform: rotate(-90deg);top: 142px;left: -5px;font-size: 14px;color: #787878;">人数</div>
            <div id="echarts2" style="width:100%;height: 300px;"></div>
          </div>
          <div class="report-box-chartlabel">{{summaryData.school_name}}各年级男、女生近视情况</div>
    </div>
    <!-- 第四页 -->
    <div style="page-break-after: always;">
          <div class="report-box-charttitle">{{summaryData.school_name}}各年级男、女生近视情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
              <th style="width: 5%;">序号</th>
              <th style="width: 15%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 18%;border-right: 1px dashed #787878;">
                <div>应筛查人数/人</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 18%;border-right: 1px dashed #787878;">
                <div>有效筛查人数</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 18%;border-right: 1px dashed #787878;">
                <div>近视人数</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 18%; border-right: 1px dashed #787878;">
                <div>近视率</div>
                <div>（男/女）</div>
              </th>
            </tr>
            <tr v-for="(item,index) in insightedGradeGexList" :key="index" style="border: 1px dashed #787878;">
              <td>
                <div>{{index + 1}}</div>
                <div></div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item.grade_name}}</div>
                <div></div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{ item.total_students }}</div>
                <div>({{item.total_male}}/{{item.total_female}})</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{ item.valid_students }}</div>
                <div>({{item.valid_male}}/{{item.valid_female}})</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item.nearsighted_total }}</div>
                <div>({{item.nearsighted_male}}/{{item.nearsighted_female}})</div>
              </td>
              <td>
                <div>{{item.nearsighted_rate}}%</div>
                <div>({{item.female_nearsighted_rate}}%/{{item.male_nearsighted_rate}}%)</div>
              </td>
            </tr>
          </table>
          <div style="position:relative;padding-left: 20px;margin-top: 20px;">
            <div style="position: absolute;transform: rotate(-90deg);top: 142px;left: -5px;font-size: 14px;color: #787878;">人数</div>
            <div id="echarts3" style="width:100%;height: 300px;"></div>
          </div>
          <div class="report-box-chartlabel">{{summaryData.school_name}}各年级近视程度分布情况</div>
    </div>
    <!-- 第五页 -->
    <div style="page-break-after: always;">
          <div class="report-box-charttitle">{{summaryData.school_name}}各年级近视程度分布情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
              <th style="width:5%;">序号</th>
              <th style="width: 11%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 14%;border-right: 1px dashed #787878;">
                <div>近视前期人数</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 14%;border-right: 1px dashed #787878;">
                <div>近视前期率</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 14%;border-right: 1px dashed #787878;">
                <div>轻度近视人数</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 14%; border-right: 1px dashed #787878;">
                <div>轻度近视率</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 14%; border-right: 1px dashed #787878;">
                <div>高度近视人数</div>
                <div>（男/女）</div>
              </th>
              <th style="width: 14%; border-right: 1px dashed #787878;">
                <div>高度近视率</div>
                <div>（男/女）</div>
              </th>
            </tr>
            <tr v-for="(item2,index2) in insightedGradeGexLevelList" :key="index2" style="border: 1px dashed #787878;">
              <td>
                <div>{{index2 + 1}}</div>
                <div></div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.grade_name}}</div>
                <div></div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.ddjs}}</div>
                <div>({{item2.boy_ddjs}}/{{item2.girl_ddjs}})</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.ddjs_rate}}%</div>
                <div>({{item2.boy_js_rate}}%/{{item2.girl_ddjs_rate}}%)</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.zdjs}}</div>
                <div>({{item2.boy_zdjs}}/{{item2.girl_zdjs}})</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.zdjs_rate}}%</div>
                <div>({{item2.boy_zdjs_rate}}%/{{item2.girl_zdjs_rate}}%)</div>
              </td>
              <td style="border-right: 1px dashed #787878;">
                <div>{{item2.gdjs}}</div>
                <div>({{item2.boy_gdjs}}/{{item2.girl_gdjs}})</div>
              </td>
              <td>
                <div>{{item2.gdjs_rate}}%</div>
                <div>({{item2.boy_gdjs_rate}}%/{{item2.girl_gdjs_rate}}%)</div>
              </td>
            </tr>
          </table>
          <div style="margin-top: 10px;display: flex;justify-content: space-between;">
            <div style="width:50%;margin-right: 20px;">
              <div id="echarts4" style="width:100%;height: 300px;margin-right: 20px;"></div>
              <div class="report-box-text" style="text-align:center;">图1-1 {{summaryData.school_name}}各年级近视率变化趋势</div>
            </div>
            <div style="width:50%;">
              <div id="echarts5" style="width:100%;height: 300px;"></div>
              <div class="report-box-text" style="text-align:center;">图1-2 {{summaryData.school_name}}各年级高度近视率变化趋势</div>
            </div>
          </div>
    </div>
    <!-- 第六页 -->
    <!-- 第七页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">视力分布情况</div> 
          <div style="position:relative;padding-left: 20px;margin-top: 20px;">
            <div style="position: absolute;transform: rotate(-90deg);top: 142px;left: -5px;font-size: 14px;color: #787878;">眼数</div>
            <div id="echarts6" style="width:100%;height: 300px;"></div>
          </div>
          <div class="report-box-chartlabel">{{summaryData.school_name}}各年级近视程度分布情况</div>
    </div>
    <!-- 第8页 -->
    <div style="page-break-after: always;">
          <div class="report-box-charttitle">{{summaryData.school_name}}视力分布情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
            <th style="width:25%;border-right: 1px dashed #787878;">序号</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">视力</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">眼数</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">百分比</th>
            </tr>
            <tr v-for="(item3,index3) in eyedataVisionGroupList" :key="index3" style="border: 1px dashed #787878;">
              <td style="border-right: 1px dashed #787878;">{{ index3 + 1 }}</td>
              <td style="border-right: 1px dashed #787878;">{{item3.vision_group}}</td>
              <td style="border-right: 1px dashed #787878;">{{item3.eye_count}}</td>
              <td style="border-right: 1px dashed #787878;">{{item3.eye_percentage}}%</td>
            </tr>
           </table>
    </div>
    <!-- 第9页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">屈光度分布情况</div>
          <div class="report-box-text">等效球镜为衡量屈光水平的参数，计算公式为:等效球镜=球镜+1/2柱镜。等效球镜为0表示正视水平，正值表示远视水平，负值 表示近视水平。</div>
          <div style="position:relative;padding-left: 20px;margin-top: 20px;">
            <div style="position: absolute;transform: rotate(-90deg);top: 180px;left: -5px;font-size: 14px;color: #787878;">眼数</div>
            <div id="echarts7" style="height:400px;width:100%;"></div>
          </div>
          <div class="report-box-chartlabel">{{summaryData.school_name}}屈光度分布情况</div>
          <div class="report-box-charttitle">{{summaryData.school_name}}屈光度分布情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
            <th style="width:25%;border-right: 1px dashed #787878;">序号</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">球镜</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">等效球镜</th>
            </tr>
            <tr v-for="(item4,index4) in avgStdList" :key="index4" style="border: 1px dashed #787878;">
              <td style="border-right: 1px dashed #787878;">{{ index4 + 1 }}</td>
              <td style="border-right: 1px dashed #787878;">{{item4.grade_name}}</td>
              <td style="border-right: 1px dashed #787878;">{{item4.avg_sph}}±{{item4.std_dev_sph}}</td>
              <td>{{item4.avg_se}}±{{item4.std_dev_se}}</td>
            </tr>
            <tr>
              <td style="border-right: 1px dashed #787878;">注：平均值±标准差</td>
              <td style="border-right: 1px dashed #787878;"></td>
              <td style="border-right: 1px dashed #787878;"></td>
              <td></td>
            </tr>
           </table>
    </div>
    <!-- 第10页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">远视储备、远视情况</div>
          <div class="report-box-content">依照眼科及视光学常规认知，远视储备的清零年纪为12周岁。</div>
          <div class="report-box-content">各年龄段的标准远视储备值参考如下：</div> 
          <div style="display: flex;font-size:14px;margin-left:10px;">
            <div style="width:150px;">
              <div>年龄</div>
              <div>3岁</div>
              <div>4岁</div>
              <div>5岁</div>
              <div>6岁</div>
              <div>7岁</div>
              <div>8岁</div>
              <div>9岁</div>
              <div>10岁</div>
              <div>11岁</div>
              <div>12岁</div>
            </div>
            <div>
              <div>标准远视储备值</div>
              <div>+2.25D</div>
              <div>+2.00D</div>
              <div>+1.75D</div>
              <div>+1.50D</div>
              <div>+1.25D</div>
              <div>+1.00D</div>
              <div>+0.75D</div>
              <div>+0.50D</div>
              <div>+0.25D</div>
              <div>0</div>
            </div>
          </div>
          <div class="report-box-content">因此，12周岁以前的远视（在排除DS≥＋3.00D,即疑似弱视的情况下）可视作远视储备；12周岁之后的远视即视作屈光不正（远视）。</div>
          <div v-if="hyperopiasum.student_count!== undefined" class="report-box-content">经查，本次计入统计范围（12周岁以后的学生不计入）的学生{{hyperopiasum.student_count}}人，有远视储备的学生{{hyperopiasum.sufficient_count}}人，远视储备率为{{hyperopiasum.sufficient_percentage}}%；远视学生{{hyperopiasum.hyperopia_count}}人，远视率为{{hyperopiasum.hyperopia_percentage}}%</div>
          <ul style="margin-left:0px;">
            <li style="list-style: none !important;">{{hyperopiaGradeListlabel}}。</li>
            <li  v-for="(b,bindex) in hyperopiasumlist" :key="bindex" style="list-style: none !important;">
              <span v-if="b.max_sufficient_rate != null && b.max_sufficient_rate != ''">{{b.grade_name}}{{b.max_sufficient_rate.class_name}}远视储备率最高为{{b.max_sufficient_rate.insufficient_rate}}%,{{b.min_sufficient_rate.class_name}}远视储备率最低{{b.min_sufficient_rate.insufficient_rate}}%</span>
            </li>
          </ul>
        <ul style="margin-top:10px;list-style-type: none !important;">
          <li style="list-style: none !important;">{{hyperopiaGradeListlabel2}}。</li>
          <li v-for="(b,bindex) in hyperopiasumlist" :key="bindex" style="list-style: none !important;">
            <span  v-if="b.min_hyperopia_rate != null && b.min_hyperopia_rate != ''">{{b.grade_name}}{{b.max_hyperopia_rate.class_name}}远视率最高为{{b.max_hyperopia_rate.insufficient_rate}}%,{{b.min_hyperopia_rate.class_name}}远视率最低{{b.min_hyperopia_rate.insufficient_rate}}%</span>
          </li>
        </ul>
    </div>
    <div style="page-break-after: always;">
      <div style="position:relative;padding-left: 20px;">
          <div style="position: absolute;transform: rotate(-90deg);top: 180px;left: -5px;font-size: 14px;color: #787878;">人数</div>
          <div id="echarts8" style="height:400px;width:100%;"></div>
        </div>
        <div class="report-box-charttitle">{{summaryData.school_name}}远视储备、远视情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
            <th style="width:5%;border-right: 1px dashed #787878;">序号</th>
              <th style="width: 31%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 31%;border-right: 1px dashed #787878;">远视储备人数/远视储备率</th>
              <th style="width: 31%;border-right: 1px dashed #787878;">远视人数/远视率</th>
            </tr>
            <tr v-for="(item5,index5) in hyperopiaGradeList" :key="index5" style="border: 1px dashed #787878;">
              <td style="border-right: 1px dashed #787878;">{{ index5 + 1 }}</td>
              <td style="border-right: 1px dashed #787878;">{{ item5.grade_name }}</td>
              <td style="border-right: 1px dashed #787878;">{{item5.sufficient_count}}/{{item5.sufficient_percentage}}%</td>
              <td>{{item5.hyperopia_count}}/{{item5.hyperopia_percentage}}%</td>
            </tr>
           </table>
        </div>
    <!-- 第10页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">远视储备不足情况</div>
          <div class="report-box-content">以上表为判定标准，考虑筛查设备允差后的远视值仍低于上述标准达0.75D即视作远视储备不足。经查，本次计入统计范围（12周岁以后的学生不计入）的学生{{hyperopiasum.student_count}}人，有远视的学生{{hyperopiasum.hyperopia_count}}人，远视率为{{hyperopiasum.hyperopia_percentage}}%；其中远视储备充足学生{{hyperopiasum.sufficient_count}}人，充足率{{hyperopiasum.sufficient_percentage}}%；远视储备不足的学生{{hyperopiasum.insufficient_count}}人，不足率{{hyperopiasum.insufficient_percentage}}%。</div>
          <ul style="margin-top:10px;list-style-type: none !important;">
            <li style="list-style: none !important;">{{hyperopiaGradeListlabel3}}。</li>
            <li v-for="(b,bindex) in hyperopiasumlist" :key="bindex" style="list-style: none !important;">
            <span v-if="b.max_insufficient_rate != null && b.max_insufficient_rate != ''">{{b.grade_name}}{{b.max_insufficient_rate.class_name}}远视储备不足率最高为{{b.max_insufficient_rate.insufficient_rate}}%,{{b.min_insufficient_rate.class_name}}远视储备不足率最低{{b.min_insufficient_rate.insufficient_rate}}%</span>
          </li>
            <li v-for="(b,bindex) in hyperopiasumlist" :key="bindex" style="list-style: none !important;">
              <span v-if="b.max_hyperopia_rate != null && b.max_hyperopia_rate != ''">{{b.grade_name}}{{b.max_hyperopia_rate.class_name}}远视率最高为{{b.max_hyperopia_rate.sufficient_rate}}%,{{b.min_hyperopia_rate.class_name}}远视率最低{{b.min_hyperopia_rate.sufficient_rate}}%</span>
            </li>
          </ul>
          <div style="position:relative;padding-left: 20px;margin-top: 20px;">
            <div style="position: absolute;transform: rotate(-90deg);top: 180px;left: -5px;font-size: 14px;color: #787878;">人数</div>
            <div id="echarts9" style="height:400px;width:100%;"></div>
          </div>
          <div class="report-box-charttitle">{{summaryData.school_name}}远视储备不足情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
            <th style="width:5%;border-right: 1px dashed #787878;">序号</th>
              <th style="width: 25%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 35%;border-right: 1px dashed #787878;">远视储备不足人数/远视储备不足率</th>
              <th style="width: 35%;border-right: 1px dashed #787878;">远视人数/远视率</th>
            </tr>
            <tr v-for="(item6,index6) in hyperopiaGradeList" :key="index6" style="border: 1px dashed #787878;">
              <td style="border-right: 1px dashed #787878;">{{ index6 + 1 }}</td>
              <td style="border-right: 1px dashed #787878;">{{ item6.grade_name }}</td>
              <td style="border-right: 1px dashed #787878;">{{item6.insufficient_count}}/{{item6.insufficient_percentage}}%</td>
              <td>{{item6.hyperopia_count}}/{{item6.hyperopia_percentage}}%</td>
            </tr>
           </table>
    </div>
    <!-- 第11页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">视力不良情况</div>
          <div class="report-box-content">裸眼视力≥5.0为视力正常，≤4.9为视力不良，其中裸眼视力=4.9为轻度视力不良，4.6≤裸眼视力≤4.8为中度视力不良，裸眼视力≤4.5为重度视力不良。（视力不良情况以视力已筛查学生作为计算基数）</div>
          <div style="position:relative;padding-left: 20px;margin-top: 20px;">
            <div style="position: absolute;transform: rotate(-90deg);top: 180px;left: -5px;font-size: 14px;color: #787878;">人数</div>
            <div id="echarts10" style="height: 400px;width:100%"></div>
          </div>
          <div class="report-box-chartlabel">{{summaryData.school_name}}视力不良情况</div>
          <div class="report-box-charttitle">{{summaryData.school_name}}视力不良情况</div>
          <table style="width:100%;border: 1px solid #787878;">
            <tr style="border-bottom: 1px solid #787878;">
            <th style="width:5%;border-right: 1px dashed #787878;">序号</th>
              <th style="width: 15%;border-right: 1px dashed #787878;">年级</th>
              <th style="width: 16%;border-right: 1px dashed #787878;">视力已筛查人数</th>
              <th style="width: 16%;border-right: 1px dashed #787878;">轻度视力不良人数/百分比</th>
              <th style="width: 16%;border-right: 1px dashed #787878;">中度视力不良人数/百分比</th>
              <th style="width: 16%;border-right: 1px dashed #787878;">重度视力不良人/百分比</th>
              <th style="width: 16%;border-right: 1px dashed #787878;">总视力不良人数/百分比</th>
            </tr>
            <tr v-for="(item7,index7) in poorGradeList" :key="index7" style="border: 1px dashed #787878;">
              <td style="border-right: 1px dashed #787878;">{{ index7 + 1 }}</td>
              <td style="border-right: 1px dashed #787878;">{{ item7.grade_name }}</td>
              <td style="border-right: 1px dashed #787878;">{{ item7.total_students }}</td>
              
              <td style="border-right: 1px dashed #787878;">{{item7.poor_low}}/{{item7.poor_low_rate}}%</td>
              <td style="border-right: 1px dashed #787878;">{{item7.poor_medium}}/{{item7.poor_medium_rate}}%</td>
              <td style="border-right: 1px dashed #787878;">{{item7.poor_heigh}}/{{item7.poor_heigh_rate}}%</td>
              <td >{{item7.poor}}/{{item7.poor_rate}}%</td>
            </tr>
           </table>
    </div>
    <!-- 第12页 -->
    <div style="page-break-after: always;">
          <div class="report-box-title">注释：</div>
          <div class="report-box-content" style="text-indent:0;">本报表计算方法来自国家卫生健康委员会颁布的《儿童青少年近视防控适宜技术指南》以及《中小学生屈光不正筛查规范 》。近视判断标准为：裸眼视力＜5.0且非睫状肌麻痹下电脑验光等效球镜度数＜-0.50D；同时，确认为佩戴角膜塑形镜的受检者计入近视样本。因器质性眼病变、损伤等原因导致的单眼或双眼视力低下的学生不纳入统计分析，调查人数为数据清理之后的有效调查样本人数。</div>
          <div class="report-box-title">名词释义：</div>
          <div class="report-box-content" style="text-indent:0;">1、近视：单眼裸眼视力＜5.0，且等效球镜＜-0.5D</div>
          <div class="report-box-content" style="text-indent:0;">2、近视率：近视人数占有效筛查人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">3、总筛查率：完成视力和屈光筛查人数占应筛查人数百分比</div>
          <div class="report-box-content" style="text-indent:0;">4、视力筛查率：完成视力筛查人数占应筛查人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">5、屈光筛查率：完成屈光筛查人数占应筛查人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">6、近视前期：单眼视力＜5.0，且-3.0D≤等效球镜＜-0.5D</div>
          <div class="report-box-content" style="text-indent:0;">7、轻度近视：单眼视力＜5.0，且-6.0D≤等效球镜＜-3.0D</div>
          <div class="report-box-content" style="text-indent:0;">8、高度近视：单眼视力＜5.0，且等效球镜＜-6.0D</div>
          <div class="report-box-content" style="text-indent:0;">9、近视足矫：符合近视标准，且双眼矫正视力≥4.9</div>
          <div class="report-box-content" style="text-indent:0;">10、近视欠矫：符合近视标准，且单眼矫正视力＜4.9</div>
          <div class="report-box-content" style="text-indent:0;">11、近视未矫：符合近视标准，且未配戴眼镜，包括框架眼镜、隐形眼镜、角膜塑形镜等</div>
          <div class="report-box-content" style="text-indent:0;">12、足矫率：足矫人数占近视人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">13、欠矫率：欠矫人数占近视人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">14、未矫率：未矫人数占近视人数的百分比</div>
          <div class="report-box-content" style="text-indent:0;">15、远视储备：10岁及以下儿童生理情况下眼屈光为远视状态，并随年龄增长向正视化转变。6岁及以下儿童，眼屈光在100-300度之间（等效球镜为1.00D-3.00D）；6-10岁儿童，眼屈光在25-300度之间（等效球镜为0.25D-3.00D）</div>
          <div class="report-box-content" style="text-indent:0;">16、远视：裸眼视力＜5.0，等效球镜＞3.0D为疑似远视，建议至医院复查</div>
          <div class="report-box-content" style="text-indent:0;">17、散光：裸眼视力＜5.0，柱镜＜-1.0D为疑似散光，建议至医院复查</div>
    </div>
    <!-- 第13页 -->
    <div style="page-break-after: always;">
      <div v-for="(item8,index8) in insightedAllList" :key="index8" >
      <div v-if="index8 === 0" class="report-box-title">附: 班级近视情况</div>
        <div class="report-box-charttitle">{{summaryData.school_name}}{{item8.grade_name}}男、女生近视情况</div>
            <table style="width:100%;border: 1px solid #787878;">
              <tr style="border-bottom: 1px solid #787878;">
                <th style="width: 5%;">序号</th>
                <th style="width: 15%;">年级</th>
                <th style="width: 10%;border-right: 1px dashed #787878;">班级名称</th>
                <th style="width: 18%;border-right: 1px dashed #787878;">
                  <div>近视人数/人</div>
                  <div>（男/女）</div>
                </th>
                <th style="width: 18%;border-right: 1px dashed #787878;">
                  <div>近视率</div>
                  <div>（男/女）</div>
                </th>
                <th style="width: 18%;border-right: 1px dashed #787878;">
                  <div>高度近视人数</div>
                  <div>（男/女）</div>
                </th>
                <th style="width: 18%; border-right: 1px dashed #787878;">
                  <div>高度近视率</div>
                  <div>（男/女）</div>
                </th>
              </tr>
              <tr v-for="(item9,index9) in item8.items" :key="index9" style="border: 1px dashed #787878;">
                <td>
                  <div>{{index9 + 1}}</div>
                  <div></div>
                </td>
                <td>
                  <div>{{item9.grade_name}}</div>
                  <div></div>
                </td>
                <td style="border-right: 1px dashed #787878;">
                  <div>{{item9.class_name}}</div>
                  <div></div>
                </td>
                <td style="border-right: 1px dashed #787878;">
                  <div>{{ item9.js }}</div>
                  <div>({{item9.boy_js}}/{{item9.girl_js}})</div>
                </td>
                <td style="border-right: 1px dashed #787878;">
                  <div>{{ item9.js_rate }}%</div>
                  <div>({{item9.boy_js_rate}}%/{{item9.girl_js_rate}}%)</div>
                </td>
                <td style="border-right: 1px dashed #787878;">
                  <div>{{item9.gdjs }}</div>
                  <div>({{item9.boy_gdjs}}/{{item9.girl_gdjs}})</div>
                </td>
                <td>
                  <div>{{item9.gdjs_rate}}%</div>
                  <div>({{item9.boy_gdjs_rate}}%/{{item9.girl_gdjs_rate}}%)</div>
                </td>
              </tr>
            </table>
    </div>
    </div>
    <!-- 第14页 -->
    <div>
      <div v-for="(item11,index11) in poorAllList" :key="index11">
        <div v-if="index11 === 0" class="report-box-title">附: 班级视力不良情况</div>
          <div class="report-box-charttitle">{{summaryData.school_name}}{{item11.grade_name}}视力不良情况</div>
            <table style="width:100%;border: 1px solid #787878;">
              <tr style="border-bottom: 1px solid #787878;">
                <th style="width: 5%;">序号</th>
                <th style="width: 10%;">年级</th>
                <th style="width: 10%;border-right: 1px dashed #787878;">班级名称</th>
                <th style="width: 15%;border-right: 1px dashed #787878;">视力已筛查人数</th>
                <th style="width: 15%;border-right: 1px dashed #787878;">轻度视力不良人数/百分比</th>
                <th style="width: 15%;border-right: 1px dashed #787878;">中度视力不良人数/百分比</th>
                <th style="width: 15%;border-right: 1px dashed #787878;">重度视力不良人数/百分比</th>
                <th style="width: 15%;border-right: 1px dashed #787878;">总视力不良人数/百分比</th>
              </tr>
              <tr v-for="(item13,index13) in item11.items" :key="index13" style="border: 1px dashed #787878;">
                <td>{{index13 + 1}}</td>
                <td>{{item13.grade_name}}</td>
                <td style="border-right: 1px dashed #787878;">{{item13.class_name}}</td>
                <td style="border-right: 1px dashed #787878;">{{item13.total_students}}</td>
                <td style="border-right: 1px dashed #787878;">{{item13.poor_low}}/{{item13.poor_low_rate}}%</td>
                <td style="border-right: 1px dashed #787878;">{{item13.poor_medium}}/{{item13.poor_medium_rate}}%</td>
                <td style="border-right: 1px dashed #787878;">{{item13.poor_heigh}}/{{item13.poor_heigh}}%</td>
                <td style="border-right: 1px dashed #787878;">{{item13.poor}}/{{item13.poor_rate}}%</td>
              </tr>
            </table>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
// import { getSchoolCheckReportData } from "@/api/planscreening";
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const route = useRoute();
const loading = ref(false)
const nowtime = ref('')
const querylist = ref({})
const option = ref({
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: [0, '60%'],
      data: [
        { value: 0, name: '前期',itemStyle: {color:'rgb(106,220,176)'} },
        { value: 0, name: '轻度',itemStyle: {color:'rgb(111,152,247)'} },
        { value: 0, name: '高度',itemStyle: {color:'rgb(110,125,156)'} },
      ],
      itemStyle: {
        normal: {
          borderColor: 'white', // 边框颜色
          borderWidth: 1       // 边框宽度
        }
      },
      label: {
        position: 'inner',
        fontSize: 10,
        color:'#fff'
      },
      labelLine: {
        show: false
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
      { value: 0, name: '近视',itemStyle: {color:'rgb(190,232,255)'} },
      { value: 0, name: '非近视',itemStyle: {color:'rgb(134,204,254)'} },
      ],
      animation: false,   //去掉动画效果
      silent: true,
      itemStyle: {
        normal: {
          borderColor: 'white', // 边框颜色
          borderWidth: 1       // 边框宽度
        }
      },
      label: {
        show: true, // 显示标签
        position: 'outside', // 标签显示的位置，'outside' 表示标签在扇形外侧
        formatter: '{b}\n(人) {c} ({d}%)' ,// 标签文本格式器，此处 {b} 表示数据名，{c} 表示数据值，{d} 表示百分比
        fontSize: 14,
        color:'#000'
      }
    },
  ]
})
const option2 = ref({
  legend: {
    data: ['近视', '男生近视', '女生近视'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '近视',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '男生近视',
      type: 'bar',
      data: [],
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '女生近视',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(101,119,152)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option3 = ref({
  legend: {
    data: ['近视前期', '轻度近视', '高度近视'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '近视前期',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '轻度近视',
      type: 'bar',
      data: [],
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '高度近视',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(101,119,152)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option4 = ref({
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel:{
      interval :0,
      rotate: 38
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function(value) {
        return (value).toFixed(2) + '%';
      }
    }
  },
  series: [
    {
      data: [],
      type: 'line',
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option5 = ref({
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel:{
      interval :0,
      rotate: 38
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function(value) {
        return (value).toFixed(2) + '%';
      }
    }
  },
  series: [
    {
      data: [],
      type: 'line',
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option6 = ref({
  grid: {
    left: '0%',
    right: '0%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel:{
      interval :0
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '近视',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      data: [10, 132, 34],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'black'
          }
      },
    },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option7 = ref({
  legend: {
    data: ['等效球镜', '球镜'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel:{
      // interval :0,
      rotate: 38
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '近视前期',
      type: 'bar',
      barWidth: 2, // 设置柱子宽度
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '轻度近视',
      type: 'bar',
      data: [],
      barWidth: 2, // 设置柱子宽度
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option8 = ref({
  legend: {
    data: ['远视人数', '远视储备人数'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '远视人数',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '远视储备人数',
      type: 'bar',
      data: [],
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option9 = ref({
  legend: {
    data: ['远视人数', '远视储备不足人数'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '远视人数',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '远视储备不足人数',
      type: 'bar',
      data: [],
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const option10 = ref({
  legend: {
    data: ['中度视力不良', '重度视力不良'],
    right:10,
    top:10,
    textStyle:{
      color:'#787878'
    },
    icon: 'rect',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '中度视力不良',
      type: 'bar',
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      data: [],
      itemStyle: {
        color:'rgb(99,149,249)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    },
    {
      name: '重度视力不良',
      type: 'bar',
      data: [],
      barWidth: 30, // 设置柱子宽度
      barGap: 0,
      itemStyle: {
        color:'rgb(98,218,171)'
      },
      animation: false,   //去掉动画效果
      silent: true,
    }
  ]
})
const popTitle = ref(userStore.title)
onMounted(()=>{
    loading.value = true
    if(route.query.planId !=undefined) {
      querylist.value = route.query
      init()
    }
    window.addEventListener('message', (event) => {
    // if(event.data.planId !== undefined){
    //   querylist.value = event.data
    //   loading.value = true
    //   init()
    // }
    if (event.data.action === 'exportpdf') {
      exportpdf()
    }
    if (event.data.action === 'parentMethodCalled') {
    // 父页面的方法被iframe调用后的回调
    // console.log('Method in parent has been called');
  }
  });
  window.addEventListener('afterprint', () => {
    window.parent.document.title = userStore.title
  });
  })
const summaryData:any = ref({})
const schoolData:any = ref({})
const schoolInsighted:any = ref({})
const insightedGradeGexList:any = ref([])
const insightedGradeGexLevelList:any = ref([])
const eyedataVisionGroupList:any = ref([])
const eyedataSphSeList:any = ref([])
const avgStdList:any = ref([])
const hyperopiaGradeList = ref([])
const poorGradeList = ref([])
const insightedAllList = ref([])
const poorAllList = ref([])
const insightedGradeList = ref([])
const insightedGradeListlabel = ref('')
const hyperopiaGradeListlabel = ref('')
const hyperopiaGradeListlabel2 = ref('')
const hyperopiaGradeListlabel3 = ref('')
const hyperopiasum:any = ref({})
const hyperopiasumlist = ref([])
function init(){
  // getSchoolCheckReportData(querylist.value).then((res) => {
  //   summaryData.value = res.data.summaryData
  //   popTitle.value = summaryData.value.school_name + '_' + summaryData.value.plan_name + '_'+summaryData.value.report_date 
  //   schoolData.value = res.data.school_data
  //   schoolInsighted.value = res.data.school_insighted[0]
  //   insightedGradeGexList.value = res.data.school_insighted_grade_sex_list
  //   insightedGradeGexLevelList.value = res.data.school_insighted_grade_sex_level_list
  //   eyedataVisionGroupList.value = res.data.school_eyedata_vision_group_list
  //   eyedataSphSeList.value = res.data.school_eyedata_sph_se_list
  //   avgStdList.value = res.data.school_avg_std_list
  //   hyperopiaGradeList.value = res.data.school_hyperopia_grade_list
  //   poorGradeList.value = res.data.school_poor_grade_list
  //   insightedGradeList.value = res.data.school_insighted_grade_list
  //   hyperopiasum.value = hyperopiaGradeList.value[hyperopiaGradeList.value.length - 1]
  //   let labelval = ''
  //   for(let i = 0;i<insightedGradeList.value.length;i++){
  //     if(i !== insightedGradeList.value.length - 1){
  //       labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%，'
  //     }else{
  //       labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%'
  //     }
  //   }
  //   insightedGradeListlabel.value = insightedGradeList.value[0].grade_name +'至'+insightedGradeList.value[insightedGradeList.value.length - 1].grade_name+'近视率分别为' + labelval 
  //   let labelval2 = ''
  //   let labelval3 = ''
  //   let labelval4 = ''
  //   hyperopiasumlist.value = []
  //   for(let j = 0;j<hyperopiaGradeList.value.length - 1;j++){
  //     hyperopiasumlist.value.push(hyperopiaGradeList.value[j])
  //     if(j !== hyperopiaGradeList.value.length - 2){
  //       labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%，'
  //       labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%，'
  //       labelval4 = labelval2 + hyperopiaGradeList.value[j].insufficient_percentage+'%，'
  //     }else{
  //       labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%'
  //       labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%'
  //       labelval4 = labelval4 + hyperopiaGradeList.value[j].insufficient_percentage+'%'
  //     }
  //   }
  //   hyperopiaGradeListlabel.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视储备率分别为' + labelval
  //   hyperopiaGradeListlabel2.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视率分别为' + labelval
  //   hyperopiaGradeListlabel3.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视储备不足率分别为' + labelval
    
  //   insightedAllList.value = splitarr(res.data.school_insighted_grade_class_sex_level_list)
  //   poorAllList.value = splitarr(res.data.school_poor_grade_class_list)
  //   initchart()
  // })
}
function splitarr(dataval:any){
  const groupedItems = dataval.reduce((acc, item) => {  
  const key = item.grade_name;  
  if (!acc[key]) {  
    acc[key] = { grade_name: item.grade_name, items: [] } 
  }  
  acc[key].items.push(item);  
  return acc;  
}, {});  
  return  Object.values(groupedItems)
}
let myChart1:any = null
let myChart2:any = null
let myChart3:any = null
let myChart4:any = null
let myChart5:any = null
let myChart6:any = null
let myChart7:any = null
let myChart8:any = null
let myChart9:any = null
let myChart10:any = null
function initchart(){
  if(myChart1 !== null){
    myChart1.dispose()
  }
  if(myChart2 !== null){
    myChart2.dispose()
  }
  if(myChart3 !== null){
    myChart3.dispose()
  }
  if(myChart4 !== null){
    myChart4.dispose()
  }
  if(myChart5 !== null){
    myChart5.dispose()
  }
  if(myChart6 !== null){
    myChart6.dispose()
  }
  if(myChart7 !== null){
    myChart7.dispose()
  }
  if(myChart8 !== null){
    myChart8.dispose()
  }
  if(myChart9 !== null){
    myChart9.dispose()
  }
  if(myChart10 !== null){
    myChart10.dispose()
  }
  setTimeout(()=>{
    const chartEle: HTMLElement = document.getElementById('echarts1') as HTMLElement;
    const chartEle2: HTMLElement = document.getElementById('echarts2') as HTMLElement;
    const chartEle3: HTMLElement = document.getElementById('echarts3') as HTMLElement;
    const chartEle4: HTMLElement = document.getElementById('echarts4') as HTMLElement;
    const chartEle5: HTMLElement = document.getElementById('echarts5') as HTMLElement;
    const chartEle6: HTMLElement = document.getElementById('echarts6') as HTMLElement;
    const chartEle7: HTMLElement = document.getElementById('echarts7') as HTMLElement;
    const chartEle8: HTMLElement = document.getElementById('echarts8') as HTMLElement;
    const chartEle9: HTMLElement = document.getElementById('echarts9') as HTMLElement;
    const chartEle10: HTMLElement = document.getElementById('echarts10') as HTMLElement;
    option.value.series[0].data[0].value = schoolInsighted.value.ddjs
    option.value.series[0].data[1].value = schoolInsighted.value.zdjs
    option.value.series[0].data[2].value = schoolInsighted.value.gdjs
    option.value.series[1].data[0].value = schoolInsighted.value.js
    option.value.series[1].data[1].value = schoolInsighted.value.total_students - schoolInsighted.value.js
    option.value.series[1].label.formatter=(params:any)=>{
      return params.name+ '\n' + params.value + '人\n' + params.percent+ '%'
    }
    myChart1 = echarts.init(chartEle);
    myChart1.setOption(option.value)
    //第二个图
    option2.value.xAxis.data = []
    option2.value.series[0].data = []
    option2.value.series[1].data = []
    option2.value.series[2].data = []
    for(let i = 0;i<insightedGradeGexList.value.length - 1;i++){
      option2.value.xAxis.data.push(insightedGradeGexList.value[i].grade_name)
      option2.value.series[0].data.push(insightedGradeGexList.value[i].nearsighted_total)
      option2.value.series[1].data.push(insightedGradeGexList.value[i].nearsighted_male)
      option2.value.series[2].data.push(insightedGradeGexList.value[i].nearsighted_female)
    }
    myChart2 = echarts.init(chartEle2);
    myChart2.setOption(option2.value)
    //第三个图
    option3.value.xAxis.data = []
    option3.value.series[0].data = []
    option3.value.series[1].data = []
    option3.value.series[2].data = []
    option4.value.xAxis.data = []
    option4.value.series[0].data = []
    option5.value.xAxis.data = []
    option5.value.series[0].data = []
    for(let j = 0;j<insightedGradeGexLevelList.value.length - 1;j++){
      option3.value.xAxis.data.push(insightedGradeGexLevelList.value[j].grade_name)
      option3.value.series[0].data.push(insightedGradeGexLevelList.value[j].ddjs)
      option3.value.series[1].data.push(insightedGradeGexLevelList.value[j].zdjs)
      option3.value.series[2].data.push(insightedGradeGexLevelList.value[j].gdjs)
      option4.value.xAxis.data.push(insightedGradeGexLevelList.value[j].grade_name)
      option4.value.series[0].data.push(insightedGradeGexLevelList.value[j].js_rate)
      option5.value.xAxis.data.push(insightedGradeGexLevelList.value[j].grade_name)
      option5.value.series[0].data.push(insightedGradeGexLevelList.value[j].gdjs_rate)
    }
    myChart3 = echarts.init(chartEle3);
    myChart3.setOption(option3.value)
   //第四个图
    myChart4 = echarts.init(chartEle4);
    myChart4.setOption(option4.value)
    //第五个图
    myChart5 = echarts.init(chartEle5);
    myChart5.setOption(option5.value)
    //第6个图
    // eyedataVisionGroupList.value
    option6.value.xAxis.data = []
    option6.value.series[0].data = []
    for(let k = 0 ;k< eyedataVisionGroupList.value.length ; k++){
      option6.value.xAxis.data.push(eyedataVisionGroupList.value[k].vision_group)
      option6.value.series[0].data.push(eyedataVisionGroupList.value[k].eye_count)
    }
    myChart6 = echarts.init(chartEle6);
    myChart6.setOption(option6.value)
    option7.value.xAxis.data = []
    option7.value.series[0].data = []
    option7.value.series[1].data = []
    for(let a = 0;a<eyedataSphSeList.value.length;a++){
      option7.value.xAxis.data.push(eyedataSphSeList.value[a].group_value)
      option7.value.series[0].data.push(eyedataSphSeList.value[a].eye_count_se)
      option7.value.series[1].data.push(eyedataSphSeList.value[a].eye_count_sph)
    }
    myChart7 = echarts.init(chartEle7);
    myChart7.setOption(option7.value)
    // 8、9
    option8.value.xAxis.data = []
    option8.value.series[0].data = []
    option8.value.series[1].data = []

    option9.value.xAxis.data = []
    option9.value.series[0].data = []
    option9.value.series[1].data = []
    for(let b = 0;b<hyperopiaGradeList.value.length - 1;b++){
      option8.value.xAxis.data.push(hyperopiaGradeList.value[b].grade_name)
      option8.value.series[0].data.push(hyperopiaGradeList.value[b].hyperopia_count)
      option8.value.series[1].data.push(hyperopiaGradeList.value[b].sufficient_count)

      option9.value.xAxis.data.push(hyperopiaGradeList.value[b].grade_name)
      option9.value.series[0].data.push(hyperopiaGradeList.value[b].hyperopia_count)
      option9.value.series[1].data.push(hyperopiaGradeList.value[b].insufficient_count)
    }
    myChart8 = echarts.init(chartEle8);
    myChart8.setOption(option8.value)
    myChart9 = echarts.init(chartEle9);
    myChart9.setOption(option9.value)

    // 10 poorGradeList.value
    option10.value.xAxis.data = []
    option10.value.series[0].data = []
    option10.value.series[1].data = []
    for(let c = 0;c<poorGradeList.value.length - 1;c++){
      option10.value.xAxis.data.push(poorGradeList.value[c].grade_name)
      option10.value.series[0].data.push(poorGradeList.value[c].poor_medium)
      option10.value.series[1].data.push(poorGradeList.value[c].poor_heigh)
    }
    myChart10 = echarts.init(chartEle10);
    myChart10.setOption(option10.value)
    window.onresize = function () {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
      myChart5.resize()
      myChart6.resize()
      myChart7.resize()
      myChart8.resize()
      myChart9.resize()
      myChart10.resize()
    } 
    loading.value = false 
  },300)
}
function exportpdf(){
  console.log(window);
  window.parent.document.title = popTitle.value
  print();
}
</script>

<style lang="scss" scoped>

.viewItemFile {
.image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
div {
  height: 600px;
  width: 600px;
}
}
.divContent {
  display: flex;
  align-items: center;
  justify-content: center;
}
// :deep(.el-dialog) {
//   margin: 0 !important;
//   height: 100vh !important;
// .el-dialog__footer {
//   margin-bottom: 30px;
//   padding: 0px;
// }
// }
:deep( .el-dialog__body ){
  height: 96%;
  width: 100%;
  padding: 0;
  overflow: auto;
}
}

html body {
  width: 100%;
  height: 100vh;
  margin: 0;
}
.docWrap{
  height: calc(100vh - 150px);
    overflow: auto;
}

:deep(.el-loading-spinner .el-loading-text){
  // color: #079263;
}
:deep(.docx-wrapper>section.docx){
  padding: 40px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 965px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important;
}
:deep(.docx-wrapper>section.docx){
  margin-bottom: 0;
}
.report-content{
  // height: calc(100vh - 150px);
  // overflow: auto;
  // color: #000;
  
}
.report-title{
  width: 100%;
  text-align: center;
  .report-title-text{
    font-size: 22px;
    letter-spacing: 1px;
  }
  .report-title-time{
    font-size: 16px;
    letter-spacing: 1px;
  }
}
  .report-box-title{
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0px;
  }
  .report-box-content{
    font-size: 14px;
    text-indent: 2em;
    //line-height: 1.5em;
    // letter-spacing: 1px;
    margin: 5px 0px;
  }
  .report-box-title2{
    font-size: 16px;
  }
  ul{
    list-style-type: disc !important;
    margin-left: 25px  !important;
    font-size: 14px;
  }
  .report-box-text{
    font-size: 14px;
   // line-height: 1.5em;
    // letter-spacing: 1px;
  }
  .report-box-chart{
    display: flex;
    margin: 10px 0px; 
    justify-content: space-between;
  .report-box-chart-text{
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
 }
 .report-box-chartlabel{
  font-size: 14px;
  line-height: 1.5em;
  //letter-spacing: 1px;
  color: #787878;
  width: 100%;
  text-align: center;
 }
 .report-box-chart2{
  width: 100%;
  padding: 20px;
 }
 .report-box-charttitle{
  font-size: 18px;
 // line-height: 1.5em;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
  margin: 10px 0px;
 }
 .report-box-table{
  width: 100%;
  border-top: 1px solid #787878;
  border-bottom: 1px solid #787878;
  .report-box-tableth{
    width: 100%;
    display: flex;
    border-bottom: 1px solid #787878;
  }
  .report-box-table-tsth{
    display: flex;
    justify-content: space-around;
  }
 }
th,td{
  font-weight: 400;
  text-align: center;
  color: #000;
  font-size:14px;
}
td{

}
:deep(){
  .el-loading-spinner{
    top:340px;
  }
}

@page {  
  margin: 1cm; /* 设置页边距 */  
  @top-left {  
    content: "这是页眉"; /* 设置左上角的页眉内容 */  
  }  
  @top-right {  
    content: "右上角页眉"; /* 设置右上角的页眉内容 */  
  }  
  @bottom-left {  
    content: "左下角页脚"; /* 设置左下角的页脚内容 */  
  }  
  @bottom-right {  
    content: "右下角页脚"; /* 设置右下角的页脚内容 */  
  }  
}
</style>

