<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
          :style="{ width: '70%' }"
        />
      </el-form-item>
      <el-form-item label="题目难度" prop="difficulty">
        <el-select v-model="formInfo.difficulty" :style="{ width: '70%' }">
          <el-option
            v-for="item in difficulties"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in curIndex"
        :key="item + index"
        :label="item"
        :prop="item"
      >
        <el-input
          v-model="formInfo[item]"
          type="textarea"
          autosize
          :style="{ width: '70%' }"
        />
        <div class="other-wrapper">
          <div class="">
            正确选项:&nbsp;&nbsp;<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
          :style="{ width: '70%' }"
        />
      </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>
import { postOnlineExamSubject } from "@/api/test.js";
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", "E", "F"],
      answer: "",
      formInfo: {
        outline: "",
        analysis: "",
        A: "",
        B: "",
        C: "",
        D: "",
        E: "",
        F: "",
        difficulty: ""
      },
      rules: {
        difficulty: [
          {
            required: true,
            message: "请选择题目难度",
            trigger: "change"
          }
        ],
        outline: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur"
          }
        ],
        analysis: [
          {
            required: true,
            message: "请输入解析",
            trigger: "blur"
          }
        ]
      },
      difficulties: [
        {
          label: "简单",
          value: "简单"
        },
        {
          label: "一般",
          value: "一般"
        },
        {
          label: "困难",
          value: "困难"
        }
      ]
    };
  },
  mounted() {
    console.log(this.$route.params.name, "this.$route.params.name");
  },
  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/" + this.$route.params.name
      });
    },
    saveSingleSelection() {
      // axios
      // 调用
    },
    saveAndAdd() {
      // axios
      // 恢复初始状态
      const data = {
        analysis: this.formInfo.analysis,
        answer: this.answer,
        difficulty: this.formInfo.difficulty,
        libraryId: this.$route.params.name,
        optiona: this.formInfo.A,
        optionb: this.formInfo.B,
        optionc: this.formInfo.C,
        optiond: this.formInfo.D,
        question: this.formInfo.outline,
        type: "单选题"
      };
      if (this.formInfo.E) {
        data.optione = this.formInfo.E;
      }
      if (this.formInfo.F) {
        data.optionf = this.formInfo.F;
      }
      this.$refs.addform.validate(valid => {
        if (valid) {
          if (!this.answer) {
            this.$message.error("请选择正确选项");
            return;
          }
          postOnlineExamSubject(data)
            .then(res => {
              console.log(res, "postOnlineExamSubject");
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.formInfo = {
                outline: "",
                analysis: "",
                A: "",
                B: "",
                C: "",
                D: "",
                E: "",
                F: "",
                difficulty: this.formInfo.difficulty
              };
              this.answer = "";
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.other-wrapper {
  display: flex;
  justify-content: space-between;
}
.single-selection-wrapper {
  padding: 10px;
  border-radius: 5px;
  margin: 10px 10px;
  .tools-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 25%;
  }
}
</style>
