<template>
  <div>
    <el-dialog
      v-if="type === 104"
      :model-value="type === 104"
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <el-button type="primary" v-print="'#printContent'">打印</el-button>
      </el-space>
      <div id="printContent">
        <div style="text-align: center">
          <el-text size="large">学员统计情况总表</el-text>
        </div>
        <div style="display: flex; justify-content: space-between">
          <el-text size="small">平台名称:</el-text>
          <el-text size="small">报表日期:{{ fnGetCurrentDay() }}</el-text>
        </div>
        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item label="公司名称">
            {{ CORP_NAME }}
          </el-descriptions-item>
          <el-descriptions-item label="任务名称">
            {{ data.taskInfo.STUDY_NAME }}
          </el-descriptions-item>
          <el-descriptions-item label="培训时间">
            {{ data.taskInfo.PEIXUE_START_TIME }} 至
            {{ data.taskInfo.PEIXUE_END_TIME }}
          </el-descriptions-item>
          <el-descriptions-item label="计划课时">
            {{ class_hours }}
          </el-descriptions-item>
          <el-descriptions-item label="培训人数">
            {{ data.studentList.length }}
          </el-descriptions-item>
          <el-descriptions-item label="合格人数">
            {{ pass_student_list.length }}
          </el-descriptions-item>
        </el-descriptions>
        <br />
        <div style="text-align: center">
          <el-text>合格学员名单</el-text>
        </div>
        <layout-table :data="pass_student_list" :show-pagination="false">
          <el-table-column label="序号" width="50">
            <template v-slot="{ $index }">
              {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
            </template>
          </el-table-column>
          <el-table-column prop="USER_NAME" label="姓名" />
          <el-table-column prop="USER_ID_CARD" label="身份证" />
          <el-table-column prop="PHONE" label="手机号" />
          <el-table-column prop="SEX_NAME" label="性别" />
          <el-table-column prop="COMPLETE_CLASSHOUR" label="完成学时" />
          <el-table-column prop="STAGEEXAMSCORE" label="结业考试成绩">
            <template v-slot="{ row }">
              {{ row.STAGEEXAMSCORE > -1 ? row.STAGEEXAMSCORE : "未参加" }}
            </template>
          </el-table-column>
        </layout-table>
        <div style="text-align: center">
          <el-text>未合格学员名单</el-text>
        </div>
        <layout-table :data="unpass_student_list" :show-pagination="false">
          <el-table-column label="序号" width="50">
            <template v-slot="{ $index }">
              {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
            </template>
          </el-table-column>
          <el-table-column prop="USER_NAME" label="姓名" />
          <el-table-column prop="USER_ID_CARD" label="身份证" />
          <el-table-column prop="PHONE" label="手机号" />
          <el-table-column prop="SEX_NAME" label="性别" />
          <el-table-column prop="COMPLETE_CLASSHOUR" label="完成学时" />
          <el-table-column prop="STAGEEXAMSCORE" label="结业考试成绩">
            <template v-slot="{ row }">
              {{ row.STAGEEXAMSCORE > -1 ? row.STAGEEXAMSCORE : "未参加" }}
            </template>
          </el-table-column>
        </layout-table>
      </div>
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  getAllCourseware,
  getStudyTaskInfo,
  getStudentByTaskId,
} from "@/request/archives.js";
import { computed, reactive } from "vue";
import { useVModels } from "@vueuse/core";
import LayoutTable from "@/components/table/index.vue";
import { useUserStore } from "@/pinia/user.js";
import { serialNumber } from "@/assets/js/utils.js";

const userStore = useUserStore();
const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, type, studyTaskId } = useVModels(props);

const data = reactive({
  taskInfo: {},
  coursewareList: [],
  studentList: [],
});

const class_hours = computed(() => {
  let result = 0;
  if (data.coursewareList && data.coursewareList.length > 0) {
    data.coursewareList.forEach((item) => {
      result += item.CLASSHOUR;
    });
  }
  return ((result || 0) / 45).toFixed(2);
});

const pass_student_list = computed(() => {
  const result = [];
  if (data.studentList && data.studentList.length > 0) {
    data.studentList.forEach((item) => {
      if (Number(item.STAGEEXAMSCORE) >= Number(data.taskInfo.PASSSCORE)) {
        result.push(item);
      }
    });
  }
  return result;
});

const unpass_student_list = computed(() => {
  const result = [];
  if (data.studentList && data.studentList.length > 0) {
    data.studentList.forEach((item) => {
      if (Number(item.STAGEEXAMSCORE) < Number(data.taskInfo.PASSSCORE)) {
        result.push(item);
      }
    });
  }
  return result;
});

const emits = defineEmits(["update:visible"]);

const fnClose = () => {
  emits("update:current", undefined);
};

const fnGetStudyTaskInfo = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const respData = await getStudyTaskInfo({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (respData && respData.pd) {
      data.taskInfo = respData.pd;
    }
  }
};
await fnGetStudyTaskInfo();

const fnGetAllCoursewareByHandout = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const respData = await getAllCourseware({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (respData && respData.varList) {
      data.coursewareList = respData.varList;
    }
  }
};
await fnGetAllCoursewareByHandout();

const fnGetStudentByTaskId = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const respData = await getStudentByTaskId({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (respData && respData.varList) {
      data.studentList = respData.varList;
    }
  }
};
await fnGetStudentByTaskId();

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"></style>
