<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  {
    type: 'single',
    title: '第一题单选题(本题分值1分)',
    score: 1,
    list: [
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: true,
          },
          {
            title: 'B.答案2',
            isRight: false,
          },
          {
            title: 'B.答案3',
            isRight: '',
          },
          {
            title: 'B.答案4',
            isRight: '',
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: '',
          },
          {
            title: 'B.答案2',
            isRight: true,
          },
          {
            title: 'B.答案3',
            isRight: '',
          },
          {
            title: 'B.答案4',
            isRight: false,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
    ],
  },
  {
    type: 'single',
    title: '第二题多选题(本题分值1分)',
    score: 1,
    list: [
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: true,
          },
          {
            title: 'B.答案2',
            isRight: true,
          },
          {
            title: 'B.答案3',
            isRight: true,
          },
          {
            title: 'B.答案4',
            isRight: false,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: false,
          },
          {
            title: 'B.答案2',
            isRight: true,
          },
          {
            title: 'B.答案3',
            isRight: false,
          },
          {
            title: 'B.答案4',
            isRight: true,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
    ],
  },
  {
    type: 'single',
    title: '第三题判断题(本题分值1分)',
    score: 1,
    list: [
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: true,
          },
          {
            title: 'B.答案2',
            isRight: false,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
      {
        title: '这是本题的题目，请选择',
        answer: [
          {
            title: 'A.答案1',
            isRight: false,
          },
          {
            title: 'B.答案2',
            isRight: true,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
    ],
  },
  {
    type: 'single',
    title: '第四题填空题(本题分值1分)',
    score: 1,
    list: [
      {
        title: '1.这是本题的题目(),(),()',
        answer: [
          {
            title: 'A.填空',
            answertext: '考生输入的答案1',
            isRight: true,
          },
          {
            title: 'B.填空',
            answertext: '考生输入的答案2',
            isRight: true,
          },
          {
            title: 'C.填空',
            answertext: '考生输入的答案3',
            isRight: false,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
      {
        title: '2.这是本题的题目(),(),()',
        answer: [
          {
            title: 'A.填空',
            answertext: '考生输入的答案1',
            isRight: true,
          },
          {
            title: 'B.填空',
            answertext: '考生输入的答案2',
            isRight: false,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
    ],
  },
  {
    type: 'single',
    title: '第五题简答题(本题分值1分)',
    score: 1,
    list: [
      {
        title: '1.这是本题的题目。',
        answer: [
          {
            title: '这是一个简答题',
            answertext:
              '考生输入的答案考生输入的答案考生输入的答案考生输入的答案考生输入的答案考生输入的答案',
            Correctanswer: '正确答案正确答案正确答案正确答案正确答案正确答案',
            isRight: true,
          },
        ],
        AnswerExplanation:
          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
      },
    ],
  },
]) as any
</script>
<template>
  <view class="knowledgebase_exam_explanation">
    <view class="knowledgebase_exam_explanation_title">
      考试名称考试名称考试名称考试考试名称考试名称考试名称
    </view>
    <view class="knowledgebase_exam_explanation_content">
      <view class="knowledgebase_exam_explanation_content_title">
        考试说明
      </view>
      <view class="knowledgebase_exam_explanation_content_text">
        考试说明考试说明考试说明考试说明考试说明考试说明考试说明。
      </view>
    </view>
    <view class="knowledgebase_exam_explanation_float">
      <view class="knowledgebase_exam_explanation_float_title">
        考试总分
        <span class="knowledgebase_exam_explanation_float_title_score"
          >100分</span
        ></view
      >
      <view class="knowledgebase_exam_explanation_float_title">
        及格分数
        <span class="knowledgebase_exam_explanation_float_title_score"
          >60分</span
        ></view
      >
      <view class="knowledgebase_exam_explanation_float_title">
        考试时长
        <span class="knowledgebase_exam_explanation_float_title_score"
          >90分钟</span
        ></view
      >
      <view class="knowledgebase_exam_explanation_float_title">
        考生得分
        <span
          class="knowledgebase_exam_explanation_float_title_score"
          style="color: #215acd"
          >80分</span
        ></view
      >
      <view class="knowledgebase_exam_explanation_float_title">
        考试结果
        <span
          class="knowledgebase_exam_explanation_float_title_score"
          style="color: #38b865"
          >及格</span
        ></view
      >
    </view>
    <view class="AnswerDetails">
      <view class="AnswerDetails_title">答题详情</view>
      <view class="AnswerDetails_content" v-for="value in list">
        <view class="AnswerDetails_content_box">
          <view class="AnswerDetails_content_title">{{ value.title }}</view>
          <view class="AnswerDetails_content_item" v-for="items in value.list">
            <view class="Thisquestiontitle">
              <view class="AnswerDetails_content_item_title">
                {{ items.title }}
              </view>
              <view class="AnswerDetails_content_item_answer">
                <text
                  :style="
                    values.isRight === true
                      ? 'color: #38B865'
                      : values.isRight === false
                        ? 'color: #EB5E12'
                        : ''
                  "
                  v-for="values in items?.answer"
                  :key="values.title"
                >
                  <text
                    v-if="
                      value.title.includes('单选题') ||
                      value.title.includes('多选题') ||
                      value.title.includes('判断题')
                    "
                    >{{ values.title }}</text
                  >
                  <text v-else-if="value.title.includes('填空题')">{{
                    ` ${values.title}: ${values.answertext}`
                  }}</text>
                  <text v-else-if="value.title.includes('简答题')">{{
                    ` ${values.title}: ${values.answertext}`
                  }}</text>
                  <wd-icon
                    v-if="values.isRight"
                    style="
                      color: #38b865;
                      text-align: center;
                      margin-left: 20rpx;
                    "
                    name="check-circle-filled"
                    size="16px"
                  ></wd-icon>
                  <wd-icon
                    v-else-if="values.isRight === false"
                    style="
                      color: #eb5e12;
                      text-align: center;
                      margin-left: 20rpx;
                    "
                    name="close-circle-filled"
                    size="16px"
                  ></wd-icon>
                </text>
              </view>
            </view>
            <view class="AnswerExplanation_box">
              <view class="Correctanswer" style="margin-bottom: 48rpx">
                <text class="Correctanswer_title">正确答案 : </text>
                <text
                  v-if="value.title.includes('简答题')"
                  class="Correctanswer_title Content"
                  v-for="values in items?.answer.filter((a) => a.isRight)"
                  :key="values.title"
                >
                  {{ `${values.Correctanswer};` }}
                </text>
                <text
                  v-else
                  class="Correctanswer_title Content"
                  v-for="values in items?.answer.filter((a) => a.isRight)"
                  :key="values.title"
                >
                  {{ `${values.title};` }}
                </text>
              </view>
              <view class="AnswerExplanation">
                <view class="Correctanswer_title" style="margin-bottom: 32rpx"
                  >答案解析:</view
                >
                <text class="Correctanswer_Content">{{
                  items.AnswerExplanation
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
html,
body {
  overflow: hidden;
}
.knowledgebase_exam_explanation {
  height: calc(100vh - 88rpx);
  display: flex;
  flex-direction: column;
  padding: 24rpx;
  box-sizing: border-box;
}
.knowledgebase_exam_explanation_title {
  font-family: Alibaba PuHuiTi 2;
  font-weight: 500;
  font-style: 65 Medium;
  font-size: 48rpx;
  leading-trim: NONE;
  line-height: 48rpx;
  letter-spacing: 0px;
  color: #31373d;
}
.knowledgebase_exam_explanation_content {
  margin-top: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  .knowledgebase_exam_explanation_content_title {
    font-weight: 500;
    font-style: 65 Medium;
    font-size: 36rpx;
    leading-trim: NONE;
    letter-spacing: 0px;
    color: #31373d;
  }
  .knowledgebase_exam_explanation_content_text {
    font-weight: 400;
    font-style: 55 Regular;
    font-size: 28rpx;
    line-height: 48rpx;
    letter-spacing: 0px;
    color: #4e5969;
  }
}
.knowledgebase_exam_explanation_float {
  margin-top: 48rpx;
  margin-bottom: 48rpx;
  border-top: 1rpx solid #eeeeee;
  border-bottom: 1rpx solid #eeeeee;
  padding-top: 48rpx;
  padding-bottom: 48rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  .knowledgebase_exam_explanation_float_title {
    font-weight: 400;
    font-style: 55 Regular;
    font-size: 28rpx;
    letter-spacing: 0px;
    color: #4e5969;
    .knowledgebase_exam_explanation_float_title_score {
      margin-left: 48rpx;
      color: #31373d;
    }
  }
}
.AnswerDetails {
  flex: 1;
  overflow-y: auto;
  .AnswerDetails_title {
    font-weight: 500;
    font-style: 65 Medium;
    font-size: 36rpx;
    leading-trim: NONE;
    letter-spacing: 0px;
    color: #31373d;
    margin-bottom: 48rpx;
  }
  .AnswerDetails_content {
    // width: 100%;
    // display: flex;
    // flex-direction: column;
    // gap: 24rpx;
    margin-bottom: 24rpx;
    .AnswerDetails_content_box {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
    }
    .AnswerDetails_content_title {
      width: 100%;
      height: 96rpx;
      background-color: #f7f9fa;
      padding-left: 32rpx;
      box-sizing: border-box;
      line-height: 88rpx;

      font-weight: 500;
      font-size: 32rpx;
      color: #31373d;
    }
    .AnswerDetails_content_item {
      box-sizing: border-box;
      padding: 32rpx;
      width: 100%;
      background-color: #f7f9fa;
      .Thisquestiontitle {
        border-bottom: 1rpx solid #e6e8eb;
        box-sizing: border-box;
        padding-bottom: 48rpx;
        margin-bottom: 48rpx;
        .AnswerDetails_content_item_title {
          margin-bottom: 48rpx;
          font-weight: 400;
          font-size: 32rpx;
          color: #31373d;
        }
        .AnswerDetails_content_item_answer {
          display: flex;
          flex-direction: column;
          gap: 52rpx;

          font-weight: 400;
          font-size: 28rpx;
          color: #31373d;
        }
      }
      .AnswerExplanation_box {
        .Correctanswer_title {
          font-weight: 400;
          font-size: 28rpx;
          color: #31373d;
        }
        .Content {
          color: #38b865;
          margin-right: 10rpx;
        }
        .Correctanswer_Content {
          font-weight: 400;
          font-size: 32rpx;
          color: #4e5969;
          line-height: 56rpx;
        }
      }
    }
  }
}
</style>
