<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">{{data.title}}</div>
      <div class="q-item-aside" v-if="typeText">({{typeText}})</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">{{item.abc_option}}</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">{{item.abc_option}}</el-checkbox>
        </div>
      </el-checkbox-group>
      <!-- 简答题 -->
      <template v-if="type === 3">
        <v-editor v-model="currentValue.user_answer" :disabled="disabled"></v-editor>
        <v-upload v-model="currentValue.attachments">请上传对应的文件附件：</v-upload>
      </template>
    </div>
    <div class="q-item-ft" v-if="disabled">
      <template v-if="type === 3">
        <p>
          <span>老师评语：</span>
          <span>{{data.check_comment}}</span>
        </p>
      </template>
      <template v-else>
        <p>
          <span>学生答案：</span>
          <span :class="isCorrect ? 'is-success' : 'is-error'">{{submitAnswerText}}</span>
        </p>
        <p>
          <span>正确答案：</span>
          <span>{{correctAnswerText}}</span>
        </p>
      </template>
    </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 }
  },
  data() {
    return {
      currentValue: {}
    }
  },
  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
        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) {
        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;
  padding: 0 10px;
}
.q-item-aside {
  padding-left: 20px;
  // align-self: flex-end;
}
.q-option-item {
  padding-left: 30px;
  margin-bottom: 14px;
}
.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 {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
  p {
    font-size: 14px;
    margin: 0;
    padding-left: 20px;
  }
}
</style>
