<template>
  <layout-card>
    <div class="tr mb">
      <el-button type="primary" @click="data.exportDialogVisible = true">
        导出
      </el-button>
    </div>
    <div>
      <el-divider content-position="left">学时证明</el-divider>
      <table class="archive_print_table">
        <tr>
          <td>姓名</td>
          <td>{{ data.classInfo.STUDENT_NAME }}</td>
        </tr>
        <tr>
          <td>证件类型</td>
          <td>身份证</td>
        </tr>
        <tr>
          <td>证件编号</td>
          <td>{{ data.classInfo.USER_ID_CARD }}</td>
        </tr>
        <tr>
          <td>培训单位名称</td>
          <td>{{ data.classInfo.CORP_NAME }}</td>
        </tr>
        <tr>
          <td>班级名称</td>
          <td>{{ data.classInfo.NAME }}</td>
        </tr>
        <tr>
          <td>培训日期</td>
          <td>
            {{
              data.classInfo.START_TIME
                ? dayjs(data.classInfo.START_TIME).format("YYYY-MM-DD")
                : ""
            }}
            至
            {{
              data.classInfo.END_TIME
                ? dayjs(data.classInfo.END_TIME).format("YYYY-MM-DD")
                : ""
            }}
          </td>
        </tr>
        <tr>
          <td>培训类型</td>
          <td>{{ data.classInfo.TYPENAME }}</td>
        </tr>
        <tr>
          <td>视频学习时长</td>
          <td>
            {{ (data.classInfo.SUMVIDEOTIME / 60).toFixed(1) }}分钟(包含{{
              data.videoList.length
            }}个视频,共{{
              parseFloat(data.classInfo.CLASSHOUR) === 0
                ? 0
                : parseFloat(data.classInfo.CLASSHOUR).toFixed(1)
            }}学时)
          </td>
        </tr>
        <tr>
          <td>
            <div class="chapter_box">
              <div class="chapter_info">
                <div class="chapter_text">培训单位:(盖章)</div>
                <div class="chapter_date">
                  日期:{{ dayjs(data.classInfo.END_TIME).format("YYYY-MM-DD") }}
                </div>
              </div>
              <div class="chapter_img">
                <img :src="data.official_seal_path" />
              </div>
            </div>
          </td>
          <td />
        </tr>
      </table>
    </div>
    <div>
      <el-divider content-position="left">学员学习档案</el-divider>
      <div>
        <tr>
          <td colspan="2" style="text-align: center; width: 100px">
            <viewer v-if="data.PORTRAIT">
              <img
                v-if="data.PORTRAIT"
                :src="data.PORTRAIT"
                style="height: 130px; width: 100px"
              />
            </viewer>
          </td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">姓 名：</td>
          <td>{{ data.classInfo.STUDENT_NAME }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">证件号码：</td>
          <td>{{ data.classInfo.USER_ID_CARD }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">联系电话：</td>
          <td>{{ data.classInfo.PHONE }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">班级编码：</td>
          <td>{{ data.classInfo.CODE }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">班级名称：</td>
          <td>{{ data.classInfo.NAME }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">培训日期：</td>
          <td>
            {{
              data.classInfo.START_TIME
                ? dayjs(data.classInfo.START_TIME).format("YYYY年MM月DD日")
                : ""
            }}
            至
            {{
              data.classInfo.END_TIME
                ? dayjs(data.classInfo.END_TIME).format("YYYY年MM月DD日")
                : ""
            }}
          </td>
          <td colspan="2" style="text-align: center">
            <img
              :src="data.official_seal_path"
              style="position: absolute; width: 120px; height: 120px"
            />
          </td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">学习方式：</td>
          <td>线上学习</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">课程形式：</td>
          <td>录播</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">培训学时：</td>
          <td>
            {{
              parseFloat(data.classInfo.CLASSHOUR) === 0
                ? 0
                : parseFloat(data.classInfo.CLASSHOUR).toFixed(1)
            }}学时
          </td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">培训科目：</td>
          <td>{{ data.learningRecord.CURRICULUMNAMES }}</td>
        </tr>
        <tr>
          <td style="text-align: right; width: 200px">单位名称：</td>
          <td>{{ data.classInfo.CORP_NAME }}</td>
        </tr>
      </div>
    </div>
    <div>
      <el-divider content-position="left">课程材料</el-divider>
      <div class="flex mt mb">
        <span>姓名:{{ data.classInfo.STUDENT_NAME }}</span>
        <span>身份证号:{{ data.classInfo.USER_ID_CARD }}</span>
      </div>
      <div class="chapter_box">
        <div class="chapter_right_img">
          <img :src="data.official_seal_path" />
        </div>
        <table class="tc archive_print_table">
          <thead />
          <tr>
            <td>班级名称</td>
            <td colspan="3">{{ data.classInfo.NAME }}</td>
          </tr>
          <tr>
            <td>序号</td>
            <td>课程内容</td>
            <td>课时</td>
            <td>讲师</td>
          </tr>
          <tbody>
            <tr v-for="(item, index) in data.videoList" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.COURSEWARENAME }}</td>
              <!--<td>{{ item.CLASSHOUR }}</td>-->
              <td>1</td>
              <td>{{ item.TEACHERNAME }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      v-if="
        data.classInfo.POSTTYPE === 'd302da12d8724faaa24e5008adab8ce8' &&
        data.classInfo.INDUSTRY_ALL_TYPE.split(',')[0] ===
          '1b250e1ec1e24576aaa84daa804e9ab2' &&
        data.classInfo.TRAINLEVEL === 'c698a92dda3848b9a40d4bcee79f23a3'
      "
    >
      <el-divider content-position="left">师傅带徒弟实习教育</el-divider>
      <div class="chapter_box">
        <div class="chapter_right_img">
          <img :src="data.official_seal_path" />
        </div>
        <h2 class="tc mt mb">生产经营单位师傅带徒弟实习教育安全培训考核记录</h2>
        <div class="flex">
          <span>
            生产经营单位或安全生产管理机构名称:(盖章){{
              data.classInfo.CORP_NAME
            }}
          </span>
          <span>档案编号:{{ data.classInfo.FILE_NUMBER }}</span>
        </div>
        <table class="tc archive_print_table">
          <tbody>
            <tr>
              <td>姓名</td>
              <td>{{ data.classInfo.STUDENT_NAME }}</td>
              <td>性别</td>
              <td>{{ data.classInfo.SEX_NAME }}</td>
              <td>身份证</td>
              <td>{{ data.classInfo.USER_ID_CARD }}</td>
              <td>部门</td>
              <td>{{ data.classInfo.DEPARTMENT_NAME }}</td>
              <td>工种</td>
              <td>{{ data.classInfo.POST_NAME }}</td>
            </tr>
            <tr>
              <td>实习起止日期</td>
              <td colspan="3">
                <span>&emsp;&emsp;年</span><span>&emsp;月</span
                ><span>&emsp;日至</span><span>&emsp;&emsp;年</span
                ><span>&emsp;月</span><span>&emsp;日</span>
              </td>
              <td>实习实际天数</td>
              <td />
              <td>师傅姓名</td>
              <td />
              <td>工作年限</td>
              <td />
            </tr>
            <tr>
              <td>人员类型</td>
              <td colspan="9">
                <el-checkbox-group v-model="data.PERSONNEL_TYPE" disabled>
                  <el-checkbox
                    v-for="(item, index) in personnelTypeList"
                    :key="index"
                    :value="item.DICTIONARIES_ID"
                  >
                    {{ item.NAME }}
                  </el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td colspan="10">师傅带徒弟实习教育安全培训及考核实施情况</td>
            </tr>
            <tr>
              <td colspan="10" style="padding: 0">
                <table class="archive_print_table">
                  <tbody>
                    <tr>
                      <td width="6%">序号</td>
                      <td width="20%">培训地点</td>
                      <td width="32%">培训主要内容</td>
                      <td width="8%">工人师傅</td>
                      <td width="8%">考试成绩</td>
                      <td width="8%">补考成绩</td>
                      <td width="10%">本人签字</td>
                    </tr>
                    <tr v-for="(item, index) in 5" :key="index">
                      <td>{{ index + 1 }}</td>
                      <td />
                      <td />
                      <td />
                      <td v-if="index === 0" :rowspan="6" />
                      <td v-if="index === 0" :rowspan="6" />
                      <td v-if="index === 0" :rowspan="6" />
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <div>
          1.高危行业生产经营单位对新入职的岗位操作人员以及矿山新招的井下作业的特种作业人员和危险物品生产经营单位新招的危险工艺操作岗位的特种作业人员进行师傅带徒弟实习教育时使用此表。
          2生产经营单位应当在安全培训考核记录的每一页加盖本单位或者本单位安全生产管理机构的印章并由参加培训的人员在每一页签名确认。
          3.记录人员应当由本单位安全生产管理机构专（兼）职安全生产管理人员担任。
        </div>
        <div class="flex">
          <div style="display: flex">
            <span> 记录人员(签字):</span>
            <viewer v-if="data.RECORDOR_SIGN">
              <img
                :src="data.RECORDOR_SIGN"
                style="height: 50px; width: 50px"
              />
            </viewer>
          </div>
          <div style="display: flex">
            <span>考核人员(签字):</span>
            <viewer v-if="data.ASSESSOR_SIGN">
              <img
                :src="data.ASSESSOR_SIGN"
                style="height: 50px; width: 50px"
              />
            </viewer>
          </div>
          <div style="display: flex">
            <span>安全生产管理机构负责人(签章):</span>
            <viewer v-if="data.SAFETYDEPTOR_SIGN">
              <img
                :src="data.SAFETYDEPTOR_SIGN"
                style="height: 50px; width: 50px"
              />
            </viewer>
          </div>
          <span>
            归档日期:{{
              data.classInfo.END_TIME
                ? dayjs(data.classInfo.END_TIME).format("YYYY-MM-DD")
                : ""
            }}
          </span>
        </div>
      </div>
    </div>
    <div>
      <el-divider content-position="left">培训考核记录</el-divider>
      <div class="chapter_box">
        <div>
          <img
            :src="data.official_seal_path"
            style="position: absolute; width: 120px; height: 120px"
          />
        </div>
        <h2 class="tc mt mb">
          <template
            v-if="
              data.classInfo.POSTTYPE === 'd302da12d8724faaa24e5008adab8ce8'
            "
          >
            <template
              v-if="data.classInfo.INDUSTRY_ALL_NAME.startsWith('高危行业')"
            >
              {{ data.classInfo.TRAINLEVEL_NAME }}安全培训考核记录
            </template>
            <template v-else>
              一般行业生产经营单位新入职从业人员安全培训考核记录（{{
                data.classInfo.TRAINLEVEL_NAME
              }}）
            </template>
          </template>
          <template
            v-else-if="
              data.classInfo.POSTTYPE === '2e4315f861f54d91a70d59bb47b1eea9' ||
              data.classInfo.POSTTYPE === 'd8418796b3ac47b4b975a18f50f807f6' ||
              data.classInfo.POSTTYPE === '2f084c6bc22849aa93161002c0320d2b'
            "
          >
            生产经营单位从业人员{{ data.classInfo.POSTTYPE_NAME }}考核记录
          </template>
          <template
            v-else-if="
              data.classInfo.POSTTYPE === '285f12fdae4a454e8a520fdef1d25309' &&
              data.classInfo.TRAINLEVEL_NAME
            "
          >
            生产经营单位从业人员{{ data.classInfo.POSTTYPE_NAME }}考核记录（{{
              data.classInfo.TRAINLEVEL_NAME
            }}）
          </template>
          <template
            v-else-if="
              data.classInfo.POSTTYPE === '285f12fdae4a454e8a520fdef1d25309' &&
              !data.classInfo.TRAINLEVEL_NAME
            "
          >
            生产经营单位从业人员{{ data.classInfo.POSTTYPE_NAME }}考核记录
          </template>
          <template
            v-else-if="
              data.classInfo.POSTTYPE === 'd73636e7a9ca4e71922bca305ee67cbb'
            "
          >
            生产经营单位从业人员年度安全再培训考核记录
          </template>
        </h2>
        <div class="flex mb">
          <span>
            生产经营单位或安全生产管理机构名称:(盖章){{
              data.classInfo.CORP_NAME
            }}
          </span>
          <span>档案编号:{{ data.classInfo.FILE_NUMBER }}</span>
        </div>
        <table class="tc archive_print_table">
          <tr>
            <td>姓名</td>
            <td>{{ data.classInfo.STUDENT_NAME }}</td>
            <td>性别</td>
            <td>{{ data.classInfo.SEX_NAME }}</td>
            <td>身份证</td>
            <td>{{ data.classInfo.USER_ID_CARD }}</td>
            <td>学历</td>
            <td>{{ data.classInfo.DEGREE_OF_EDUCATION_NAME }}</td>
            <td>专业</td>
            <td>{{ data.classInfo.MAJOR }}</td>
          </tr>
          <tr>
            <td>职务/职称</td>
            <td>{{ data.classInfo.DUTIES }}</td>
            <td>部门</td>
            <td>{{ data.classInfo.DEPARTMENT_NAME }}</td>
            <td>工种</td>
            <td>{{ data.classInfo.POST_NAME }}</td>
            <td>行业类别</td>
            <td>{{ data.classInfo.INDUSTRY_ALL_NAME }}</td>
            <td>联系电话</td>
            <td>{{ data.classInfo.PHONE }}</td>
          </tr>
          <tr>
            <td>人员类型</td>
            <td colspan="9">
              <el-checkbox-group v-model="data.PERSONNEL_TYPE" disabled>
                <el-checkbox
                  v-for="(item, index) in personnelTypeList"
                  :key="index"
                  :value="item.DICTIONARIES_ID"
                >
                  {{ item.NAME }}
                </el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>
          <tr>
            <td colspan="10">安全培训及考核实施情况</td>
          </tr>
          <tr>
            <td colspan="10" style="padding: 0">
              <table class="archive_print_table">
                <thead />
                <tr>
                  <template
                    v-if="
                      data.classInfo.POSTTYPE ===
                        'd8418796b3ac47b4b975a18f50f807f6' ||
                      data.classInfo.POSTTYPE ===
                        '2f084c6bc22849aa93161002c0320d2b'
                    "
                  >
                    <td width="6%">培训类型</td>
                  </template>
                  <template v-else>
                    <td width="6%">序号</td>
                  </template>
                  <td width="10%">培训时间</td>
                  <td width="10%">培训地点</td>
                  <td width="32%">培训主要内容</td>
                  <td width="8%">学时</td>
                  <td width="8%">培训教师</td>
                  <td width="8%">考试成绩</td>
                  <td width="8%">补考成绩</td>
                  <td width="10%">本人签字</td>
                </tr>
                <tbody>
                  <tr v-for="(item, index) in data.videoList" :key="index">
                    <template
                      v-if="
                        data.classInfo.POSTTYPE ===
                          'd8418796b3ac47b4b975a18f50f807f6' ||
                        data.classInfo.POSTTYPE ===
                          '2f084c6bc22849aa93161002c0320d2b'
                      "
                    >
                      <td
                        v-if="index === 0"
                        :rowspan="data.videoList.length + 1"
                      >
                        {{ data.classInfo.NAME }}
                      </td>
                    </template>
                    <template v-else>
                      <td>{{ index + 1 }}</td>
                    </template>
                    <td>
                      {{
                        dayjs(data.classInfo.START_TIME).format("YYYY-MM-DD")
                      }}至{{
                        dayjs(data.classInfo.END_TIME).format("YYYY-MM-DD")
                      }}
                    </td>
                    <td>{{ CORP_NAME }}</td>
                    <td>{{ item.COURSEWARENAME }}</td>
                    <!--<td>{{ item.CLASSHOUR }}学时</td>-->
                    <td>1学时</td>
                    <td>{{ item.TEACHERNAME }}</td>
                    <td v-if="index === 0" :rowspan="data.videoList.length + 1">
                      <template v-if="data.classInfo.EXAMINATION === 0" />
                      <template v-else>
                        {{ data.paper.EXAMSCORE || 0 }}
                      </template>
                    </td>
                    <td v-if="index === 0" :rowspan="data.videoList.length + 1">
                      <template
                        v-if="
                          data.classInfo.ISSTRENGTHEN === '2' &&
                          parseFloat(data.paper.EXAMSCORE) !==
                            parseFloat(data.paper.PAPEREXAMSCORE) &&
                          data.learningRecord.STUDYSTATE === '3'
                        "
                      >
                        {{ data.paper.PAPEREXAMSCORE }}
                      </template>
                      <template v-else />
                    </td>
                    <td v-if="index === 0" :rowspan="data.videoList.length + 1">
                      <img
                        v-if="data.SIGNATURE_PATH"
                        :src="data.SIGNATURE_PATH"
                        style="height: 50px; width: 120px"
                        alt=""
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>
        <div class="flex mt">
          <div style="display: flex">
            <span style="line-height: 50px">记录人员(签字):</span>
            <viewer v-if="data.RECORDOR_SIGN">
              <img
                :src="data.RECORDOR_SIGN"
                style="height: 50px; width: 120px; vertical-align: top"
              />
            </viewer>
          </div>
          <div style="display: flex">
            <span style="line-height: 50px">考核人员(签字): </span>
            <viewer v-if="data.ASSESSOR_SIGN">
              <img
                :src="data.ASSESSOR_SIGN"
                style="height: 50px; width: 120px; vertical-align: top"
              />
            </viewer>
          </div>
          <div style="display: flex">
            <span style="line-height: 50px">安全生产管理机构负责人(签章):</span>
            <viewer v-if="data.SAFETYDEPTOR_SIGN">
              <img
                :src="data.SAFETYDEPTOR_SIGN"
                style="height: 50px; width: 120px; vertical-align: top"
              />
            </viewer>
          </div>
          <span style="line-height: 50px">
            归档日期:{{
              data.classInfo.END_TIME
                ? dayjs(data.classInfo.END_TIME).format("YYYY-MM-DD")
                : ""
            }}
          </span>
        </div>
      </div>
    </div>
    <div>
      <el-divider content-position="left">学习记录</el-divider>
      <table class="tc archive_print_table" style="position: relative">
        <tr>
          <td width="240px">班级名称</td>
          <td colspan="3">
            {{ data.learningRecord.CLASS_NAME }}
          </td>
        </tr>
        <img
          :src="data.official_seal_path"
          style="
            position: absolute;
            margin-left: 560px;
            width: 120px;
            height: 120px;
          "
        />
        <tr>
          <td style="text-align: center">应学课时</td>
          <td width="240px">
            {{
              data.learningRecord.SUM_CLASSHOUR === 0.0
                ? 0
                : parseFloat(data.learningRecord.SUM_CLASSHOUR).toFixed(2)
            }}
          </td>
          <td width="240px" style="text-align: center">已学课时</td>
          <td width="240px">
            {{
              data.learningRecord.COMPLETE_CLASSHOUR === 0.0
                ? 0
                : parseFloat(data.learningRecord.COMPLETE_CLASSHOUR).toFixed(2)
            }}
          </td>
        </tr>
        <tr>
          <td style="text-align: center">是否完成</td>
          <td>
            <template v-if="data.learningRecord.STUDYSTATE === '0'"
              >未学习</template
            >
            <template v-else-if="data.learningRecord.STUDYSTATE === '1'"
              >学习中</template
            >
            <template v-else-if="data.learningRecord.STUDYSTATE === '2'"
              >已学完</template
            >
            <template v-else-if="data.learningRecord.STUDYSTATE === '3'"
              >已完成</template
            >
            <template v-else-if="data.learningRecord.STUDYSTATE === '4'"
              >未完成</template
            >
          </td>
          <td style="text-align: center">完成率</td>
          <td>
            {{
              parseFloat(
                (data.learningRecord.PLAYED_COCOURSEWARE_NUM /
                  data.learningRecord.ALL_COCOURSEWARE_NUM) *
                  100
              ).toFixed(2) > 100
                ? 100.0
                : parseFloat(
                    (data.learningRecord.PLAYED_COCOURSEWARE_NUM /
                      data.learningRecord.ALL_COCOURSEWARE_NUM) *
                      100
                  ).toFixed(2) + "%"
            }}
          </td>
        </tr>
        <tr v-if="data.learningRecord.ISFACE === '1'">
          <td>人脸验证记录</td>
          <td colspan="3" style="padding: 0px; border: 0px">
            <table class="archive_print_table">
              <tr>
                <td colspan="2">
                  共进行{{ data.learningRecord.FACELOG }}次人脸认证
                </td>
              </tr>
              <tr v-for="(item, index) in data.faceList" :key="index">
                <td width="50%">
                  <div>
                    <p>随机照片{{ index + 1 }}</p>
                    <p>{{ item.CREATTIME }}</p>
                    <p>课件：{{ item.COURSEWARENAME }}</p>
                  </div>
                </td>
                <td>
                  <viewer>
                    <img
                      :src="FILE_URL + item.FILEPATH"
                      style="width: 100px; height: 100px"
                    />
                  </viewer>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div v-if="data.classInfo.STAGEEXAMSTATE !== '0'">
      <el-divider content-position="left">考卷详情</el-divider>
      <div class="paper-details chapter_box">
        <div class="chapter_right_img">
          <img :src="data.official_seal_path" />
        </div>
        <h2 class="tc">{{ data.paper.EXAMNAME }}</h2>
        <div class="tc mt-10">
          (满分:{{ data.paper.PAPEREXAMSCORE || 0 }}分)
        </div>
        <div class="mt tc">
          <span style="line-height: 50px; margin-left: 200px"
            >姓名:{{ data.classInfo.STUDENT_NAME }}</span
          >
          <span style="line-height: 50px; margin-left: 200px"
            >分数:{{ data.paper.EXAMSCORE || 0 }}</span
          >
          <span style="line-height: 50px; margin-left: 200px"
            >签字:
            <img
              v-if="data.SIGNATURE_PATH"
              :src="data.SIGNATURE_PATH"
              style="height: 50px; width: 120px; vertical-align: top"
            />
            <span v-else>未参加考试</span></span
          >
          <span style="line-height: 50px; margin-left: 200px"
            >考试时间:{{ data.paper.EXAMTIMEEND }}</span
          >
        </div>
        <div class="items mt-20 p-20">
          <div
            v-for="(item, index) in data.paper.QUESTIONLIST"
            :key="item.QUESTION_ID"
            class="item ptb-20"
          >
            <div class="mt-10">
              {{ index + 1 }}.
              <span v-if="item.QUESTIONTYPE === '1'"> (单选题) </span>
              <span v-if="item.QUESTIONTYPE === '2'"> (多选题) </span>
              <span v-if="item.QUESTIONTYPE === '3'"> (判断题) </span>
              {{ item.QUESTIONDRY }}
              <span class="ml-10">(题目分值：{{ item.SCORE }})</span>
            </div>
            <div class="mt-10 ml-30">
              <el-radio-group
                v-if="item.QUESTIONTYPE === '1'"
                disabled
                :model-value="item.ANSWERRIGHT"
              >
                <el-radio value="A">A.{{ item.OPTIONA }}</el-radio>
                <el-radio value="B">B.{{ item.OPTIONB }}</el-radio>
                <el-radio value="C">C.{{ item.OPTIONC }}</el-radio>
                <el-radio value="D">D.{{ item.OPTIOND }}</el-radio>
              </el-radio-group>
              <el-checkbox-group
                v-if="item.QUESTIONTYPE === '2'"
                disabled
                :model-value="item.ANSWERRIGHT?.split('')"
              >
                <el-checkbox value="A">A.{{ item.OPTIONA }}</el-checkbox>
                <el-checkbox value="B">B.{{ item.OPTIONB }}</el-checkbox>
                <el-checkbox value="C">C.{{ item.OPTIONC }}</el-checkbox>
                <el-checkbox value="D">D.{{ item.OPTIOND }}</el-checkbox>
              </el-checkbox-group>
              <el-radio-group
                v-if="item.QUESTIONTYPE === '3'"
                disabled
                :model-value="item.ANSWERRIGHT"
              >
                <el-radio value="A">A.{{ item.OPTIONA }}</el-radio>
                <el-radio value="B">B.{{ item.OPTIONB }}</el-radio>
              </el-radio-group>
            </div>
            <div class="mt-10">答案：{{ item.ANSWERRIGHT }}</div>
            <div class="mt-10">答案解析：{{ item.DESCR }}</div>
          </div>
        </div>
      </div>
    </div>
    <export
      v-model:visible="data.exportDialogVisible"
      :checkbox-list="checkboxList"
    />
  </layout-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import dayjs from "dayjs";
import {
  getLearningRecord,
  getUserArchives,
} from "@/request/training_archive_management.js";
import { useRoute } from "vue-router";
import { layoutFnGetPersonnelTypeTraffic } from "@/assets/js/data_dictionary.js";
import Export from "./components/export.vue";

const route = useRoute();
const {
  CLASS_NAME,
  STUDENT_ID,
  CORP_NAME,
  RECORDOR_SIGN,
  ASSESSOR_SIGN,
  SAFETYDEPTOR_SIGN,
  POSTTYPE,
  POSTTYPE_NAME,
  INDUSTRY_ALL_TYPE,
  INDUSTRY_ALL_NAME,
  TRAINLEVEL,
  TRAINLEVEL_NAME,
  PERSONNEL_TYPE,
} = route.query;
const FILE_URL = import.meta.env.VITE_FILE_URL;
const checkboxList = ref([
  { sort: 1, label: "首页" },
  { sort: 2, label: "学时证明" },
  { sort: 2, label: "学员学习档案" },
  { sort: 3, label: "课程材料" },
  { sort: 5, label: "培训考核记录" },
  { sort: 6, label: "学习记录" },
]);
const personnelTypeList = await layoutFnGetPersonnelTypeTraffic({
  DICTIONARIES_ID: "0b62f92b0b624aab8e89a77304a64d5e",
  BIANMA: "TRAFFIC_EMPLOYMENT",
});
const data = reactive({
  classInfo: {},
  videoList: [],
  official_seal_path: "",
  SIGNATURE_PATH: "",
  PERSONNEL_TYPE: [PERSONNEL_TYPE],
  paper: {},
  learningRecord: {},
  faceList: [],
  PORTRAIT: "",
  exportDialogVisible: false,
});
const fnGetData = async () => {
  const resData = await getUserArchives({
    STUDENT_ID,
  });
  data.classInfo = resData.student;
  data.classInfo.POSTTYPE = POSTTYPE;
  data.classInfo.POSTTYPE_NAME = POSTTYPE_NAME;
  data.classInfo.INDUSTRY_ALL_TYPE = INDUSTRY_ALL_TYPE;
  data.classInfo.TRAINLEVEL = TRAINLEVEL;
  data.classInfo.TRAINLEVEL_NAME = TRAINLEVEL_NAME;
  data.classInfo.INDUSTRY_ALL_NAME = INDUSTRY_ALL_NAME;
  data.official_seal_path = FILE_URL + resData.official_seal_path;
  data.ASSESSOR_SIGN = FILE_URL + ASSESSOR_SIGN;
  data.RECORDOR_SIGN = FILE_URL + RECORDOR_SIGN;
  data.SAFETYDEPTOR_SIGN = FILE_URL + SAFETYDEPTOR_SIGN;
  data.SIGNATURE_PATH = FILE_URL + resData.student.SIGNATURE_PATH;
  if (resData.paper) {
    if (resData.paper.QUESTIONLIST && resData.paper.QUESTIONLIST.length > 0) {
      checkboxList.value.push({ sort: 7, label: "考卷信息" });
    }
    data.paper = { ...resData.paper };
  }
  if (
    data.classInfo.POSTTYPE === "d302da12d8724faaa24e5008adab8ce8" &&
    data.classInfo.INDUSTRY_ALL_TYPE.split(",")[0] ===
      "1b250e1ec1e24576aaa84daa804e9ab2" &&
    data.classInfo.TRAINLEVEL === "c698a92dda3848b9a40d4bcee79f23a3"
  ) {
    checkboxList.value.push({ sort: 4, label: "师傅带徒弟实习教育" });
  }
  data.videoList = resData.videoList;
  data.classInfo.SUMVIDEOTIME = data.classInfo.SUMVIDEOTIME || 0;
  data.classInfo.CLASSHOUR = 0;
  for (let j = 0; j < data.videoList.length; j++) {
    data.classInfo.SUMVIDEOTIME += Number(data.videoList[j].VIDEOTIME || 0);
    data.classInfo.CLASSHOUR += data.videoList[j].CLASSHOUR;
  }
  data.classInfo = { ...data.classInfo, ...resData.student };
  data.classInfo.NAME = CLASS_NAME;
  data.classInfo.CORP_NAME = CORP_NAME;
};
const fnGetLearningRecord = async () => {
  const resData = await getLearningRecord({
    STUDENT_ID,
  });
  data.learningRecord = resData.varList.baseInfo;
  data.PORTRAIT = FILE_URL + data.learningRecord.PORTRAIT;
  if (data.learningRecord.ISFACE === "1") {
    data.faceList = resData.varList.facialPhotos;
  } else {
    data.faceList = [];
  }
};
fnGetData();
fnGetLearningRecord();
</script>

<style scoped lang="scss">
.chapter_box {
  position: relative;

  .chapter_info {
    min-height: 135px;

    .chapter_text {
      margin-top: 20px;
      margin-bottom: 40px;
    }
  }

  .chapter_img {
    position: absolute;
    top: 0;
    left: 40px;

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

  .chapter_right_img {
    position: absolute;
    bottom: 10px;
    right: 20px;

    img {
      width: 120px;
      height: 120px;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.items {
  border: 1px solid var(--el-border-color);

  .item {
    border-bottom: 1px dashed #ebeef5;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}
:deep {
  .el-radio-group {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .el-radio-group .el-radio {
    width: 25%;
    margin-right: 0;
    height: auto;
    min-height: 30px;
  }
  .el-radio__input.is-disabled + span.el-radio__label {
    white-space: break-spaces;
    word-break: break-all;
    line-height: 20px;
  }
}
</style>
