<template>
  <div
    class="gy-question-item gy-form"
    :tag="formatQuestion.id"
    v-if="formatQuestion != null"
  >
    <!-- 左侧显示分类 -->
    <div
    class="question-type-box"
    v-if="!$route.fullPath.includes('print-paper')"
    >
      <div class="question-type">{{ formatQuestion.type }}</div>
    </div>
    <!-- 左侧显示分类结束 -->

    <!-- 右侧显示试题相关 -->
    <div class="question-area">
      <!-- 试题及选项区域 -->

      <div class="question-answer-area">
        <div class="question-title answer-item" style="margin-bottom: 10px">
          <div class="title-text">{{ serial }}. {{ formatQuestion.title }}</div>
          <div
            class="title-flag"
            v-if="[0, 2].includes(mode)"
            @click="addToFlagList"
            :style="{ color: isFlag ? '#ec0000' : '#989898' }"
          >
            <i class="i-x-kskk-biaoji"></i>
          </div>
          <div v-if="[1, 3].includes(mode)" style="margin-left: 10px">
            <i
              class="el-icon-check"
              style="font-size: 20px; color: #07c885"
              v-if="formatQuestion.userScore >= formatQuestion.score"
            ></i>
            <i
              class="el-icon-close"
              style="font-size: 20px; color: #ee0000"
              v-if="formatQuestion.userScore < formatQuestion.score"
            ></i>
          </div>
        </div>
        <!-- <p>typeid:{{ formatQuestion.typeId }} element:{{ formatQuestion.element }} id:{{ formatQuestion.id }} </p> -->
        <!-- <p>answer:{{ formatQuestion.answer }}</p> -->
        <!-- <p>options:{{ formatQuestion.options }}</p> -->
        <div class="main-form-area" v-if="[0, 2, 5, 6].includes(mode)">
          <div
            class="radio-options-list"
            v-if="
            ['radio', 'checkbox', 'radio*2'].includes(formatQuestion.element)
            "
          >
            <el-checkbox-group
              v-model="locolAnswers"
              v-if="Object.keys(formatQuestion.options[0]).includes('value')"
              :class="{
                vertical: ['radio', 'checkbox'].includes(
                  formatQuestion.element
                  ),
              }"
            >
              <el-checkbox
              class="answer-item"
                v-for="(item, ind) in formatQuestion.options"
                :key="ind"
                :label="
                  ['radio', 'checkbox'].includes(formatQuestion.element)
                    ? item.value
                    : radioWords[ind]
                "
              >
                {{
                  ["radio", "checkbox"].includes(formatQuestion.element)
                    ? radioWords[ind] + "、" + item.title
                    : item
                }}
              </el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group
              v-model="locolAnswers"
              v-else
              :class="{
                vertical: ['radio', 'checkbox'].includes(
                  formatQuestion.element
                  ),
              }"
            >
              <el-checkbox
              class="answer-item"
              v-for="(item, ind) in formatQuestion.options"
                :key="ind"
                :label="radioWords[ind]"
              >
                {{
                  formatQuestion.element === "radio*2"
                    ? item
                    : radioWords[ind] + "、" + item
                }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 填空题 -->
          <div
            class="input-options-list"
            v-if="['input'].includes(formatQuestion.element)"
          >
            <div class="gy-form">
              <div
                class="gy-form-item input answer-item"
                v-for="(item, ind) in formatQuestion.options"
                :key="ind"
              >
                <div class="gy-label answer-item">填空{{ ind + 1 }}：</div>
                <el-input
                class="answer-item"
                  type="text"
                  v-model="locolAnswers[ind]"
                  placeholder="请输入答案"
                ></el-input>
              </div>
            </div>
          </div>
          <!-- 简答题 -->
          <div
            class="textarea-options-list"
            v-if="['textarea'].includes(formatQuestion.element)"
          >
            <div class="gy-form">
              <div class="gy-form-item answer-item">
                <div class="gy-label">答案：</div>
                <el-input
                  class="answer-item"
                  type="textarea"
                  v-model="locolAnswers[0]"
                  placeholder="请输入答案"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <!-- 预览模式 -->
        <div v-if="[1, 3, 4].includes(mode)">
          <div
            class="radio-options-list"
            v-if="['radio', 'checkbox'].includes(formatQuestion.element)"
          >
            <el-checkbox-group
              v-model="locolAnswers"
              :class="{
                vertical: ['radio', 'checkbox'].includes(
                  formatQuestion.element
                  ),
              }"
            >
              <div
                v-for="(item, ind) in formatQuestion.options"
                :key="ind"
                class="gy-option answer-item"
              >
                {{
                  ["radio", "checkbox"].includes(formatQuestion.element)
                    ? radioWords[ind] + "、"
                    : ""
                }}{{ item }}
              </div>
            </el-checkbox-group>
          </div>
          <div class="gy-form">
            <div
              class="gy-form-item mb"
              style="color: #ff943d"
              v-if="[1, 3].includes(mode)"
            >
              <div class="gy-label answer-item" style="color: #ff943d">
                学员答案：
              </div>
              <div
               v-if="['radio', 'checkbox'].includes(formatQuestion.element)"
               >
                {{ formatQuestion.userAnswer?.join("、") }}
              </div>
              <div
              class="answer-item"
                v-if="
                  ['radio*2'].includes(formatQuestion.element) &&
                  formatQuestion.userAnswer?.length > 0
                "
              >
                {{ ["错误", "正确"][formatQuestion.userAnswer[0]] }}
              </div>
              <div
              class="answer-item"
              v-if="['input'].includes(formatQuestion.element)"
              >
                {{ formatQuestion.userAnswer?.join("、") }}
              </div>
              <div
              class="answer-item"
                v-if="
                  ['textarea'].includes(formatQuestion.element) &&
                  formatQuestion?.userAnswer?.length > 0
                "
              >
                {{ formatQuestion?.userAnswer[0] }}
              </div>
            </div>
            <div class="gy-form-item mb answer-item" style="color: #07c885">
              <div class="gy-label answer-item" style="color: #07c885">
              正确答案：
              </div>
              <div
              class="answer-item"
              v-if="['radio', 'checkbox'].includes(formatQuestion.element)"
                >
                {{ formatQuestion.answer?.join("、") }}
              </div>
              <div
              class="answer-item"
                v-if="
                  ['radio*2'].includes(formatQuestion.element) &&
                  formatQuestion.answer?.length > 0
                "
              >
                {{ ["错误", "正确"][formatQuestion.answer[0]] }}
              </div>
              <div
              class="answer-item"
              v-if="['input'].includes(formatQuestion.element)"
              >
                {{ formatQuestion.options?.join("、") }}
              </div>
              <div
              class="answer-item"
                v-if="
                  ['textarea'].includes(formatQuestion.element) &&
                  formatQuestion?.answer?.length > 0
                "
                style="line-height: 1.3"
              >
                {{ formatQuestion?.answer[0] }}
              </div>
            </div>
            <div class="gy-form-item mb" style="color: #ee0000">
              <div class="gy-label answer-item" style="color: #ee0000">
              答案解析：
              </div>
              <div class="answer-item" style="line-height: 1.3">
              {{ formatQuestion.analysis }}
              </div>
            </div>
            <div
              class="gy-form-item mb"
              v-if="
              mode === 3 &&
              ['input', 'textarea'].includes(formatQuestion.element)
              "
              style="color: #ee0000"
            >
              <div class="gy-label middle answer-item">本题得分：</div>
              <div v-if="mode === 1" class="answer-item">
              {{ formatQuestion.teacherComment }}
              </div>
              <div v-if="mode === 3" style="width: 80px" class="answer-item">
                <el-input
                  v-model="theQuestionEvalInfo.score"
                  type="number"
                  min="0"
                ></el-input>
              </div>
              <div
              class="gy-label middle answer-item"
              style="margin-left: 5px; font-weight: normal"
              >
                分，本题分数{{ formatQuestion.score }}分
                <!-- <el-button type="text" icon="el-icon-check" style="margin-left: 10px;">确认</el-button>
                <el-button type="text" icon="el-icon-delete">取消</el-button> -->
              </div>
            </div>
            <div
              class="gy-form-item answer-item"
              v-if="
              ['input', 'textarea'].includes(formatQuestion.element) &&
              mode != 4
              "
            >
              <div class="gy-label middle answer-item">老师评语：</div>
              <div v-if="mode === 1" class="answer-item">
              {{ formatQuestion.teacherComment }}
              </div>
              <div v-if="mode === 3" class="answer-item" style="flex-grow: 1">
                <el-input
                  v-model="theQuestionEvalInfo.comment"
                  placeholder="如需输入评语，请输入"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <!-- 题目结束 -->
        <div class="question-answer"></div>
      </div>
    </div>
    <!-- 右侧试题结束 -->
  </div>
</template>
<script>
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import { formatJsonPropertyToMap } from '@/views/assessment-evaluation/utils/questionInfoMapJsonTrans'
const globalWords = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
]
export default {
  props: {
    questionInfo: { type: Object, default: () => ({}) },
    isFlag: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    },
    serial: {
      type: Number,
      default: 1
    },
    random: {
      default: () => [0, 0],
      type: Array
    },
    // 同questionsList组件mode属性
    //  模式：0答题 1预览 2模拟考试 3判卷 4错题巩固-背题模式 5-错题巩固-答题模式  6-预览自动选中答案
    mode: {
      type: Number,
      default: 0
    },
    answer: {}
  },
  data: () => ({
    formatQuestion: null,
    // checkedOptions: [],
    locolAnswers: [],
    radioWords: globalWords,
    theQuestionEvalInfo: {
      score: 0,
      comment: ''
    }
  }),
  watch: {
    theQuestionEvalInfo: {
      deep: true,
      immediate: false,
      handler (nv) {
        if (['input', 'textarea'].includes(this.formatQuestion.element)) {
          if (
            +nv.score === +this.formatQuestion.userScore &&
            (nv.comment === '' ||
              nv.comment == null ||
              nv.comment === this.formatQuestion.teacherComment)
          ) {
            this.$emit('eval', { id: this.formatQuestion.resultId })
          } else {
            this.$emit('eval', {
              id: this.formatQuestion.resultId,
              score: +nv.score,
              comment: nv.comment
            })
          }
        }
      }
    },
    answer: {
      deep: true,
      immediate: true,
      handler (nv) {
        this.$nextTick(() => {
          if (nv) {
            this.locolAnswers = nv
          }
        })
      }
    },
    /*
      试题信息被修改
    */
    questionInfo: {
      deep: true,
      immediate: true,
      handler (nv) {
        this.locolAnswers = []
        this.formatQuestion = nv != null ? formatJsonPropertyToMap(nv) : null
        /*
          如果是判断题
        */
        if (nv.element === 'radio*2') {
          this.radioWords = [1, 0]
        } else {
          this.radioWords = globalWords
        }
        if (this.mode === 3) {
          this.theQuestionEvalInfo = {
            score: this.formatQuestion.userScore,
            comment: this.formatQuestion.teacherComment
          }
        }
        if (this.mode === 6) {
          if (nv.element === 'input') {
            this.locolAnswers = this.formatQuestion.options
          } else {
            this.locolAnswers = this.formatQuestion.answer
          }
        }
        if (Object.keys(this.formatQuestion).includes('userAnswer')) {
          this.locolAnswers = this.formatQuestion.userAnswer
        }
        if (this.random[1] === 1) {
          if (['radio', 'checkbox'].includes(this.formatQuestion.element)) {
            this.formatQuestion.options = this.formatQuestion.options.map(
              (item, ind) => {
                return {
                  value: this.radioWords[ind],
                  title: item
                }
              }
            )
            this.formatQuestion.options.sort(() => Math.random() - 0.5)
          }
        }
      }
    },
    locolAnswers: {
      deep: true,
      handler (nv) {
        if (['radio*2', 'radio'].includes(this.formatQuestion.element)) {
          if (nv?.length > 1) {
            this.locolAnswers = nv.splice(1)
          }
        }
        nv = nv != null ? nv : []
        this.$emit('answerChanged', nv)
      }
    }
  },
  mounted () {},
  methods: {
    addToFlagList () {
      this.$emit('flag', {
        isFlag: !this.isFlag,
        question: this.questionInfo
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-form-area {
  margin-bottom: 15px;
}

.gy-form-item {
  .gy-label {
    padding-left: 0;
  }
}

.gy-form-item.input {
  align-items: center;
  justify-content: flex-start;

  .el-input {
    width: auto;
  }

  & + & {
    margin-top: 10px;
  }
}

.radio-options-list {
  margin-bottom: 15px;
  ::v-deep .el-checkbox-group {
    &.vertical {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .el-checkbox {
        margin-right: 0;
        display: flex;
        align-items: center;
        .el-checkbox__label {
          white-space: pre-wrap;
          color: black;
        }

        .el-checkbox__input {
          padding-top: 3px;
          vertical-align: top;
        }
      }

      .el-checkbox + .el-checkbox {
        margin-top: 10px;
      }
    }
  }
}
::v-deep .el-checkbox__label {
  // white-space: pre-wrap;
  color: black;
  font-size: 13px;
}
.question-title {
  display: flex;
  align-items: flex-start;
  font-weight: bold;
  .title-text {
    line-height: 1.3;
    font-size: 13px;
  }

  .title-flag {
    font-size: 20px;
    padding: 0 5px;
    cursor: pointer;
  }
}

.gy-question-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  @keyframes hard-tip {
    from {
      color: #000;
    }
    to {
      color: #f00;
      // font-weight: bold;
    }
  }
  &.shine {
    .title-text {
      animation: hard-tip 0.3s infinite alternate-reverse;
    }
  }

  .question-type-box {
    flex-basis: 70px;
    min-width: 70px;
    display: flex;
  }

  .question-area {
    flex-grow: 1;
    flex-basis: 0;
  }

  .question-type {
    display: flex;
    padding: 3px 8px;
    background: $--color-primary;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
  }
}
</style>
