<template>
  <div class="q-item">
    <div class="q-item-hd">
      <div class="q-item-num">{{ index + 1 }}.</div>
      <div class="q-item-title" v-html="data.content"></div>
      <div class="q-item-aside">
        <template v-if="typeText">({{ typeText }})</template>
        <template v-if="data.hasOwnProperty('score')">({{ data.score }}分)</template>
      </div>
    </div>
    <div class="q-item-bd">
      <!-- 单选 -->
      <el-radio-group v-model="currentValue.user_answer" v-if="type === 1">
        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
          <el-radio :class="genClass(item)" :label="item.id">
            <div class="q-option-item__answer" v-html="item.abc_option"></div>
          </el-radio>
        </div>
      </el-radio-group>
      <!-- 多选 -->
      <el-checkbox-group v-model="currentValue.user_answer" v-if="type === 2">
        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
          <el-checkbox :class="genClass(item)" :label="item.id">
            <div class="q-option-item__answer" v-html="item.abc_option"></div>
          </el-checkbox>
        </div>
      </el-checkbox-group>
      <!-- 简答题 -->
      <template v-if="type === 3">
        <v-editor v-model="currentValue.user_answer" :disabled="disabled"></v-editor>
        <v-upload :disabled="disabled" v-model="currentValue.attachments">请上传对应的文件附件：</v-upload>
      </template>
    </div>
    <div class="q-item-ft" v-if="disabled && showResult">
      <template v-if="type === 3">
        <p v-if="data.check_comment">
          <span>评语：</span>
          <span>{{ data.check_comment }}</span>
        </p>
      </template>
      <template v-else>
        <div class="result">
          <p>
            <span>学生答案：</span>
            <span :class="isCorrect ? 'is-success' : 'is-error'">{{ submitAnswerText }}</span>
          </p>
          <p>
            <span>正确答案：</span>
            <span>{{ correctAnswerText }}</span>
          </p>
        </div>
      </template>
      <p v-if="data.hasOwnProperty('get_score')">
        <span>评分：</span>
        <span>{{ data.get_score }}分</span>
      </p>
      <div class="analyze" v-if="data.analysis">
        <span>解析：</span>
        <div class="analyze-main">
          <span style="color: blue; cursor: pointer" @click="showAnalyze = !showAnalyze">查看解析</span>
          <div v-html="data.analysis" v-if="data.analysis" v-show="showAnalyze" class="analyze-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// components
import VEditor from '../common/editor.vue'
import VUpload from '../common/upload.vue'

export default {
  name: 'ExamItem',
  components: { VEditor, VUpload },
  props: {
    // 索引
    index: { type: Number },
    // 问题类型
    type: { type: Number },
    // 单条数据
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    // 提交的答案
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否禁用，提交过的是禁用状态
    disabled: { type: Boolean, default: false },
    showResult: { type: Boolean, default: true }
  },
  data() {
    return {
      currentValue: {},
      showAnalyze: false
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.currentValue = value
      }
    }
  },
  computed: {
    // 26个英文字母
    A_Z() {
      const result = []
      for (let i = 0; i < 26; i++) {
        result.push(String.fromCharCode(65 + i))
      }
      return result
    },
    // 选项类型
    typeText() {
      const map = { 1: '单选题', 2: '多选题' }
      return map[this.type]
    },
    // 处理后的options数据
    currentOptions() {
      if (!this.data.options) {
        return []
      }
      return this.data.options.map((item, index) => {
        // 英文字母 + 名称
        item.abc = this.A_Z[index]
        item.abc_option = `${this.A_Z[index]}. ${item.option}`
        // 提交时的选中状态
        const value = this.value.user_answer || ''
        item.selected = Array.isArray(value) ? value.includes(item.id) : value === item.id
        // 处理正确的选中状态
        const hasChecked = Object.prototype.hasOwnProperty.call(item, 'checked')
        const rightAnswer = this.data.right_answer || ''
        if (!hasChecked && rightAnswer) {
          item.checked = Array.isArray(rightAnswer) ? rightAnswer.includes(item.id) : rightAnswer === item.id
        }
        return item
      })
    },
    // 正确答案显示的英文字母
    correctAnswerText() {
      const result = this.currentOptions.reduce((result, item) => {
        item.checked && result.push(item.abc)
        return result
      }, [])
      return result.join('、')
    },
    // 提交答案显示的英文字母
    submitAnswerText() {
      const result = this.currentOptions.reduce((result, item) => {
        item.selected && result.push(item.abc)
        return result
      }, [])
      return result.join('、')
    },
    // 是否回答正确
    isCorrect() {
      const options = this.currentOptions
      for (let i = 0; i < options.length; i++) {
        if (options[i].checked !== !!options[i].selected) {
          return false
        }
      }
      return true
    }
  },
  methods: {
    // 生成class
    genClass(item) {
      if (!this.disabled || !this.showResult) {
        return null
      }
      return {
        'is-error': !this.isCorrect && item.selected,
        'is-success': this.isCorrect && item.selected
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.q-item {
  font-size: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #c9c9c97a;
  .upload {
    font-size: 14px;
  }
}
.q-item-hd {
  display: flex;
  padding: 10px 0 20px;

  ::v-deep p {
    margin: 0;
    padding: 0;
  }
  ::v-deep ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
.q-item-num {
  width: 20px;
  text-align: center;
}
.q-item-title {
  flex: 1;
  ::v-deep img {
    max-width: 100%;
  }
}
.q-item-aside {
  padding-left: 20px;
  // align-self: flex-end;
}
.q-option-item {
  padding-left: 20px;
  margin-bottom: 14px;
}
.q-option-item__answer {
  display: inline;
  ::v-deep * {
    display: inline;
  }
}
.is-success {
  color: #090;
}
.is-error {
  color: #d80000;
}
::v-deep .el-radio {
  &.is-disabled .el-radio__label {
    color: #3c3c3c;
  }
  &.is-error .el-radio__label {
    color: #d80000;
  }
  &.is-success .el-radio__label {
    color: #090;
  }
}
::v-deep .el-checkbox {
  &.is-disabled .el-checkbox__label {
    color: #3c3c3c;
  }
  &.is-error .el-checkbox__label {
    color: #d80000;
  }
  &.is-success .el-checkbox__label {
    color: #090;
  }
}
.q-item-ft {
  padding: 10px 0;
  p {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
  .result {
    display: flex;
    justify-content: flex-end;
    p {
      padding-left: 20px;
    }
  }
  .analyze {
    display: flex;
    font-size: 14px;
  }
  .analyze-main {
    flex: 1;
    overflow: hidden;
  }
  .analyze-content {
    margin-top: 10px;
    background-color: #c9c9c97a;
    border: 1px solid #c9c9c97a;
    padding: 10px;
    ::v-deep * {
      margin: 0;
      padding: 0;
      max-width: 100%;
    }
  }
}
</style>
