<template>
  <div>
    <el-descriptions title="学时证明" :column="1">
      <template #extra>
        <el-button type="primary" v-print="'#printContent'" size="small">
          打印
        </el-button>
      </template>
    </el-descriptions>
    <div id="printContent">
      <div class="print_use">
        <div style="text-align: right">
          <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>
      <div>
        <span style="color: white">证书编号:</span>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="姓名">
          {{ data.userInfo.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="证件类型">身份证</el-descriptions-item>
        <el-descriptions-item label="证件编号">
          {{ data.userInfo.USER_ID_CARD }}
        </el-descriptions-item>
        <el-descriptions-item label="培训单位名称">
          {{ CORP_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="任务名称">
          {{ data.studyTaskInfo.STUDY_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="培训日期">
          {{ data.studyTaskInfo.PEIXUE_START_TIME }} 至
          {{ data.studyTaskInfo.PEIXUE_END_TIME }}
        </el-descriptions-item>
        <el-descriptions-item label="培训类型">
          {{ data.studyTaskInfo.train_type_name }}
        </el-descriptions-item>
        <el-descriptions-item label="视频学习时长">
          {{ video_class_hours }}分钟(包含{{ video_count }}个视频)
        </el-descriptions-item>
        <el-descriptions-item label="资料学习时长">
          {{ data_class_hours }}分钟(包含{{ data_count }}个资料)
        </el-descriptions-item>
        <el-descriptions-item label="合计学习时长">
          {{ video_class_hours + data_class_hours }}分钟
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            培训单位:(盖章) 日期: {{ fnGetCurrentDay() }}
          </template>
        </el-descriptions-item>
      </el-descriptions>

      <br />

      <el-descriptions title="课程资料" :column="2">
        <el-descriptions-item label="姓名:">
          {{ data.userInfo.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号:">
          {{ data.userInfo.USER_ID_CARD }}
        </el-descriptions-item>
      </el-descriptions>
      <layout-table :data="data.curriculumList" :show-pagination="false">
        <el-table-column label="任务名称">
          <el-table-column label="序号" width="70">
            <template v-slot="{ $index }">
              {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="data.studyTaskInfo.STUDY_NAME">
          <el-table-column prop="COURSEWARENAME" label="课程内容" />
          <el-table-column prop="CLASSHOUR" label="课时">
            <template v-slot="{ row }">
              {{ (row.CLASSHOUR / 45).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="SPEAKER" label="讲师" />
        </el-table-column>
      </layout-table>

      <el-descriptions title="考卷详情" :column="2" />
      <div style="text-align: center; color: white">
        <h3>{{ data.paper.info.EXAMNAME }}</h3>
        <span>(满分:{{ data.paper.info.EXAMSCORE || 0 }}分)</span>
      </div>
      <el-descriptions :column="2">
        <el-descriptions-item label="任务名称:">
          {{ data.studyTaskInfo.STUDY_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名:">
          {{ data.userInfo.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="考试时间:">
          {{ data.paper.info.OPERATTIME }}
        </el-descriptions-item>
        <el-descriptions-item label="分数:">
          {{ data.examScore.userSecond[0] }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="data.paper.selectList.length > 0" style="color: white">
        <el-divider content-position="left">单选题</el-divider>
        <template
          v-for="(item, index) in data.paper.selectList"
          :key="item.QUESTION_ID"
        >
          <el-row>
            <el-col :span="24">
              {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                data.paper.isExam === "1" ? item.ANSWER : ""
              }}]
            </el-col>
          </el-row>
          <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">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" />
        </template>
      </div>
      <div v-if="data.paper.multiList.length > 0" style="color: white">
        <el-divider content-position="left">多选题</el-divider>
        <template
          v-for="(item, index) in data.paper.multiList"
          :key="item.QUESTION_ID"
        >
          <el-row>
            <el-col :span="24">
              {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                data.paper.isExam === "1" ? item.ANSWER : ""
              }}]
            </el-col>
          </el-row>
          <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">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" />
        </template>
      </div>
      <div v-if="data.paper.judgeList.length > 0" style="color: white">
        <el-divider content-position="left">判断题</el-divider>
        <template
          v-for="(item, index) in data.paper.judgeList"
          :key="item.QUESTION_ID"
        >
          <el-row>
            <el-col :span="24">
              {{ index + 1 }}.{{ item.QUESTIONDRY }} 选择答案：[{{
                data.paper.isExam === "1" ? item.ANSWER : ""
              }}]
            </el-col>
          </el-row>
          <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" />
        </template>
      </div>

      <br />

      <el-descriptions title="培训考核记录" :column="5" />
      <div style="text-align: center; color: white">
        <h4>
          {{ data.studyTaskInfo.train_type_name }}生产经营单位{{
            data.studyTaskInfo.post_type_name
          }}安全培训考核记录
        </h4>
      </div>
      <el-descriptions :column="2">
        <el-descriptions-item label="生产经营单位或安全生产管理机构名称:(盖章)">
          <!-- todo 原项目为空 -->
        </el-descriptions-item>
        <el-descriptions-item label="档案编号:">
          <!-- todo 原项目为空 -->
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="5" border>
        <el-descriptions-item label="姓名">
          {{ data.userInfo.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ data.userInfo.SEX_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证">
          {{ data.userInfo.USER_ID_CARD }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          {{ data.userInfo.DEGREE_OF_EDUCATION_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          <!-- todo 原项目为空 -->
        </el-descriptions-item>
        <el-descriptions-item label="职务">
          {{ data.userInfo.DUTIES_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="部门">
          {{ data.userInfo.DEPARTMENT_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="工种">
          {{ data.userInfo.TYPE_OF_WORK_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="行业类别">
          {{ data.studyTaskInfo.train_type_name }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ data.userInfo.USERNAME }}
        </el-descriptions-item>
        <el-descriptions-item label="人员类型" :span="5">
          <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>
        </el-descriptions-item>
      </el-descriptions>
      <div style="text-align: center; color: white">
        <span>安全培训及考核实施情况</span>
      </div>
      <layout-table
        :data="data.curriculumList"
        :show-pagination="false"
        :span-method="fnMergeCells"
      >
        <el-table-column label="序号" width="70">
          <template v-slot="{ $index }">
            {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
          </template>
        </el-table-column>
        <el-table-column label="培训时间">
          <template v-slot>
            {{ data.studyTaskInfo.PEIXUE_START_TIME }} 至
            {{ data.studyTaskInfo.PEIXUE_END_TIME }}
          </template>
        </el-table-column>
        <el-table-column label="培训地点">
          <template v-slot>一体化双控平台</template>
        </el-table-column>
        <el-table-column prop="COURSEWARENAME" label="培训主要内容" />
        <el-table-column label="学时">
          <template v-slot="{ row }">
            {{ (row.CLASSHOUR / 45).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="SPEAKER" label="培训教师" />
        <el-table-column label="考试成绩">
          <template v-slot>{{ data.examScore.userSecond[0] }}</template>
        </el-table-column>
        <el-table-column label="补考成绩">
          <template v-slot>{{ data.examScore.userSecond[1] }}</template>
        </el-table-column>
        <el-table-column label="本人签字">
          <template v-slot>
            <img
              v-if="data.examScore.USER_SIGN_PATH"
              :src="FILE_URL + data.examScore.USER_SIGN_PATH"
              style="height: 50px; width: 50px"
              alt="本人"
            />
          </template>
        </el-table-column>
      </layout-table>
      <el-descriptions :column="4">
        <el-descriptions-item label="记录人员(签字):">
          <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-descriptions-item>
        <el-descriptions-item label="考核人员(签字):">
          <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-descriptions-item>
        <el-descriptions-item label="安全生产管理机构负责人(签章):">
        </el-descriptions-item>
        <el-descriptions-item label="归档日期:">
          {{ fnGetCurrentDay() }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import {
  getStudyTaskInfo,
  getUserInfo,
  getAllCourseware,
  getArchivesPaper,
  getSignByStudyTask,
  getUserExamScoreByStudyTaskId,
} from "@/request/archives.js";
import { layoutFnGetPersonnelType } from "@/assets/js/data_dictionary.js";
import LayoutTable from "@/components/table/index.vue";
import { computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@/pinia/user";
import { serialNumber } from "@/assets/js/utils.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}日`;
};

const fnMergeCells = ({ rowIndex, columnIndex }) => {
  if (columnIndex > 5) {
    if (rowIndex < 1) {
      return {
        rowspan: data.curriculumList.length,
        colspan: 1,
      };
    }
    return {
      rowspan: 0,
      colspan: 0,
    };
  }
};
</script>

<style scoped lang="scss"></style>
