<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <div class="right" style="width: 100%;">
      <!-- 头部 -->
      <div class="headBox">
        <div class="title">试卷预览</div>
        <section></section>
        <div class="btnBox">
          <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>
        </div>
      </div>
      <div class="tabBox" id="downloadtext">
        <h2 style="color: #000;text-align: center;margin-bottom: 0;">{{ textTitle }}</h2>
        <section style="color: #333;text-align: center;" v-if="type != 'exam'">考试时间：{{ examInfo.examTime }}分钟 满分：{{ scores.sTotal + scores.mTotal +scores.jTotal }}分
        </section>
        <div class="container" v-if="type != 'exam' && singleList.length">
          <div style="color: #333;">一、单选题（总共{{scores.sTotal}}分，每题{{scores.singleChoice}}分）</div>
          <div class="item" v-for="(item, index) in singleList" :key="index" :style="{ order: index + 1 }">
            <div style="line-height: 30px;">{{ index + 1 }}、 {{ item.questionname }}</div>
            <div class="spn flex m10" style="justify-content: space-between;flex-wrap:wrap;">
              <span>A、{{ item.a }} &nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span>B、{{ item.b }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.c'>C、{{ item.c }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.d'>D、{{ item.d }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="container" v-if="type != 'exam' && multipleList.length">
          <div style="color: #333;">二、多选题（总共{{scores.mTotal}}分，每题{{scores.multipleChoice}}分）</div>
          <div class="item" v-for="(item, index) in multipleList" :key="index" :style="{ order: index + 1 }">
            <div style="line-height: 30px;">{{ index + 1 }}、 {{ item.questionname }}</div>
            <div class="spn flex m10" style="justify-content: space-between;flex-wrap:wrap;">
              <span>A、{{ item.a }} &nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span>B、{{ item.b }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.c'>C、{{ item.c }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.d'>D、{{ item.d }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="container" v-if="type != 'exam' && judgeList.length">
          <div style="color: #333;">三、判断题（总共{{scores.jTotal}}分，每题{{scores.trueOrFalseQuestions}}分）</div>
          <div class="item" v-for="(item, index) in judgeList" :key="index" :style="{ order: index + 1 }">
            <div style="line-height: 30px;">{{ index + 1 }}、 {{ item.questionname }}</div>
            <div class="spn flex m10" style="justify-content: space-between;flex-wrap:wrap;">
              <span>A、{{ item.a }} &nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span>B、{{ item.b }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.c'>C、{{ item.c }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.d'>D、{{ item.d }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="container" v-if="type == 'exam'">
          <div class="item" v-for="(item, index) in list" :key="index" :style="{ order: index + 1 }">
            <div style="line-height: 30px;">{{ index + 1 }}、 {{ item.questionname }}</div>
            <div class="spn flex m10" style="justify-content: space-between;flex-wrap:wrap;">
              <span>A、{{ item.a }} &nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span>B、{{ item.b }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.c'>C、{{ item.c }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
              <span v-if='item.d'>D、{{ item.d }}&nbsp;&nbsp;&nbsp;</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineEmits, defineProps, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { exportwordFn } from "@/excel/Export2Excel.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  Row: Object,
  type: {
    type: String,
    default: ''
  }
});
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
})
const total = ref(0)
const emits = defineEmits(["close"]);
const tableloading = ref(false)
const list = ref([])
const bigHeight = ref(); //整个高度
const treeHeight = ref(""); // 树高度
const textTitle = ref('')
const examInfo = ref({})
const singleList = ref(0)
const multipleList = ref(0)
const judgeList = ref(0)
const scores = ref({})
onMounted(() => {
  bigHeightFn();
  if (props.type == 'exam') {
    listQuery.value.userId = props.Row.id
    listQuery.value.id = props.Row.examId
    textTitle.value = props.Row.username + '试卷预览'
    getExamList()
  } else {
    listQuery.value.id = props.Row.id;
    textTitle.value = props.Row.name
    listQuery.value.pageSize = props.Row.count
    getList()
    getBaseInfo()
  }
})
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};
// 获取考试基础信息
const getBaseInfo = () => {
  getApi({}, '/mosty-jcgl/exampaper/getExampaperById/' + props.Row.id).then(res => {
    examInfo.value = res
  })
}
//	查询试卷已关联的试题
const getExamList = () => {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/paper/examinationDetails').then(res => {
    if (res) {
      list.value = res.records;
      total.value = res.total
    }
  }).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 onloadtxt() {
  exportwordFn("downloadtext", textTitle.value);
}
const CloseEvent = () => {
  emits("close");
};

</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .btnBox {
      .el-select {
        margin-right: 10px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}


.tabBox {
  height: 77vh;
  border-left: 0 !important;
  overflow: scroll;

  .container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;

    /* 容器高度 */
  }

  .item {
    color: #000;
    width: 38%;
    margin: 10px 30px;

    /* 设置间距 */
    // text-align: left;
    /* 文字居中 */
    // border: 1px solid #000;
    /* 边框，仅为了视觉效果 */

  }

  .spn {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    width: 100%;
  }
}
</style>