<template>
  <div class="multi-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.key" :prop="item.key">
        <el-input
          v-model="formInfo[item]"
          type="textarea"
          autosize
        />
        <div class="other-wrapper">
          <div class="">
            正确选项:<el-checkbox v-model="item.value" />
          </div>
          <el-button v-show="index === curIndex.length -1" icon="el-icon-delete" @click="deleteItem" />
        </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="save">保存</el-button>
      <el-button type="text" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalIndex: [
        {
          key: 'A',
          value: false
        },
        {
          key: 'B',
          value: false
        },
        {
          key: 'C',
          value: false
        },
        {
          key: 'D',
          value: false
        },
        {
          key: 'E',
          value: false
        },
        {
          key: 'F',
          value: false
        },
        {
          key: 'G',
          value: false
        },
        {
          key: 'H',
          value: false
        },
        {
          key: 'I',
          value: false
        },
        {
          key: 'J',
          value: false
        },
        {
          key: 'K',
          value: false
        },
        {
          key: 'L',
          value: false
        },
        {
          key: 'M',
          value: false
        },
        {
          key: 'N',
          value: false
        },
        {
          key: 'O',
          value: false
        },
        {
          key: 'P',
          value: false
        },
        {
          key: 'Q',
          value: false
        },
        {
          key: 'R',
          value: false
        },
        {
          key: 'S',
          value: false
        },
        {
          key: 'T',
          value: false
        },
        {
          key: 'U',
          value: false
        },
        {
          key: 'V',
          value: false
        },
        {
          key: 'W',
          value: false
        },
        {
          key: 'X',
          value: false
        },
        {
          key: 'Y',
          value: false
        },
        {
          key: 'Z',
          value: false
        }
      ],
      curIndex: [
        {
          key: 'A',
          value: false
        },
        {
          key: 'B',
          value: false
        },
        {
          key: 'C',
          value: false
        },
        {
          key: 'D',
          value: false
        }
      ],
      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() {
      //
      const tempArr = this.totalIndex.slice(0, this.curIndex.length + 1)
      for (let i = 0; i < this.curIndex.length; i++) {
        tempArr[i].value = this.curIndex[i].value
      }
      this.curIndex = tempArr
      this.formInfo[this.curIndex[this.curIndex.length - 1].key] = ''
      this.rules[this.curIndex[this.curIndex.length - 1].key] = [
        {
          required: true,
          message: '请输入选项内容',
          trigger: 'blur'
        }]
    },
    goback() {
      //
      this.$router.push({
        path: '/exam/manage/5556666565'
      })
    },
    save() {},
    saveAndAdd() {},
    deleteItem() {
      const popGet = this.curIndex.pop()
      delete this.formInfo[popGet.key]
      delete this.rules[popGet.key]
    }
  }
}
</script>

<style>

</style>
