<template>
  <div>
    <el-dialog v-model="props.examShow" title="错题练习" width="1300px" draggable :before-close="handleClose">
      <div class="main" v-if="item">
        <div class="left">
          <div class="examtitle">
            <span class="name">{{ props.examObj.name }}</span>
          </div>
          <div class="xqxxbox">
            <ul>
              <li>学员账号：{{ props.examObj.userId }}</li>
              <li>所属部门：{{ getItem("deptId").ssbmmc }}</li>
              <li>考试成绩：{{ props.examObj.examScore }}分</li>
              <li>考试状态：{{ props.examObj.examScore >= props.examObj.hgfs ? '通过' : '未通过' }}</li>
              <li>开始时间：{{ props.examObj.startTime }}</li>
              <li>结束时间：{{ props.examObj.endTime }}</li>
            </ul>
          </div>
          <!-- 判断题 -->
          <div class="examtx" v-if="pdList && pdList.length > 0">
            <div class="txbox">一、判断题</div>
            <div class="cout">共{{ pdList.length }}道，每题{{ examPaper.trueOrFalseQuestions }}分，满分{{ pdList.length *
              examPaper.trueOrFalseQuestions }}分</div>
          </div>
          <div class="exambox" v-for="(item, index) in list" :key="index">
            <!-- 判断题 -->
            <div class="content" v-if="item.qtype == '0'" :id="`anchor-${index + 1}`">
              <span class="qtype">{{ index + 1 }}.</span>{{ item.questionname }}
            </div>
            <div class="answer_area" v-if="item.qtype == '0'">
              <el-radio-group v-model="item.checked" @change="changeAnswer($event, item)">
                <div class="exam">
                  <el-radio :label="'T'" size="large">{{ "T、" + item.a
                    }}</el-radio>
                  <el-radio :label="'F'" size="large">{{ "F、" + item.b }}</el-radio>
                </div>
              </el-radio-group>
              <div class="btns">
                <el-button @click="clickFlag(item)"><el-icon>
                    <Flag />
                  </el-icon><span v-if="!item.isFlag">&nbsp;标记</span><span
                    v-if="item.isFlag">&nbsp;取消标记</span></el-button>
              </div>
              <div class="answer">
                <div>正确答案：{{ item.answer }}</div>
                <div>答案解析：{{ item.answerparse || '无' }}</div>
              </div>
            </div>

          </div>

          <div class="examtx" v-if="danXList && danXList.length > 0">
            <div class="txbox">二、单选题</div>
            <div class="cout">共{{ danXList.length }}道，每题{{ examPaper.singleChoice }}分，满分{{ danXList.length *
              examPaper.singleChoice }}分</div>
          </div>
          <div class="exambox" v-for="(item, index) in list" :key="index">
            <!-- 单选题 -->
            <div class="content" v-if="item.qtype == '1'" :id="`anchor-${index + 1}`">
              <span class="qtype">{{ index + 1 }}.</span>
              {{ item.questionname }}
            </div>
            <div class="answer_area" v-if="item.qtype == '1'">
              <el-radio-group v-model="item.checked" @change="changeAnswer($event, item)">
                <div class="exam">
                  <el-radio :label="'A'" size="large">{{ "A、" + item.a }}</el-radio>
                  <el-radio :label="'B'" size="large">{{ "B、" + item.b }}</el-radio>
                  <el-radio :label="'C'" size="large">{{ "C、" + item.c }}</el-radio>
                  <el-radio :label="'D'" size="large">{{ "D、" + item.d }}</el-radio>
                </div>
              </el-radio-group>
              <div class="btns">
                <el-button @click="clickFlag(item)"><el-icon>
                    <Flag />
                  </el-icon><span v-if="!item.isFlag">&nbsp;标记</span><span
                    v-if="item.isFlag">&nbsp;取消标记</span></el-button>
              </div>
              <div class="answer">
                <div>正确答案：{{ item.answer }}</div>
                <div>答案解析：{{ item.answerparse || '无' }}</div>
              </div>
            </div>
          </div>

          <div class="examtx" v-if="duoXList && duoXList.length > 0">
            <div class="txbox">三、多选题</div>
            <div class="cout">共{{ duoXList.length }}道，每题{{ examPaper.multipleChoice }}分，满分{{ duoXList.length *
              examPaper.multipleChoice }}分</div>
          </div>
          <div class="exambox" v-for="(item, index) in list" :key="index">
            <div class="content" v-if="item.qtype == '2'" :id="`anchor-${index + 1}`">
              <span class="qtype">{{ index + 1 }}.</span>
              {{ item.questionname }}
            </div>
            <div class="answer_area" v-if="item.qtype == '2'">
              <el-checkbox-group v-model="item.checked" @change="changeAnswer($event, item)">
                <div class="exam">
                  <el-checkbox :label="'A'" size="large">{{ "A、" + item.a }}</el-checkbox>
                  <el-checkbox :label="'B'" size="large">{{ "B、" + item.b }}</el-checkbox>
                  <el-checkbox :label="'C'" size="large">{{ "C、" + item.c }}</el-checkbox>
                  <el-checkbox :label="'D'" size="large">{{ "D、" + item.d }}</el-checkbox>
                </div>
              </el-checkbox-group>
              <div class="btns">
                <el-button @click="clickFlag(item)"><el-icon>
                    <Flag />
                  </el-icon><span v-if="!item.isFlag">&nbsp;标记</span><span
                    v-if="item.isFlag">&nbsp;取消标记</span></el-button>
              </div>
              <div class="answer">
                <div>正确答案：{{ item.answer }}</div>
                <div>答案解析：{{ item.answerparse || '无' }}</div>
              </div>
            </div>

          </div>
        </div>
        <div class="right">
          <div class="right_item" v-if="pdList && pdList.length > 0">
            <div>判断题（共{{ pdList.length }}道）</div>
            <div class="list">
              <div v-for="(it, inde) in list" :key="inde" @click="selectOne(inde)">
                <div class="listItem" v-if="it.qtype == '0'">
                  <div class="index" :style="{
                    backgroundColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)',
                    borderColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)'
                  }">{{ inde + 1 }}</div>
                  <div class="flag">
                    <el-icon v-if="it.isFlag" :color="'var(--el-color-primary)'">
                      <Flag />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_item" v-if="danXList && danXList.length > 0">
            <div>单选题（共{{ danXList.length }}道）</div>
            <div class="list">
              <div v-for="(it, inde) in list" :key="inde" @click="selectOne(inde)">
                <div class="listItem" v-if="it.qtype == '1'">
                  <div class="index" :style="{
                    backgroundColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)',
                    borderColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)'
                  }">{{ inde + 1 }}</div>
                  <div class="flag">
                    <el-icon v-if="it.isFlag" :color="'var(--el-color-primary)'">
                      <Flag />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_item" v-if="duoXList && duoXList.length > 0">
            <div>多选题（共{{ duoXList.length }}道）</div>
            <div class="list">
              <div v-for="(it, inde) in list" :key="inde" @click="selectOne(inde)">
                <div class="listItem" v-if="it.qtype == '2'">
                  <div class="index" :style="{
                    backgroundColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)',
                    borderColor: it.isTrue ? 'var(--el-color-primary)' : 'rgb(231, 61, 61)'
                  }">{{ inde + 1 }}</div>
                  <div class="flag">
                    <el-icon v-if="it.isFlag" :color="'var(--el-color-primary)'">
                      <Flag />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button type="primary" @click="handleClose">
            <el-icon>
              <Close />
            </el-icon>关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
// 数据
const props = defineProps({
  examShow: {
    type: Boolean,
    default: true
  },
  resultId: {
    type: String,
    default: ""
  },
  examObj: {
    type: Object,
    default: {}
  },
  examId: {
    type: String,
    default: ""
  }
});
const examPaper = ref({});
// 题目列表
const list = ref([]);
// 当前题目下标
const index = ref(0);
// 当前题目对象
const item = ref(null);
const emits = defineEmits(["changeVi3"]);
const pdList = ref([])
const danXList = ref([])
const duoXList = ref([])
// 初始化
onMounted(() => {
  // 查询考试试题列表
  getErrorExamList(props.resultId);
  getExampaperInfo(props.examId)
});
// 获取试卷详情
const getExampaperInfo = (id) => {
  getApi({}, "/mosty-jcgl/paper/getInfo?id=" + id).then((res) => {
    examPaper.value = res || {};

  });
};
// 右侧选中一个
const selectOne = (inde) => {
  document.querySelector('#anchor-' + (inde + 1)).scrollIntoView(true);
};
// 标记、取消标记
const clickFlag = () => {
  item.value.isFlag = !item.value.isFlag
}
// 上一题
const prev = () => {
  index.value = index.value - 1;
  item.value = list.value[index.value];
};
// 下一题
const next = () => {
  index.value = index.value + 1;
  item.value = list.value[index.value];
};
// 切换答案
const changeAnswer = (e, val) => {

  list.value.forEach(item => {
    if (item.id == val.id) {
      item.checked = e
      let answer; let checked;
      if (item.qtype == '2') {
        checked = item.checked.join('')
      } else {
        checked = item.checked
      }
      answer = item.answer
      answer = answer.split('').sort().join('')
      checked = checked.split('').sort().join('')
      item.isTrue = answer === checked
    }
  })
};
const getErrorExamList = async (id) => {
  getApi({}, "/mosty-jcgl/paper/practiceErrorPaper?id=" + id).then((res) => {
    list.value = res
    list.value.forEach((item) => {
      item.isTrue = false
      if (item.qtype == "2") {
        item.checked = item.error.split('');
      } else {
        item.checked = item.error
      }
    });
    item.value = res[index.value];
    pdList.value = res.filter(item => { return item.qtype == '0' })
    danXList.value = res.filter(item => { return item.qtype == '1' })
    duoXList.value = res.filter(item => { return item.qtype == '2' })
  });
};
// 关闭弹窗
const handleClose = () => {
  emits("changeVi3", false);
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
  color: #000;
  background-color: #eff0f261;
  display: block !important;
  margin: 10px 0px;
  line-height: 43px;
  padding: 0 10px;
}

::v-deep .el-radio {
  color: #000;
  width: 558px !important;
  background-color: #eff0f261;
  display: block !important;
  margin: 10px 0px;
  padding: 0 10px;
}

.el-radio.el-radio--large {
  height: 34px;
  line-height: 34px;
}

.main {
  height: 500px;
  display: flex;

  .right {
    width: 30%;
    padding: 0 20px;
    overflow: auto;

    .right_item {
      margin-bottom: 15px;

      .list {
        display: flex;
        flex-wrap: wrap;

        .listItem {
          cursor: pointer;
          margin: 15px 0 0 15px;
          width: 30px;
          height: 42px;
          background: #e9e6e6;

          >div {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
          }

          .index {
            height: 25px;
            border-bottom: 2px solid #fff;
            color: #fff;
          }
        }
      }
    }
  }

  .left {
    height: 550px;
    // width: 600px;
    margin: 0 40px;
    background-color: #f2f5f5;
    padding-right: 20px;
    overflow-y: scroll;
    border-right: 1px solid var(--el-color-primary);

    .examtitle {
      height: 16vh;
      width: 100%;
      background: var(--el-color-primary);

      .name {
        height: 49px;
        color: #fff;
        display: block;
        text-align: center;
        font-size: 31px;
        padding: 5vh;
        font-weight: 500;
      }
    }

    .xqxxbox {
      height: 15vh;
      flex-wrap: wrap;
      background: #fff;
      box-shadow: 0px 2px 12px -4px rgba(0, 0, 0, 0.08);

      >ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 20px;

        >li {
          width: 50%;
          height: 3vh;
          color: #000;
          font-size: 15px;
        }
      }
    }

    .examtx {
      margin-top: 10px;
      background-color: #eeeeee;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      box-shadow: 0px 2px 12px -4px rgba(0, 0, 0, 0.08);

      .txbox {
        color: #000;
        font-size: 15px;
        font-weight: 400;
      }

      .cout {
        color: #000;
        font-size: 13px;
      }
    }

    .btns {
      width: 100%;
      padding-bottom: 5px;
      padding-right: 30px;
      text-align: right;
    }

    .answer {
      background: #eeeded;
      padding: 10px;
      border-radius: 12px;
      line-height: 30px;
    }

    .answer_area {
      margin-top: 15px;

      .exam {
        display: flex;
        flex-direction: column;
      }
    }

    .exambox {
      background-color: #fff;
      padding: 0 20px;
    }

    .content {
      font-size: 16px;
      line-height: 22px;
      padding-top: 10px;

      .qtype {
        color: var(--el-color-primary);
        font-weight: 500;
        margin-right: 11px;
      }
    }

    .top {
      font-size: 20px;
      font-weight: 900;

      >span {
        color: var(--el-color-primary);
      }
    }
  }
}

.countdown {
  line-height: 50px;
  color: red;
  font-size: 16px;
  font-weight: 800;
}

::v-deep .el-checkbox {
  color: #000;
}

::v-deep .el-radio {
  color: #000;
}

// .redcolo {
//   border-color: red;
//   color: red;
//   background-color: rgb(241, 196, 196);
//   // background: red;
// }

// .greencol {
//   color: var(--el-color-primary);
//   border-color: var(--el-color-primary);
//   background-color: rgb(216, 247, 236);
//   // background: var(--el-color-primary);
// }

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: red;
  background: red;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
</style>
