<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=""
          :style="{ width: '70%' }"
        />
      </el-form-item>
      <el-form-item label="请选择难度" prop="difficulty">
        <el-select
          v-model="formInfo.difficulty"
          placeholder="请选择难度"
          :style="{ width: '70%' }"
        >
          <el-option
            v-for="item in difficulties"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="item in curIndex"
        :key="item.key"
        :label="item.key"
        :prop="item.key"
      >
        <el-input
          v-model="formInfo[item.key]"
          type="textarea"
          autosize
          :style="{ width: '70%' }"
        />
        <div class="other-wrapper">
          <div class="">
            正确选项:&nbsp;&nbsp;&nbsp;<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
          :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="save">保存</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: [
        {
          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
        }
      ],
      difficulties: [
        {
          label: "简单",
          value: "简单"
        },
        {
          label: "一般",
          value: "一般"
        },
        {
          label: "困难",
          value: "困难"
        }
      ],
      curIndex: [
        {
          key: "A",
          value: false
        },
        {
          key: "B",
          value: false
        },
        {
          key: "C",
          value: false
        },
        {
          key: "D",
          value: false
        },
        {
          key: "E",
          value: false
        },
        {
          key: "F",
          value: false
        }
      ],
      formInfo: {
        outline: "",
        analysis: "",
        difficulty: "",
        A: "",
        B: "",
        C: "",
        D: "",
        E: "",
        F: ""
      },
      rules: {
        difficulty: [
          {
            required: true,
            message: "请选择难度",
            trigger: "change"
          }
        ],
        outline: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur"
          }
        ],
        analysis: [
          {
            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/" + this.$route.params.name
      });
    },
    save() {},
    saveAndAdd() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          console.log(this.formInfo, "this.formInfo");
          console.log(this.curIndex, "this.curIndex this.curIndex");
          if (this.curIndex.filter(item => item.value === true).length === 0) {
            this.$message.error("请选择正确答案");
            return;
          } else {
            const data = {
              analysis: this.formInfo.analysis,
              answer: this.curIndex
                .filter(item => item.value === true)
                .map(item => item.key)
                .join("、"),
              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;
            }
            postOnlineExamSubject(data)
              .then(res => {
                this.$message({
                  type: "success",
                  message: "添加成功"
                });
                this.formInfo = {
                  outline: "",
                  analysis: "",
                  A: "",
                  B: "",
                  C: "",
                  D: "",
                  E: "",
                  F: "",
                  difficulty: this.formInfo.difficulty
                };
                this.curIndex.forEach(item => {
                  item.value = false;
                });
              })
              .catch(() => {
                this.$message.error("添加失败");
              });
          }
        }
      });
      // postOnlineExamSubject()
    },
    deleteItem() {
      const popGet = this.curIndex.pop();
      delete this.formInfo[popGet.key];
      delete this.rules[popGet.key];
    }
  }
};
</script>

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