<template>
  <div class="single-selection-wrapper">
    <el-form
      ref="addform"
      :model="formInfo"
      label-width="120px"
      :rules="rules"
    >
      <el-form-item
        label="题干"
        prop="outline"
      >
        <el-input
          v-model="formInfo.outline"
          type="textarea"
          autosize
        />
      </el-form-item>
      <el-form-item v-for="(item,index) in curIndex" :label="item" :prop="item">
        <el-input
          v-model="formInfo[item]"
          type="textarea"
          autosize
        />
        <div class="other-wrapper">
          <div class="">
            正确选项:<el-radio v-model="answer" :label="item" />
          </div>
          <el-button v-show="index === curIndex.length -1" icon="el-icon-delete" @click="cancelSelection" />
        </div>
      </el-form-item>
      <div class="addSelectionBtn-wrapper">
        <el-button type="success" @click="addSelection">新增选项</el-button>
      </div>
      <el-form-item
        label="解析"
        prop="analysis"
      >
        <el-input
          v-model="formInfo.analysis"
          type="textarea"
          autosize
        />
      </el-form-item>
      <el-form-item
        label="分值"
        prop="score"
      >
        <el-input
          v-model="formInfo.score"
          type="textarea"
          autosize
        />
      </el-form-item>
    </el-form>
    <div class="tools-wrapper">
      <el-button type="primary" @click="saveAndAdd">保存并继续添加</el-button>
      <el-button type="primary" @click="saveSingleSelection">保存</el-button>
      <el-button type="text" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalIndex: ['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'],
      curIndex: ['A', 'B', 'C', 'D'],
      answer: '',
      formInfo: {
        outline: '',
        analysis: '',
        score: '',
        A: '',
        B: '',
        C: '',
        D: ''
      },
      rules: {
        outline: [
          {
            required: true,
            message: '请输入题干',
            trigger: 'blur'
          }
        ],
        analysis: [
          {
            required: true,
            message: '请输入解析',
            trigger: 'blur'
          }
        ],
        score: [
          {
            required: true,
            message: '请输入分值',
            trigger: 'blur'
          }
        ],
        A: [
          {
            required: true,
            message: '请输入选项内容',
            trigger: 'blur'
          }
        ],
        B: [
          {
            required: true,
            message: '请输入选项内容',
            trigger: 'blur'
          }
        ],
        C: [
          {
            required: true,
            message: '请输入选项内容',
            trigger: 'blur'
          }
        ],
        D: [
          {
            required: true,
            message: '请输入选项内容',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    addSelection() {
      // 新增选项
      this.curIndex = this.totalIndex.slice(0, this.curIndex.length + 1)
      this.formInfo[this.curIndex[this.curIndex.length - 1]] = ''
      this.rules[this.curIndex[this.curIndex.length - 1]] = [
        {
          required: true,
          message: '请输入内容',
          trigger: 'blur'
        }
      ]
    },
    cancelSelection() {
      const tempGot = this.curIndex.pop()
      delete this.rules[tempGot]
      delete this.formInfo[tempGot]
    },
    goback() {
      // goback
      this.$router.push({
        path: '/exam/manage/112233'
      })
    },
    saveSingleSelection() {
      // axios
      // 调用
    },
    saveAndAdd() {
      // axios
      // 恢复初始状态
    }
  }
}
</script>

<style lang="scss" scoped>
  .other-wrapper {
    display: flex;
    justify-content: space-between;
  }
</style>
