<template>
  <layout-print-table-package entrance="archive">
    <div class="print_use">
      <div class="tr mt-30">
        <span>档案编号：</span>
      </div>
      <div
        style="
          font-size: 30px;
          font-weight: 700;
          text-align: center;
          padding-top: 100px;
        "
      >
        <span>生产经营单位从业人员安全培训档案</span>
      </div>
      <div style="width: 300px; margin: auto; padding-top: 400px">
        <div>
          <span
            style="
              text-align: justify;
              text-align-last: justify;
              width: 64px;
              display: inline-block;
            "
          >
            姓名
          </span>
          <span>：{{ data.userInfo.NAME }}</span>
        </div>
        <div style="padding-top: 20px">
          <span style="width: 64px; display: inline-block">身份证号</span>
          <span>：{{ data.userInfo.USER_ID_CARD }}</span>
        </div>
        <div style="padding-top: 20px">
          <span style="width: 64px; display: inline-block">建档日期</span>
          <span>：{{ fnGetCurrentDay() }}</span>
        </div>
        <div style="padding-top: 20px">单位名称（公章）：</div>
      </div>
    </div>

    <table>
      <thead>
        <tr>
          <td colspan="2" style="border: none">
            <el-divider content-position="left">学时证明</el-divider>
            <div class="mb-10">证书编号:</div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="title">姓名</td>
          <td>{{ data.userInfo.NAME }}</td>
        </tr>
        <tr>
          <td class="title">证件类型</td>
          <td>身份证</td>
        </tr>
        <tr>
          <td class="title">证件编号</td>
          <td>{{ data.userInfo.USER_ID_CARD }}</td>
        </tr>
        <tr>
          <td class="title">培训单位名称</td>
          <td>{{ CORP_NAME }}</td>
        </tr>
        <tr>
          <td class="title">任务名称</td>
          <td>{{ data.studyTaskInfo.STUDY_NAME }}</td>
        </tr>
        <tr>
          <td class="title">培训日期</td>
          <td>
            {{ data.studyTaskInfo.PEIXUE_START_TIME }} 至
            {{ data.studyTaskInfo.PEIXUE_END_TIME }}
          </td>
        </tr>
        <tr>
          <td class="title">培训类型</td>
          <td>{{ data.studyTaskInfo.train_type_name }}</td>
        </tr>
        <tr>
          <td class="title">视频学习时长</td>
          <td>{{ video_class_hours }}分钟(包含{{ video_count }}个视频)</td>
        </tr>
        <tr>
          <td class="title">资料学习时长</td>
          <td>{{ data_class_hours }}分钟(包含{{ data_count }}个资料)</td>
        </tr>
        <tr>
          <td class="title">合计学习时长</td>
          <td>{{ video_class_hours + data_class_hours }}分钟</td>
        </tr>
        <tr style="height: 150px">
          <td class="title">
            <div style="width: 150px">
              <p>培训单位:(盖章)</p>
              <p>日期: {{ fnGetCurrentDay() }}</p>
            </div>
          </td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <td colspan="4" style="border: none">
            <el-divider content-position="left">课程材料</el-divider>
            <div class="mb-10 flex">
              <span>姓名:{{ data.userInfo.NAME }}</span>
              <span>身份证号:{{ data.userInfo.USER_ID_CARD }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">任务名称</td>
          <td class="title" colspan="3">{{ data.studyTaskInfo.STUDY_NAME }}</td>
        </tr>
        <tr>
          <td class="title">序号</td>
          <td class="title">课程内容</td>
          <td class="title">课时</td>
          <td class="title">讲师</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data.curriculumList" :key="index">
          <td class="tc">{{ index + 1 }}</td>
          <td class="tc">{{ item.COURSEWARENAME }}</td>
          <td class="tc">{{ (item.CLASSHOUR / 45).toFixed(2) }}</td>
          <td class="tc">{{ item.SPEAKER }}</td>
        </tr>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <td style="border: none">
            <el-divider content-position="left">考卷详情</el-divider>
          </td>
        </tr>
        <tr>
          <td style="border: none">
            <div class="tc">
              <h3>{{ data.paper.info.EXAMNAME }}</h3>
            </div>
            <div class="tc mt-10">
              <span>(满分:{{ data.paper.info.EXAMSCORE || 0 }}分)</span>
            </div>
            <div class="flex">
              <span>任务名称:{{ data.studyTaskInfo.STUDY_NAME }}</span>
              <span>姓名:{{ data.userInfo.NAME }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td style="border: none">
            <div class="flex">
              <span>考试时间:{{ data.paper.info.OPERATTIME }}</span>
              <span>分数:{{ data.examScore.userSecond[0] }}</span>
            </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <template v-if="data.paper.selectList.length > 0">
          <tr>
            <td style="border: none">
              <el-divider content-position="left">单选题</el-divider>
            </td>
          </tr>
          <tr
            v-for="(item, index) in data.paper.selectList"
            :key="item.QUESTION_ID"
          >
            <td style="border: none">
              <p>
                {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                  data.paper.isExam === "1" ? item.ANSWER : ""
                }}]
              </p>
              <el-row :gutter="30" class="mt-10">
                <el-col :span="4">A.{{ item.OPTIONA }}</el-col>
                <el-col :span="4">B.{{ item.OPTIONB }}</el-col>
                <el-col :span="4">C.{{ item.OPTIONC }}</el-col>
                <el-col :span="4">D.{{ item.OPTIOND }}</el-col>
                <el-col :span="4">
                  参考答案:{{
                    data.paper.isExam === "1" ? item.ANSWERRIGHT : item.ANSWER
                  }}
                </el-col>
              </el-row>
              <el-divider border-style="dashed" />
            </td>
          </tr>
        </template>
        <template v-if="data.paper.multiList.length > 0">
          <tr>
            <td style="border: none">
              <el-divider content-position="left">多选题</el-divider>
            </td>
          </tr>
          <tr
            v-for="(item, index) in data.paper.multiList"
            :key="item.QUESTION_ID"
          >
            <td style="border: none">
              <p>
                {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                  data.paper.isExam === "1" ? item.ANSWER : ""
                }}]
              </p>
              <el-row :gutter="30" class="mt-10">
                <el-col :span="4">A.{{ item.OPTIONA }}</el-col>
                <el-col :span="4">B.{{ item.OPTIONB }}</el-col>
                <el-col :span="4">C.{{ item.OPTIONC }}</el-col>
                <el-col :span="4">D.{{ item.OPTIOND }}</el-col>
                <el-col :span="4">
                  参考答案:{{
                    data.paper.isExam === "1" ? item.ANSWERRIGHT : item.ANSWER
                  }}
                </el-col>
              </el-row>
              <el-divider border-style="dashed" />
            </td>
          </tr>
        </template>
        <template v-if="data.paper.judgeList.length > 0">
          <tr>
            <td style="border: none">
              <el-divider content-position="left">判断题</el-divider>
            </td>
          </tr>
          <tr
            v-for="(item, index) in data.paper.judgeList"
            :key="item.QUESTION_ID"
          >
            <td style="border: none">
              <p>
                {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                  data.paper.isExam === "1" ? item.ANSWER : ""
                }}]
              </p>
              <el-row :gutter="30">
                <el-col :span="4">A.{{ item.OPTIONA }}</el-col>
                <el-col :span="4">B.{{ item.OPTIONB }}</el-col>
                <el-col :span="4">
                  参考答案:{{
                    data.paper.isExam === "1" ? item.ANSWERRIGHT : item.ANSWER
                  }}
                </el-col>
              </el-row>
              <el-divider border-style="dashed" />
            </td>
          </tr>
        </template>
      </tbody>
    </table>

    <table>
      <thead>
        <tr>
          <td colspan="10" style="border: none">
            <el-divider content-position="left">培训考核记录</el-divider>
            <div class="tc">
              <h3>
                {{ data.studyTaskInfo.train_type_name }}生产经营单位{{
                  data.studyTaskInfo.post_type_name
                }}安全培训考核记录
              </h3>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="10" style="border: none">
            <div class="flex">
              <span>生产经营单位或安全生产管理机构名称:(盖章)</span>
              <span>档案编号:</span>
            </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="title">姓名</td>
          <td class="tc">{{ data.userInfo.NAME }}</td>
          <td class="title">性别</td>
          <td class="tc">{{ data.userInfo.SEX_NAME }}</td>
          <td class="title">身份证</td>
          <td class="tc">{{ data.userInfo.USER_ID_CARD }}</td>
          <td class="title">学历</td>
          <td class="tc">{{ data.userInfo.DEGREE_OF_EDUCATION_NAME }}</td>
          <td class="title">专业</td>
          <td class="tc"></td>
        </tr>
        <tr>
          <td class="title">职务</td>
          <td class="tc">{{ data.userInfo.DUTIES_NAME }}</td>
          <td class="title">部门</td>
          <td class="tc">{{ data.userInfo.DEPARTMENT_NAME }}</td>
          <td class="title">工种</td>
          <td class="tc">{{ data.studyTaskInfo.TYPE_OF_WORK_NAME }}</td>
          <td class="title">行业类别</td>
          <td class="tc">{{ data.studyTaskInfo.train_type_name }}</td>
          <td class="title">联系电话</td>
          <td class="tc">{{ data.userInfo.USERNAME }}</td>
        </tr>
        <tr>
          <td class="title">人员类型</td>
          <td colspan="9" class="tc">
            <el-checkbox-group v-model="data.checkPerType" disabled>
              <el-checkbox
                v-for="(item, index) in data.personalTypeList"
                :key="index"
                :label="item.DICTIONARIES_ID"
              >
                {{ item.NAME }}
              </el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <td colspan="9" class="tc">安全培训及考核实施情况</td>
        </tr>
        <tr>
          <td class="title" style="width: 4%">序号</td>
          <td class="title">培训时间</td>
          <td class="title">培训地点</td>
          <td class="title">培训主要内容</td>
          <td class="title">学时</td>
          <td class="title">培训教师</td>
          <td class="title">考试成绩</td>
          <td class="title">补考成绩</td>
          <td class="title">本人签字</td>
        </tr>
      </thead>
      <tbody>
        <template v-if="data.curriculumList && data.curriculumList.length > 0">
          <tr
            v-for="(item, index) in data.curriculumList"
            :key="item.COURSEWARE_ID"
          >
            <td class="tc">{{ index + 1 }}</td>
            <td class="tc">
              {{ data.studyTaskInfo.PEIXUE_START_TIME }} 至
              {{ data.studyTaskInfo.PEIXUE_END_TIME }}
            </td>
            <td class="tc">一体化双控平台</td>
            <td class="tc">{{ item.COURSEWARENAME }}</td>
            <td class="tc">{{ (item.CLASSHOUR / 45).toFixed(2) }}</td>
            <td class="tc">{{ item.SPEAKER }}</td>
            <td class="tc">{{ data.examScore.userSecond[0] }}</td>
            <td class="tc">{{ data.examScore.userSecond[1] }}</td>
            <td class="tc">
              <img
                v-if="data.examScore.USER_SIGN_PATH"
                :src="FILE_URL + data.examScore.USER_SIGN_PATH"
                style="height: 50px; width: 50px"
                alt="本人"
              />
            </td>
          </tr>
        </template>
      </tbody>
    </table>

    <el-row class="mt-10">
      <el-col :span="6">
        记录人员(签字):
        <div v-for="(item, index) in data.signList" :key="index">
          <img
            v-if="item.TYPE === 1 && item.USER_SIGN_FILE_PATH"
            :src="FILE_URL + item.USER_SIGN_FILE_PATH"
            style="height: 50px; width: 50px"
            alt="记录人员"
          />
        </div>
      </el-col>
      <el-col :span="6">
        考核人员(签字):
        <div v-for="(item, index) in data.signList" :key="index">
          <img
            v-if="item.TYPE === 2 && item.USER_SIGN_FILE_PATH"
            :src="FILE_URL + item.USER_SIGN_FILE_PATH"
            style="height: 50px; width: 50px"
            alt="考核人员"
          />
        </div>
      </el-col>
      <el-col :span="6"> 安全生产管理机构负责人(签章): </el-col>
      <el-col :span="6"> 归档日期:{{ fnGetCurrentDay() }} </el-col>
    </el-row>
  </layout-print-table-package>
  <div v-html="PRINT_STYLE" />
</template>

<script setup>
import {
  getStudyTaskInfo,
  getUserInfo,
  getAllCourseware,
  getArchivesPaper,
  getSignByStudyTask,
  getUserExamScoreByStudyTaskId,
} from "@/request/archives.js";
import { layoutFnGetPersonnelType } from "@/assets/js/data_dictionary.js";
import { computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@/pinia/user";
import LayoutPrintTablePackage from "@/components/print_table_package/index.vue";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const FILE_URL = import.meta.env.VITE_FILE_URL;

const userStore = useUserStore();
const route = useRoute();
const { STUDYTASK_ID, USER_ID } = route.query;

const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const data = reactive({
  personalTypeList: [],
  studyTaskInfo: {},
  userInfo: {},
  checkPerType: [],
  curriculumList: [],
  paper: {
    isExam: "",
    info: {},
    questionList: [],
    selectList: [],
    multiList: [],
    judgeList: [],
  },
  signList: [],
  examScore: {
    USER_SIGN_PATH: "",
    userExamScore: {},
    userSecond: [0, 0],
  },
});

const video_class_hours = computed(() => {
  let result = 0;
  if (data.curriculumList && data.curriculumList.length > 0) {
    data.curriculumList.forEach((item) => {
      if (item.COURSEWARENAME.indexOf("[视频课件]") > -1) {
        result += item.CLASSHOUR;
      }
    });
  }
  return result;
});

const video_count = computed(() => {
  let result = 0;
  if (data.curriculumList && data.curriculumList.length > 0) {
    data.curriculumList.forEach((item) => {
      if (item.COURSEWARENAME.indexOf("[视频课件]") > -1) {
        result += 1;
      }
    });
  }
  return result;
});

const data_class_hours = computed(() => {
  let result = 0;
  if (data.curriculumList && data.curriculumList.length > 0) {
    data.curriculumList.forEach((item) => {
      if (item.COURSEWARENAME.indexOf("[资料课件]") > -1) {
        result += item.CLASSHOUR;
      }
    });
  }
  return result;
});

const data_count = computed(() => {
  let result = 0;
  if (data.curriculumList && data.curriculumList.length > 0) {
    data.curriculumList.forEach((item) => {
      if (item.COURSEWARENAME.indexOf("[资料课件]") > -1) {
        result += 1;
      }
    });
  }
  return result;
});

const fnGetStudyTaskInfo = async () => {
  const respData = await getStudyTaskInfo({ STUDYTASK_ID });
  if (respData && respData.pd) {
    data.studyTaskInfo = respData.pd;
  }
};
await fnGetStudyTaskInfo();

const fnGetAllCourseware = async () => {
  const respData = await getAllCourseware({ STUDYTASK_ID });
  if (respData && respData.varList) {
    data.curriculumList = respData.varList;
  }
};
await fnGetAllCourseware();

const fnGetUserInfo = async () => {
  const respData = await getUserInfo({ USER_ID });
  if (respData && respData.pd) {
    data.userInfo = respData.pd;
    data.checkPerType.push(data.userInfo.PERSONNEL_TYPE);
  }
};
await fnGetUserInfo();

const fnGetPersonnelType = async () => {
  const respData = await layoutFnGetPersonnelType();
  if (respData) {
    data.personalTypeList = respData;
  }
};
await fnGetPersonnelType();

const fnGetArchivesPaper = async () => {
  const respData = await getArchivesPaper({ STUDYTASK_ID, USER_ID });
  if (respData) {
    data.paper.isExam = respData.isExam;
    data.paper.info = respData.paper;
    data.paper.questionList = respData.questionList;
    respData.questionList.forEach((question) => {
      if (question.QUESTIONTYPE === "1") {
        data.paper.selectList.push(question);
      } else if (question.QUESTIONTYPE === "2") {
        data.paper.multiList.push(question);
      } else if (question.QUESTIONTYPE === "3") {
        data.paper.judgeList.push(question);
      }
    });
  }
};
await fnGetArchivesPaper();

const fnGetSignByStudyTask = async () => {
  const respData = await getSignByStudyTask({ STUDYTASK_ID });
  if (respData && respData.varList) {
    data.signList = respData.varList;
  }
};
await fnGetSignByStudyTask();

const fnGetUserExamScoreByStudyTaskId = async () => {
  const respData = await getUserExamScoreByStudyTaskId({
    STUDYTASK_ID,
    USER_ID,
  });
  if (respData) {
    data.examScore.USER_SIGN_PATH = respData.USER_SIGN_PATH;
    data.examScore.userExamScore = respData.userExamScore;
    if (
      data.examScore.userExamScore &&
      Object.keys(data.examScore.userExamScore).length > 0
    ) {
      const user_score = data.examScore.userExamScore[USER_ID];
      if (user_score && user_score.indexOf(",") > -1) {
        data.examScore.userSecond = user_score.split(",");
      }
    }
  }
};
await fnGetUserExamScoreByStudyTaskId();

const fnGetCurrentDay = () => {
  const currentDatetime = new Date();
  const year = currentDatetime.getFullYear();
  const month = String(currentDatetime.getMonth() + 1).padStart(2, "0");
  const day = String(currentDatetime.getDate()).padStart(2, "0");
  return `${year}年${month}月${day}日`;
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: space-between;
  width: 80%;
}
</style>
