<template>
  <main-layout>
    <Breadcrumb
      style="
        text-align: left;
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        background-color: #fafafa;
      "
    >
      当前所在位置：
      <BreadcrumbItem>{{ locationTitle }}</BreadcrumbItem>
    </Breadcrumb>
    <div
      v-if="answerCardUrl"
      style="height: 60px; display: flex; justify-content: flex-end"
    >
      <div style="display: flex; align-items: center; margin-right: 20px">
        <span style="font-size: 20px">答题纸模板：</span
        ><a
          href="#"
          download
          :disabled="downloadUrlDisabled"
          ondragstart="return false;"
          style="
            height: 30px;
            width: 50px;
            display: inline-block;
            height: 30px;
            font-size: 14px;
            color: #ffffff;
            background-color: #13bb8a;
            border-radius: 6px;
            padding: 0 5px;
            line-height: 30px;
          "
          @click="
            () => {
              logger({
                page: '离线考试页面',
                button: '下载答题卡按钮',
                action: '点击',
              });
              tempDisableBtnAndDownloadPaper();
            }
          "
        >
          下载
        </a>
      </div>
    </div>

    <div class="home">
      <ecs-offline-list
        :courses="courses"
        @reload-list="fetchData"
      ></ecs-offline-list>
    </div>
  </main-layout>
</template>

<script>
import { downloadFileURL } from "@/utils/util";
import { mapState } from "vuex";
import EcsOfflineList from "./OfflineExamList.vue";

export default {
  name: "OfflineExamHome",
  components: {
    "ecs-offline-list": EcsOfflineList,
  },
  data() {
    return {
      courses: [],
      answerCardUrl: null,
      downloadUrlDisabled: false,
    };
  },
  computed: {
    ...mapState(["menus"]),
    locationTitle() {
      return (
        this.menus.find(
          (v) => v.link.toUpperCase() === this.$route.path.toUpperCase()
        ) || {}
      ).name;
    },
  },
  async mounted() {
    try {
      window._hmt.push(["_trackEvent", "离线考试页面", "进入列表", ""]);
      this.logger({ page: "离线考试页面", action: "进入页面" });
      await this.fetchData();
    } catch (error) {
      this.$Message.error({
        content: "获取离线考试列表失败",
        duration: 15,
        closable: true,
      });
    }
  },
  methods: {
    async fetchData() {
      const answerCardRes = await this.$http.get(
        "/api/ecs_core/org/getAnswersUrl/" + this.$store.state.user.rootOrgId
      );

      this.answerCardUrl = answerCardRes.data;

      const res = await this.$http.get(
        "/api/branch_ecs_oe_admin/offlineExam/getOfflineCourse"
      );

      this.courses = res.data.map((c) => ({
        examId: c.examId,
        examRecordDataId: c.examRecordDataId,
        courseName: c.courseName,
        specialtyName: c.specialtyName,
        orgName: c.orgName,
        examStudentId: c.examStudentId,
        startTime: c.startTime,
        endTime: c.endTime,
        offlineFiles: c.offlineFiles,
        paperId: c.paperId,
      }));
    },
    tempDisableBtnAndDownloadPaper() {
      window._hmt.push(["_trackEvent", "离线考试页面", "下载答题纸"]);
      this.downloadUrlDisabled = true;
      setTimeout(() => {
        this.downloadUrlDisabled = false;
      }, 10 * 1000);

      downloadFileURL(this.answerCardUrl, "答题纸模板.zip");
    },
  },
};
</script>

<style scoped>
.home {
  margin: 20px;
}
</style>
