<template>
  <section class="exam-page" @scroll="scroll">
    <section class="header">
      <h2>{{ textTitle }}</h2>
      <section class="btns">
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <Back />
          </el-icon>
          <span>返回</span>
        </el-button>
        <el-button type="primary" @click="onloadtxt">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </section>
    </section>
    <div id="downloadtext">
      <section class="info">
        <section>考试时间：{{ type != 'exam' ? examInfo.examTime : Row.defaultExamTime }}分钟</section>
        <section>满分：{{ type != 'exam' ? scores.sTotal + scores.mTotal + scores.jTotal : Row.defaultExamScore }}分</section>
      </section>
      <div class="container" v-if="type != 'exam' && judgeList.length">
        <div class="title">{{ questionType.panDuan }}、判断题（总共{{ scores.jTotal }}分，每题{{
          scores.trueOrFalseQuestions
          }}分）</div>
        <div class="item" v-for="(item, index) in judgeList" :key="index">
          <div class="questionname">{{ index + 1 }}、 {{ item.questionname }}</div>
          <div class="list">A、{{ item.a }}</div>
          <div class="list">B、{{ item.b }}</div>
          <div class="list" v-if='item.c'>C、{{ item.c }}</div>
          <div class="list" v-if='item.d'>D、{{ item.d }}</div>
        </div>
      </div>
      <div class="container" v-if="type != 'exam' && singleList.length">
        <div class="title">{{ questionType.danXuan }}、单选题（总共{{ scores.sTotal }}分，每题{{ scores.singleChoice }}分）</div>
        <div class="item" v-for="(item, index) in singleList" :key="index">
          <div class="questionname">{{ index + 1 }}、 {{ item.questionname }}</div>
          <div class="list">A、{{ item.a }}</div>
          <div class="list">B、{{ item.b }}</div>
          <div class="list" v-if='item.c'>C、{{ item.c }}</div>
          <div class="list" v-if='item.d'>D、{{ item.d }}</div>
        </div>
      </div>
      <div class="container" v-if="type != 'exam' && multipleList.length">
        <div class="title">{{ questionType.duoXuan }}、多选题（总共{{ scores.mTotal }}分，每题{{ scores.multipleChoice }}分）
        </div>
        <div class="item" v-for="(item, index) in multipleList" :key="index">
          <div class="questionname">{{ index + 1 }}、 {{ item.questionname }}</div>
          <div class="list">A、{{ item.a }}</div>
          <div class="list">B、{{ item.b }}</div>
          <div class="list" v-if='item.c'>C、{{ item.c }}</div>
          <div class="list" v-if='item.d'>D、{{ item.d }}</div>
        </div>
      </div>
    
      <div class="container" v-if="type == 'exam'">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="questionname">{{ index + 1 }}、 {{ item.questionname }}</div>
          <div class="list">A、{{ item.a }}</div>
          <div class="list">B、{{ item.b }}</div>
          <div class="list" v-if='item.c'>C、{{ item.c }}</div>
          <div class="list" v-if='item.d'>D、{{ item.d }}</div>
        </div>
      </div>
    </div>

  </section>
</template>

<script setup>
import { onMounted, ref, defineEmits, defineProps, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportwordFn } from "@/excel/Export2Excel.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  Row: Object,
  type: {
    type: String,
    default: ''
  },
  userId: String,
  username: String,
  sjRow: Object
});
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 9999
})
/** 题的中文序号 */
const questionType = ref({
  panDuan: '一',
  danXuan: '',
  duoXuan: ''
})
const total = ref(0)
const emits = defineEmits(["close"]);
const tableloading = ref(false)

const list = ref([])
const textTitle = ref('')
const examInfo = ref({})
/**单选题 */
const singleList = ref([])
/**多选题 */
const multipleList = ref([])
/**判断题 */
const judgeList = ref([])
/**是否加载完所有试题 */
const isAll = ref(false)
/**是否加载完所有试题 */
const scores = ref({})
onMounted(() => {

  if (props.type == 'exam') {
    listQuery.value.userId = props.userId
    listQuery.value.id = props.Row.examId
    // textTitle.value = props.username +props.sjRow.name+ '试卷预览'
    textTitle.value = `${props.username}（${props.sjRow.name}）试卷预览`
    getExamList()
    // getBaseInfo()
  } else {
    listQuery.value.id = props.Row.id;
    textTitle.value = props.Row.name
    listQuery.value.pageSize = props.Row.count
    getList()
    getBaseInfo()
  }
})
/**滚动 -触底加载更多 */
const scroll = (e) => {
  // listQuery.value.pageCurrent++;
  if (props.type !== 'exam') return // 预览模式已经加载完了,不需要触底加载
  if (isAll.value) return
  let el = e.target
  if (el.scrollHeight - el.scrollTop - el.clientHeight < 10) {
    listQuery.value.pageCurrent++;
    getExamList('more')
  }
}
// 获取考试基础信息
const getBaseInfo = () => {
  getApi({}, '/mosty-jcgl/exampaper/getExampaperById/' + props.Row.id).then(res => {
    examInfo.value = res
  })
}
//	查询试卷已关联的试题 /paper/examinationDetailsByResultId
const getExamList = () => {
  tableloading.value = true
  postApi(listQuery.value, '/mosty-jcgl/paper/examinationDetailsByResultId').then(res => {
    if (res) {
      const records = Array.isArray(res.records) ? res.records : []
      list.value = [...list.value, ...records];
      total.value = res.total;
      if (total.value <= listQuery.value.pageSize * listQuery.value.pageCurrent) {
        isAll.value = true
      }
    }
  }).finally(() => {
    tableloading.value = false
  })
}
//	查询试卷已关联的试题
function getList() {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/exampaper/getExamlibByPaperId').then(res => {
    singleList.value = res.records[0].singleList
    multipleList.value = res.records[0].multipleList
    judgeList.value = res.records[0].trueOrFalseList
    scores.value = res.records[0].score
    scores.value.sTotal = res.records[0].score.singleChoice * res.records[0].singleList.length
    scores.value.mTotal = res.records[0].score.multipleChoice * res.records[0].multipleList.length
    scores.value.jTotal = res.records[0].score.trueOrFalseQuestions * res.records[0].trueOrFalseList.length
    total.value = res.total
    tableloading.value = false
     /** 设置题的中文序号 */
     function setQuestionType() {
      let currCount = 0
      const chinaNumArr = ['一', '二', '三']
      if (judgeList.value?.length > 0) {
        questionType.value.panDuan = chinaNumArr[currCount]
        currCount++
      }
      if (singleList.value?.length > 0) {
        questionType.value.danXuan = chinaNumArr[currCount]
        currCount++
      }
      if (multipleList.value?.length > 0) {
        questionType.value.duoXuan = chinaNumArr[currCount]
      }
    }
    setQuestionType()
  })
}
//导出
function onloadtxt() {
  exportwordFn("downloadtext", textTitle.value);
}
const CloseEvent = () => {
  emits("close");
};

</script>

<style lang="scss" scoped>
.exam-page {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: auto;

  .header {
    width: 100%;
    background: url('~@/assets/images/exam/bj.png') no-repeat;
    background-size: 100% 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    >h2 {
      // width: 550px;
      color: #fff;
      font-size: 36px;
      text-align: center;
    }

    .btns {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }

  .info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 70px;
    box-sizing: border-box;
    flex-wrap: wrap;

    >section {
      width: 50%;
      color: #000;
      font-size: 16px;
    }
  }

  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #E7E7E7;
    padding: 0 30px;
    box-sizing: border-box;
    color: #000000;
    font-size: 16px;
  }

  .item {
    color: #000000;
    font-size: 14px;
    padding: 0 30px;
    box-sizing: border-box;

    .questionname {
      margin: 20px 0;
    }

    .list {
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background: #F7F8FA;
      color: #000;
    }
  }
}
</style>
